# Design Language for tsundere.party ## Aesthetics and Tone tsundere.party is a **generative botanical conservatory framed as a midsummer garden party held at dusk** — the kind of evening event staged in the walled courtyard of an old country estate, where paper lanterns are strung between fig trees and the hedges have been allowed to grow into one another for a hundred years. The site treats every viewport as a freshly arranged tablescape: each visit reseeds the floral arrangement, so the same headline appears framed by a slightly different bouquet of foxglove, peony, and trailing wisteria. Nothing on the page is rectangular; the underlying grid is broken open and reformed around stems, leaves, and the negative space between blossoms. The mood is **pastoral-romantic** in the literary sense — closer to a Brontë garden or a Colette afternoon than to wedding stationery. There is a deliberate slowness: the cursor parts the foliage, petals settle a half-second after the page loads, and copy reads like an invitation written by hand and slid under a heavy door. The aesthetic ground is **generative** — every botanical element is composed at runtime from procedural rules (L-systems for stems, deterministic seeded placement for blooms), so no two sessions see identical arrangements, but the rules guarantee a consistent rhythm of visual density. The whole effect is *jewel-bright but never neon* — saturated like stained glass at sunset, where garnet, amethyst, and emerald glow against an indigo-twilight ground. The site is a place to **arrive at and linger in**, not a brochure to scan. ## Layout Motifs and Structure The structural backbone is **organic-flow**: an irregular, spiraling reading path rather than a vertical scroll. The hero opens with a procedurally generated **trellis composition** — a 1400×900 SVG canvas where botanical illustrations are arranged along a Fibonacci-derived golden spiral, with primary text nested into the negative space at the spiral's center. Below the hero, content is laid out as a sequence of **garden bed sections**: each one is a freeform region (no fixed grid) where text blocks, image plates, and pull-quotes are placed at off-axis angles (-7°, +4°, -2°) and connected by hand-drawn vine SVG paths that thread between them. The reading order is enforced by the vine's flow direction, not by vertical stacking. **Layered-depth** is the spatial signature: every section uses 6–8 z-layers — a deepest indigo wash, a midground silhouette layer of dark foliage, a primary illustration plane, a translucent petal-fall layer, the text plane, a foreground leaf-blur layer, and a topmost lantern-light gradient — each layer responds to cursor parallax at a different rate (deepest moves 2px, foreground moves 24px). Section transitions are **archway breaks**: a procedurally drawn ivy archway (varying stem thickness, leaf count, and droop) separates each garden bed, so the page reads as a procession through connected courtyards rather than as scrolled cards. The footer is a **night-bloom panel** — full-width, deepest indigo, where the same procedural system regenerates as a closing flourish with white moonflowers replacing the daytime palette. ## Typography and Palette **Typography** is structured around contrast between an oversized **display-bold serif** and a quiet humanist body face: - **Display:** *Bodoni Moda* (Google Fonts) at weight 900, optical size 96, used for H1 at clamp(72px, 9vw, 168px) with tight tracking (-0.03em). The high-contrast Didone strokes echo the silhouette of botanical illustration plates from 19th-century herbarium books. - **Section headings (H2):** *Cormorant Garamond* (Google Fonts) at weight 600, italic, clamp(34px, 4vw, 56px). The italic carries the script-like quality of botanical-plate annotations without becoming a full script font. - **Pull-quotes and place-cards:** *Italiana* (Google Fonts) at weight 400, used at 28–40px for the short interstitial lines that float between garden beds. - **Body:** *Lora* (Google Fonts) at weight 400, 19px / 1.7, with weight 600 for emphasis. Lora's bracketed serifs hold up at small sizes against the dense backgrounds. - **Microtype:** *Work Sans* (Google Fonts) at weight 500, 12px, tracking +0.18em, uppercase, reserved for figure captions, plate numbers ("PLATE IX"), and the bottom-of-page colophon. **Palette — Jewel-tones over indigo twilight:** - `#1A1147` — *Twilight indigo* (deepest ground, page background) - `#2D1F5A` — *Vesper plum* (midground washes, section dividers) - `#7A1F3D` — *Garnet* (primary heading color, ivy-fruit accents) - `#B8336A` — *Damask rose* (secondary accent, hover-state petals, link underlines) - `#0E5C4A` — *Emerald moss* (stem and leaf base color in illustrations) - `#D4A437` — *Antique gold* (lantern glow, ornamental punctuation glyphs, plate borders) - `#E8C9D6` — *Blush porcelain* (body text on dark ground, soft highlights on petals) - `#F4E8C1` — *Vellum* (page-corner "place-card" backgrounds for pull-quotes) Saturated but darkened — every jewel tone is mixed with at least 15% of the twilight indigo so the palette reads as evening-lit, not daylight-bright. ## Imagery and Motifs **Botanical illustration** is the primary imagery system, executed entirely as inline SVG generated at load time. The illustration vocabulary is intentionally narrow: foxglove spires, peony heads, trailing wisteria, fig leaves, ivy, hellebore, ranunculus, and a single recurring moth (*Saturnia pavonia*) that appears once per page. Each plant is a parametric SVG component — `` — where the seed deterministically controls bloom count, stem curvature, and droop. This produces hand-illustration variety without illustrating by hand. Linework follows herbarium convention: 0.75px emerald-moss outlines, cross-hatched shading at 30° in the same color, fills in damask-rose / antique-gold / vellum at 75% opacity so the line shows through. Every botanical element carries a tiny faux-Latin caption in 11px Work Sans tracked uppercase ("DIGITALIS NOCTIS", "WISTERIA SOMNII") set in a thin gold rectangle — an inside joke for botanical-print collectors. **Motifs** layered through the composition: (1) **lantern-light gradients** — radial gold-to-transparent washes positioned along the spiral path, accented by a 1.5px gold outline that flickers via a subtle 4-second opacity oscillation; (2) **petal-fall** — a particle layer of 12 hand-drawn petal silhouettes drifting from top-right to bottom-left at 0.4× cursor-influenced wind, with a ground accumulation that builds during the session; (3) **archway dividers** — described above, varying procedurally; (4) **place-card pull-quotes** — vellum rectangles with a wax-seal-style emerald circle bearing a single embossed initial; (5) **plate numbering** — small "PLATE I", "PLATE II" labels in the bottom-right of major sections, drawn in gold inside a thin double border; (6) **ribbon embellishments** — narrow garnet ribbons that thread under botanicals carrying section anchors, mimicking the ribbon-bound annotations of antique flora books. The **cursor-follow** pattern is the central interaction motif: the cursor is treated as **a hand parting the foliage**. Within a 240px radius, foreground leaves rotate up to 18° away from the cursor, petals drift 30px against the cursor direction, and the lantern layer brightens its nearest gradient by 20%. The effect is gentle, not bouncy — all transitions ease over 600–900ms. On mobile the cursor-follow is replaced by a device-tilt fallback driven by `deviceorientation`. ## Prompts for Implementation 1. **Stack:** Static HTML / CSS / vanilla JS only. No framework. All generative SVG produced by a single `~12kb` `botanica.js` module exposing `bloom(seed, container, opts)`. Deterministic seeded RNG (mulberry32) — seed taken from `localStorage.partySeed` or generated once per session. 2. **Sections in order:** (a) Hero spiral trellis with H1 nested at the eye of the spiral; (b) "An Invitation" — single 28px Italiana paragraph on vellum place-card; (c) Plate I — primary copy section with foxglove and peony composition on the right gutter; (d) Plate II — pull-quote section, hellebore archway entry; (e) Plate III — link garden, where each link is rendered as a tagged botanical specimen; (f) Plate IV — colophon and credits, framed by night-blooming wisteria; (g) Footer night-bloom panel with regenerating moonflowers. 3. **Animation discipline:** Three motion classes only — *bloom-in* (300–800ms staggered scale+opacity at load), *parallax-sway* (continuous, 0.4× cursor-driven, 600ms ease), *petal-drift* (linear loop, 18s per petal). All respect `prefers-reduced-motion: reduce` by collapsing to static composition with the seeded arrangement still varied per session. 4. **Procedural arrangement contract:** Each garden bed declares `density: 0.3–0.9`, `palette: ["garnet", "damask", "moss"]`, and `species: [...]`. The bed renderer guarantees no overlap > 30%, leaves a `text-safe` polygon clear, and emits an SRT-like ordering attribute so the cursor-parallax layers can be assigned without manual z-index management. 5. **Performance budget:** Total page weight under 220kb (no raster botanicals). Initial paint under 1.2s on 4G. SVG illustrations memoized after first generation per scroll session. Petal-drift particle count clamps to 8 on viewports under 768px. 6. **Tone of voice:** All copy reads as a hand-written invitation. Sentences are long, comma-laced, slightly archaic in register but never costume-y. No emoji, no exclamation points, no marketing-speak. Use ampersands, em-dashes, and the occasional "&c." 7. **Storytelling:** The site is structured as an evening that unfolds — arrival at the gate (hero), the invitation read aloud, four plates of garden beds visited in slow procession, then a quiet exit through the moonflower arch. Copy should narrate this passage, not describe a product. 8. **No-go list:** No photographs. No gradients other than the radial lantern-light pattern. No glassmorphism, no neumorphism. No cards with rounded corners. No bento grid. No avatars or testimonials. No reveal-on-scroll animation triggered by scroll position (sections are pre-bloomed and stay in place). No CTA stacks, no pricing tables, no stat grids. ## Uniqueness Notes 1. **Spiral-as-grid, not stack-as-grid:** The hero is a Fibonacci spiral composition with text at the spiral's eye, not a centered hero with botanical decoration around it. The reading entry-point is geometrically off-center — uncommon among the floral/wedding-aesthetic genre that almost always centers a script headline over a symmetrical bouquet. 2. **Generative botanicals from parametric SVG, not stock illustration:** Every leaf, petal, and stem is composed at runtime from a seeded RNG and a small species library. No `.png` botanicals, no stock SVG sets, no Adobe Illustrator imports. The site is genuinely never the same twice for the same visitor. 3. **Cursor-as-gardener:** The cursor-follow pattern is reframed as "parting the foliage" with directional leaf rotation, anti-cursor petal drift, and lantern brightening — qualitatively different from cursor-follows that move a single blob, glow, or magnetic button. It uses the foreground layer as a physical medium. 4. **Indigo-twilight ground for a "garden" site:** The pastoral-romantic tone is almost universally rendered on cream/blush/sage daylight palettes. tsundere.party puts the garden party at dusk, with jewel-tone florals against `#1A1147`, and uses gold lantern-light as the warmth source. This inverts the genre's lighting assumption. 5. **Layered-depth via 6–8 parallax planes, not via shadows:** Depth comes from genuine z-stacked SVG layers each scrolling/parallaxing at its own rate, not from drop-shadows on cards or from a single hero parallax image. The viewer's spatial sense is built from foliage occluding foliage occluding light. 6. **Plate-numbered structure, not section-numbered:** Sections are labeled "PLATE I" through "PLATE IV" in herbarium typography with thin gold double-borders, replacing the conventional 01/02/03 numbering with botanical-print convention. This is a structural typographic move, not just a label change. 7. **Display-bold Bodoni 900 paired with Italiana script-card pull-quotes:** Most floral aesthetics either go all-script or all-modern-serif. Pairing a 168px Bodoni Moda 900 with a 28px Italiana on a vellum place-card is a deliberately stagey contrast — display authority next to handwritten intimacy — that neither half of the genre tends to use. 8. **Faux-Latin specimen captions everywhere:** Each plant carries an 11px gold-on-indigo "DIGITALIS NOCTIS" caption like a real herbarium. This turns the site's decoration into pseudo-content, rewarding readers who slow down — none of the comparable floral sites annotate their illustrations. **Chosen seed:** aesthetic: generative, layout: organic-flow, typography: display-bold, palette: jewel-tones, patterns: cursor-follow, imagery: botanical-illustration, motifs: layered-depth, tone: pastoral-romantic **Avoided patterns from frequency analysis:** symmetric centered hero (over-represented in floral/event domains — replaced with off-axis Fibonacci spiral), cream/blush daylight palette (replaced with indigo-twilight jewel-tones), photography (replaced with parametric SVG illustration), CSS gradient washes (replaced with discrete radial lantern points), card-based section layout (replaced with archway-divided garden beds), reveal-on-scroll motion (replaced with pre-bloomed static composition + cursor-driven parallax), and rounded-corner UI (replaced with herbarium plate borders and ribbon dividers).