Skip to content

Commit 0375dc6

Browse files
fezcodefezcode
committed
feat(design): apply herbarium design language to fractal flora
Introduces Herbarium: a naturalist's pressed-specimen atlas aesthetic — ecru paper, cream mounted cards, rust corner pins, twine-tied taxonomic labels, slow-swaying ghosted fern watermarks, hand-drawn wavy sepia rules, Playfair Display italic Latin binomials paired with Space Mono field notes. Applies it to the Fractal Flora app: the canvas is mounted as a 'Pressed Specimen' with a taxonomic label strip (Arborum digitalis var. ver/aestas/autumnus/hiems/spectrum), the sliders become 'Field Instruments' bearing both Latin and English names (Recursio, Angulus, Longitudo, Basis, Ventus, Stochasia), and the seasonal palettes become five bound Volumes. Adds a sepia marginalia inset, handwritten collection-date annotation, deterministic folio numbers, and keeps the original recursive rendering logic intact. Also adds the Herbarium card to /design alongside Atelier, Galley, and Atlas — bumps Inner Design Languages to a 4-column grid on lg.
1 parent 7cec7e5 commit 0375dc6

2 files changed

Lines changed: 878 additions & 197 deletions

File tree

‎src/pages/DesignSelectionPage.jsx‎

Lines changed: 143 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
PaintBrushBroadIcon,
1313
ScrollIcon,
1414
TerminalWindowIcon,
15+
PlantIcon,
1516
} from '@phosphor-icons/react';
1617
import Seo from '../components/Seo';
1718
import GenerativeArt from '../components/GenerativeArt';
@@ -193,7 +194,7 @@ const DesignSelectionPage = () => {
193194
</p>
194195
</div>
195196

196-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 lg:gap-16">
197+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-10">
197198

198199
{/* ── ATELIER ── */}
199200
<Link to="/apps/github-thumbnail-generator" className="group block relative">
@@ -449,6 +450,147 @@ const DesignSelectionPage = () => {
449450
</motion.div>
450451
</Link>
451452

453+
{/* ── HERBARIUM ── */}
454+
<Link to="/apps/fractal-flora" className="group block relative">
455+
<motion.div
456+
whileHover={{ y: -10 }}
457+
className="h-full p-12 flex flex-col justify-between overflow-hidden transition-all duration-500 relative"
458+
style={{
459+
background: '#F0E9D9',
460+
borderRadius: 2,
461+
boxShadow:
462+
'0 0 0 1px rgba(30,58,43,0.2) inset, 0 30px 60px -30px rgba(30,58,43,0.3)',
463+
}}
464+
>
465+
{/* rust corner pins */}
466+
{['tl','tr','bl','br'].map((c) => {
467+
const pos = {
468+
tl: { top: 10, left: 10 },
469+
tr: { top: 10, right: 10 },
470+
bl: { bottom: 10, left: 10 },
471+
br: { bottom: 10, right: 10 },
472+
}[c];
473+
return (
474+
<span
475+
key={c}
476+
aria-hidden
477+
className="absolute w-2.5 h-2.5 rounded-full z-20"
478+
style={{
479+
...pos,
480+
background:
481+
'radial-gradient(circle at 35% 35%, #E38866 0%, #A65B3A 50%, #8B4A2D 100%)',
482+
boxShadow:
483+
'0 2px 3px rgba(30,58,43,0.3), inset 0 1px 1px rgba(255,255,255,0.3)',
484+
}}
485+
/>
486+
);
487+
})}
488+
{/* fern silhouette watermark */}
489+
<svg
490+
viewBox="0 0 200 640"
491+
className="absolute pointer-events-none"
492+
style={{
493+
top: 10,
494+
right: -40,
495+
width: 180,
496+
color: '#2E5E3B',
497+
opacity: 0.09,
498+
zIndex: 0,
499+
}}
500+
aria-hidden
501+
>
502+
<path
503+
d="M100 10 Q 94 220, 98 580 Q 100 610, 96 628"
504+
stroke="currentColor"
505+
strokeWidth="1.5"
506+
fill="none"
507+
strokeLinecap="round"
508+
/>
509+
{Array.from({ length: 14 }).map((_, i) => {
510+
const y = 36 + i * ((580 - 36) / 14);
511+
const size = 68 - i * (58 / 14);
512+
const droop = 8 + i * 0.4;
513+
return (
514+
<g key={i}>
515+
<path
516+
d={`M98 ${y} Q ${98 - size * 0.55} ${y + droop * 0.3}, ${98 - size} ${y + droop} Q ${98 - size * 0.7} ${y - droop * 0.6}, 98 ${y}`}
517+
fill="currentColor"
518+
/>
519+
<path
520+
d={`M98 ${y} Q ${98 + size * 0.55} ${y + droop * 0.3}, ${98 + size} ${y + droop} Q ${98 + size * 0.7} ${y - droop * 0.6}, 98 ${y}`}
521+
fill="currentColor"
522+
/>
523+
</g>
524+
);
525+
})}
526+
</svg>
527+
528+
<div className="space-y-8 relative z-10">
529+
<div
530+
className="w-16 h-16 flex items-center justify-center transition-all duration-500"
531+
style={{
532+
background: 'rgba(166,91,58,0.08)',
533+
color: '#2E5E3B',
534+
borderRadius: 2,
535+
border: '1px solid rgba(30,58,43,0.2)',
536+
}}
537+
>
538+
<PlantIcon size={32} weight="regular" />
539+
</div>
540+
<div className="space-y-4">
541+
<div
542+
className="inline-flex items-center gap-2 px-2.5 py-1 text-[9px] uppercase tracking-[0.28em] font-bold"
543+
style={{
544+
background: '#A65B3A',
545+
color: '#F0E9D9',
546+
fontFamily: "'Space Mono', monospace",
547+
}}
548+
>
549+
Pressed · Mounted
550+
</div>
551+
<h3
552+
className="text-5xl italic leading-none tracking-tight"
553+
style={{
554+
fontFamily: "'Playfair Display', serif",
555+
color: '#1E3A2B',
556+
}}
557+
>
558+
Herbarium
559+
</h3>
560+
<p
561+
className="text-sm italic leading-relaxed"
562+
style={{
563+
fontFamily: "'Playfair Display', 'EB Garamond', serif",
564+
color: '#6B4423',
565+
}}
566+
>
567+
A naturalist's pressed-specimen atlas. Ecru paper, rust
568+
pins, twine-tied taxonomic labels, Latin binomials.
569+
</p>
570+
</div>
571+
</div>
572+
<div
573+
className="mt-12 pt-8 flex justify-between items-center relative z-10 border-t"
574+
style={{ borderColor: 'rgba(30,58,43,0.2)' }}
575+
>
576+
<span
577+
className="text-[10px] uppercase tracking-[0.3em]"
578+
style={{
579+
color: '#3E5A4A',
580+
fontFamily: "'Space Mono', monospace",
581+
}}
582+
>
583+
Hortus_Digitalis
584+
</span>
585+
<ArrowRightIcon
586+
className="group-hover:translate-x-2 transition-all"
587+
size={24}
588+
style={{ color: '#A65B3A' }}
589+
/>
590+
</div>
591+
</motion.div>
592+
</Link>
593+
452594
</div>
453595
</div>
454596

0 commit comments

Comments
 (0)