# Design Language for persona.quest ## Aesthetics and Tone persona.quest is a **dreamy botanical codex** — as if a Victorian naturalist fell asleep mid-illustration and woke up inside her own specimen plates. The visual register sits between Pre-Raphaelite intensity and soft-focus reverie: rich sunset pigments bleeding into cream vellum, crystalline geometric overlays fragmenting botanical line art into faceted prisms. Nothing here is digital in the cold, technological sense. It feels pressed like a flower inside a very old book. The mood is **dreamy-ethereal** tipping toward the surreal: botanical forms float unmoored from their stems, crystalline refractions split a single petal into six translucent shards, serif capitals appear mid-air inside amber gradients. The visitor is not browsing a profile — they are wandering through someone's inner herbarium, discovering what a persona is made of. Inspired by: Anna Atkins's cyanotype photograms, Ernst Haeckel's Kunstformen der Natur, Art Nouveau stained-glass leading, and the warm backlit quality of amber inclusions preserving prehistoric specimens. Color temperature is always **warm-to-hot**: the page never drifts into cool blues or clinical whites. Even shadows carry a saffron undertone. ## Layout Motifs and Structure **Editorial-flow with fractured crystalline interruptions.** The primary reading axis is a single generous column (~660px) centered on a warm vellum ground. Text flows downward in unhurried editorial rhythm — long seriffed paragraphs, drop caps on section openings, generous leading. This is the "book" layer. Interrupting that column at irregular intervals are **crystalline panel shards**: full-bleed geometric shapes (irregular hexagons, elongated rhombi, acute triangles) that slice diagonally across the column at 15°–22° angles, carrying botanical illustrations trapped inside them like inclusions in amber. These are not decorative dividers — they are visual events that break the reader's descent and demand attention before the text resumes. **Spatial relationships:** - Column gutter: 80px minimum on each side; at desktop the page breathes - Crystalline shards extend beyond the column edge to full viewport width, creating a sense of depth rupture - Each shard has its own micro-typography (a species name, a coordinate, a date in small caps) floating within - The final panel is always a full-viewport crystalline explosion: the persona's name shattered into a Voronoi diagram of botanical fragments **No navigation bar.** A single monogram in the top-left corner is the only persistent UI. Everything else is progressive disclosure: content reveals as the visitor descends through the editorial column. ## Typography and Palette **Primary typeface: Cormorant Garamond** (Google Fonts) - Used for all body text, long-form prose, and quotations - Weights: 300 (light, for body), 600 italic (for emphasized phrases), 700 (for drop caps and headings) - Size scale: 18px body / 13px captions / 52px section headings / 96px hero monogram **Secondary typeface: IM Fell English** (Google Fonts) - Used exclusively for specimen labels, scientific annotations, and coordinates floating inside crystalline shards - The irregular, slightly warped letter spacing of IM Fell English mimics hand-lettered herbarium tags **Accent typeface: Cinzel Decorative** (Google Fonts) - Single-use: the persona.quest logotype in the top-left corner and the hero first word only - Never used at body size — minimum 28px **Palette — Sunset Warm:** - `#F5E6C8` — Vellum Ground (primary background, parchment-warm) - `#C8622A` — Burnt Sienna (headings, active shard borders, drop caps) - `#E8A44A` — Amber Honey (crystalline shard fill at 70% opacity, warm glow) - `#8B3A1E` — Deep Mahogany (body text, primary prose) - `#D4784C` — Terracotta Flush (hover states, link underlines, micro-labels) - `#F0CDA0` — Pale Gold Wash (shard overlay tint, crystalline facets) - `#3D1A0A` — Espresso Dark (deep shadow tones, ornamental rules) - `#B85C38` — Rust Copper (botanical illustration stroke color) All crystalline shards use the amber-to-sienna gradient: `linear-gradient(135deg, #E8A44A 0%, #C8622A 100%)` at 65% opacity over the botanical SVG beneath. ## Imagery and Motifs **Botanical illustrations — inline SVG only, no photography.** Each botanical specimen is drawn in the style of 19th-century copperplate engraving: fine hairline strokes (`stroke-width: 0.6px`), hatching for shadow volumes, stippling for petal texture, detailed root system visible below the stem. The color palette is constrained to three tones per specimen: the rust copper stroke color `#B85C38`, the vellum ground `#F5E6C8`, and a single accent matching the nearest shard color. **Specimen roster for persona.quest:** - **Crystalline Rosa** — a full-bloom rose whose outer petals are replaced by transparent geometric facets, the inner petals remain biological and warm. Used as the hero illustration, centered above the first editorial paragraph. - **Fractured Fern Column** — a Dryopteris filix-mas rendered faithfully from base to tip, except at three points along the rachis it shatters into Voronoi cells that float away from the main axis. Appears as a right-margin annotation running beside the second content section. - **Amber Seed Lattice** — a cross-section of a seed pod where each seed is replaced by a crystalline prism catching warm light. Used inside the mid-page shard interruption. - **Ghost Orchid Fragment** — a Dendrophylax lindenii whose aerial roots dissolve into geometric wireframe where they meet the edge of the panel. Used in the closing full-viewport section. **Crystalline motifs — the structural signature:** Irregular polygon meshes (Delaunay triangulation) are used as both a visual motif and a structural element. They appear: (1) as clip-paths containing the botanical illustrations inside shard panels, (2) as a subtle `opacity: 0.07` texture overlaid on the vellum ground (a barely-visible geometric grain), and (3) as the fragmentation effect in the closing Voronoi explosion. **Ornamental rules:** Single-weight `#C8622A` horizontal rules, 0.5px, with a small central diamond ornament (`◆`) in the same color, used between major editorial sections. ## Prompts for Implementation **The story to tell.** A persona is not a resume. It is the set of qualities a self chooses to crystallize — the aspects it holds up to the light and lets refract. persona.quest is the place where a person's inner herbarium becomes visible: specimens of identity, pressed and annotated, fractured and made beautiful. The visitor arrives knowing only the domain name. They scroll through the editorial column discovering who this person is — not through bullet points, but through the atmosphere of the page itself. **Hero section (100vh):** Full-height, no navigation. Center-aligned. Background `#F5E6C8`. The Crystalline Rosa SVG illustration floats at 60% viewport height, centered. Above it, in Cinzel Decorative 96px `#C8622A`, a single word — the persona's defining noun (e.g., "CURATOR" or "ARCHITECT" — whatever the real persona carries). Below the rose, in Cormorant Garamond 300 italic 22px `#8B3A1E`, a single line of prose: a sentence that only makes sense after reading the whole page. No scroll indicator — the visitor finds the threshold themselves. **Progressive disclosure — the editorial column:** The column begins below the hero fold. Each section is revealed by the `Intersection Observer` API — not a dramatic entrance but a quiet `opacity: 0 → 1` over 600ms with a `translateY(12px) → translateY(0)` lift. This is the `progressive-disclosure` pattern made intimate: content appears as if the visitor is leaning close enough for the ink to become legible. **Crystalline shard interruptions (3 occurrences):** Implemented as `position: relative` containers that extend `left: -50vw; width: 100vw` to bleed full-width. Each shard is an SVG `` shape with a clip-path applied to a `
` containing the botanical illustration behind the amber gradient overlay. The shard tilts at 18° via `transform: rotate(18deg)` on the inner content while the outer container stays grid-aligned, creating a shearing effect. Inside each shard: one specimen illustration + one annotation in IM Fell English 13px tracking `0.12em`. **Closing section — Voronoi explosion:** The final 100vh section shows the Ghost Orchid Fragment dissolving. The orchid SVG is clipped to a Voronoi mesh generated in JavaScript (Fortune's algorithm, ~40 cells). Each cell `transition: transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1)` drifting outward from the center by 8–20px on `IntersectionObserver` trigger. The persona's name appears in the center of the dissolution in Cormorant Garamond 700 72px `#3D1A0A`. No button. No CTA. The page ends here. **Micro-interactions:** - Hovering the monogram logotype causes the Cinzel Decorative letterforms to briefly fragment (each letter SVG-clips to a mini crystalline shard) then reassemble over 400ms - Hovering botanical illustrations causes the specimen to shift from rust-copper monochrome to its full warm-palette coloring over 300ms ease - The ornamental diamond rules `◆` pulse very subtly (scale 1.0 → 1.15 → 1.0 over 3s, infinite) — the only motion on the page at rest **AVOID in implementation:** - No sticky navigation bar - No hero video or background photography - No card grids, pricing tables, or CTA buttons - No parallax scrolling on background elements (OVERUSED in registry) - No confetti or particle systems - No stagger animations on lists (OVERUSED in registry) ## Uniqueness Notes 1. **Botanical-illustration-as-identity-metaphor, not decoration**: Most sites using botanical motifs employ them as aesthetic wallpaper — florals in hero backgrounds, leaf icons. Here the botanical specimens *are* the content model: each illustrated specimen corresponds to a facet of the persona. The Crystalline Rosa is not decoration; it is the first thing the visitor learns about who lives here. No other registry design uses botanical illustration as a primary information layer. 2. **Crystalline shard interruptions as editorial punctuation**: The use of geometric Delaunay/Voronoi mesh as a structural device — clip-paths that contain content, not borders that surround it — is registry-unique. The closest neighbor (mysterious.boo) uses annotation rails; dilemma.quest uses marble texture. persona.quest uses fragmented geometry as a reading rhythm device: the shards are *where* the visitor pauses, not filler between pauses. 3. **Surreal botanical realism**: Each specimen illustration is anatomically faithful up to the point of crystalline rupture. The fern rachis is correct; only the shatter points break from biology. The rose petals are volumetrically accurate; only the outer layer facets into glass. This hybrid (scientific illustration + geometric surrealism) has no equivalent in the current registry. 4. **Sunset-warm palette with zero cool tones**: The entire page operates within a 30° arc of the warm color wheel (orange-amber-sienna-mahogany). There is no white, no cool gray, no blue. This creates an unusual visual coherence — the page looks like it is lit from behind by a single amber source — that distinguishes it from the many dual-tone or neutral-ground designs in the registry. 5. **Progressive disclosure as intimacy device**: Most progressive-disclosure implementations in the registry use dramatic reveals (spring physics, magnetic snap, stagger grids). Here the disclosure is deliberately quiet — a 600ms opacity fade is all — because the metaphor demands it: you do not dramatically discover a pressed flower; you lean close and it becomes visible. Chosen seed: aesthetic: surreal, layout: editorial-flow, typography: serif-revival, palette: sunset-warm, patterns: progressive-disclosure, imagery: botanical-illustration, motifs: crystalline, tone: dreamy-ethereal Avoided overused patterns: parallax (77%), photography-as-imagery (87%), vintage motifs (37%), stagger animations (53%), scroll-triggered dramatic entrances (35%)