# Design Language for kaguya.date ## Aesthetics and Tone kaguya.date is **fairycore in dopamine clothes** -- a moonlit clearing of botanical illustration lit by neon mushrooms, where the small hand-lettered note tucked under a stone reads in honest, unvarnished prose. The mood is **raw-authentic**: this is not a corporate dating product; it is a private fairyland left out for whoever finds it, and the writer admits to being lonely, hopeful, awkward, alive. Inspirations: Cicely Mary Barker's flower-fairy plates redrawn for a neon-rave flyer, Mati Klarwein's psychedelic botanical compositions, the saturated yellow-pink-green palettes of Yayoi Kusama's Infinity Mirrored Rooms, Studio Ghibli's "Princess Mononoke" forest interiors, and the unpolished tone of a friend's actual diary. Fairycore gives the site its botanical illustration, mushroom-circle motifs, and gentle floating-things; the dopamine-neon palette supplies a fizzy electric brightness. Particle effects (drifting petals, blinking fireflies, scattering pollen) carry the fairy magic. Despite the high color saturation, the page is paced slowly with a hero-dominant first impression, then deliberate fade-reveal transitions. ## Layout Motifs and Structure A **hero-dominant** composition where the first 140vh delivers the entire visual personality, then the rest of the page reveals patiently via fade-reveal patterns. - **Hero (140vh):** A full-bleed dopamine-neon sunset gradient (chartreuse -> coral -> magenta) behind a centered botanical-illustration ring of seven hand-drawn fairy-flowers. In the middle: the wordmark "KAGUYA.DATE" in Commissioner display, at clamp(72px, 12vw, 192px), with each letter subtly tilted at varied angles. Particle-effect petals and pollen drift across the viewport (canvas-driven). The wordmark itself fade-reveals over 1.6s in three letter groups. - **Letters scroll (80vh per letter, repeated 4-5x):** A vertical stack of "letters" -- short hand-written-style messages from kaguya, each fade-revealing in three paragraphs as the user scrolls past them. The letters are flanked by hand-drawn botanical illustrations (a fern, a foxglove, a small mushroom). - **Photographs of leftover things (90vh):** A small gallery of objects-in-grass photographs -- a stone, a key, a folded paper. Each fades in from blur to focus over 1.4s as it enters viewport. - **The wish-tree (110vh):** A long vertical illustration of a tree with hand-drawn ribbons tied to its branches. Each ribbon holds one short wish. Fade-reveal on entry. - **Closing letter (70vh):** A single quiet letter centered, fading in last: "if you are reading this, leave a note for me too." Beneath, a mailto link. Particles run throughout (canvas overlay, full-bleed, low opacity) carrying drifting petals, slow fireflies, and pollen specks. The composition flows from saturated hero into slower contemplative letters -- the dopamine punch is up front, the rawness lives in the long body. ## Typography and Palette **Fonts (Google Fonts only):** - **Display:** "Commissioner" (variable, weight 700, opsz set for display) at clamp(72px, 12vw, 192px). The wordmark uses per-letter tilts (-4 to +4 deg) so it feels handwritten despite being a precise font. - **Sub-display:** "Commissioner" weight 600 at clamp(28px, 4vw, 52px), used for letter headings. - **Body:** "Commissioner" weight 400 at 18px / 1.75 for the letters. The variable axes carry the whole type system. - **Italic / asides:** "Caveat" weight 500 at 18px for handwritten margin notes -- the only secondary font. - **Numerals:** "Commissioner" tabular figures at 14px for dates beside each letter. **Palette (dopamine-neon -- saturated but warm):** - `#fff4d2` -- pollen cream (text on dark, soft highlight) - `#feeaa4` -- daffodil neon (hero gradient stop, accent) - `#ff7a92` -- coral neon (hero gradient stop, primary accent) - `#ff3aa6` -- magenta neon (hero gradient stop, secondary accent) - `#b04acc` -- amethyst (mid-tone) - `#1a0c30` -- midnight aubergine (primary background after hero) - `#3eff90` -- chartreuse spark (highlight, rare accent for fireflies) The hero is a saturated dopamine wash; the letters scroll past on a deeper aubergine field with pollen-cream text. The chartreuse is reserved for firefly sparks only. ## Imagery and Motifs - **Botanical illustration (fairy variant):** Hand-drawn 1.5px line illustrations of fairy-flowers (foxglove, snapdragon, primrose, fritillary, columbine) in pollen cream on aubergine, framed within hand-drawn ribbons and curls. - **Particle effects (canvas-driven):** Three particle types drift across the viewport: petals (12-22px, slow falling), fireflies (3px chartreuse dots that pulse on/off over 4s cycles), pollen (1-2px cream specks drifting slowly upward). - **Fade-reveal entrance pattern:** Every section's content fades in via opacity 0 -> 1 over 1.2-1.6s with a slight 12px vertical translate. No bouncing, no overshoot -- just a gentle reveal. - **Hand-lettered annotations:** Caveat-font margin scribbles in pollen cream beside paragraphs: "i wrote this in march." "i was tired." "this part is true." - **Floating mushrooms:** Small hand-drawn mushroom-cap silhouettes scattered behind the letters with gentle bob (3px translateY over 5.6s). - **Hero gradient breathing:** The hero's dopamine gradient shifts its angle by ±8deg over 80s, suggesting the sky is slowly turning over. ## Prompts for Implementation The site is a private fairy clearing where the host writes letters. Build for slow contemplative reveal and atmospheric particles. - The hero gradient: `background: linear-gradient(135deg, #feeaa4 0%, #ff7a92 50%, #ff3aa6 100%);` with a CSS animation cycling the angle from 127 to 143 over 80s linear infinite. - Particle canvas: a fixed-position `` rendering all three particle types at devicePixelRatio. Each particle has its own velocity vector; updated each frame via rAF. Total particles capped at 80 to maintain 60fps. - Fade-reveal: each section element has `opacity: 0; transform: translateY(12px); transition: opacity 1.4s ease, transform 1.4s ease;`. On IntersectionObserver entry at threshold 0.2, add a class that resets to `opacity: 1; transform: translateY(0);`. - Wordmark per-letter tilt: wrap each letter in `` and apply `transform: rotate(var(--tilt))` where `--tilt` is a CSS variable set per letter with values -4deg, +2deg, -1deg, +3deg, etc. - Botanical illustrations: inline SVG with `stroke="#fff4d2" stroke-width="1.5" fill="none" stroke-linejoin="round";`. On hover, the stroke slowly transitions to `#ff7a92` over 600ms. - Reduced motion: particle canvas pauses; gradient angle locks; fade-reveal becomes instant. - AVOID match cards, swiping interfaces, signup banners, pricing tiers. Despite the .date TLD, this is not a dating product -- it is a one-way correspondence. There is exactly one mailto link in the closing letter. - Storytelling: hero introduces the fairyland; letters scroll past in patient sequence; the wish-tree gathers everything together; the closing letter invites the reader to write back. - Raw-authentic voice: "i don't know how to start letters." "this one is about the time the foxglove came up early." "i hope you don't mind that i'm honest." ## Uniqueness Notes **Differentiators from other designs:** 1. **Fairycore + dopamine-neon as a single visual register:** Fairycore is usually soft watercolor; dopamine-neon is usually flat candy. The combination -- hand-drawn fairy illustrations on dopamine-neon gradients -- is unique to this site. 2. **Raw-authentic tone inside a hero-dominant dopamine layout:** The opening visuals are punchy and saturated; the body voice is honest, halting, vulnerable. The contradiction is the site's structural argument. 3. **Particle-effect ecosystem with three coordinated particle types:** Most particle systems use one type. Here petals, fireflies, and pollen coexist with distinct physics and chromatic rules. 4. **Commissioner variable font with per-letter tilt in the wordmark:** The variable font is used precisely, but individual letters are tilted to suggest handwriting -- a tension between digital precision and analog warmth. 5. **No dating-app UI elements whatsoever:** Despite the .date TLD, there are no swiping, matching, profile cards, or signup forms. The "date" is reframed as one-way correspondence. **Chosen seed:** fairycore hero-dominant Commissioner dopamine-neon fade-reveal botanical-illustration particle-effects raw-authentic -- planned seed from assignment. **Frequency-aware choices:** `fairycore` (1%), `dopamine-neon`, `fade-reveal`, `botanical-illustration`, `particle-effects` are all uncommon. Avoids overused `playful`, `corporate`, and `photography`-only patterns. The combination of fairycore aesthetic with raw-authentic tone has no precedent.