# Design Language for hinagiku.date > *Hinagiku* (雛菊) is the Japanese word for daisy — the small, sun-following flower that opens at dawn and closes at dusk. This site treats a "date" not as a transaction on a dating app, but as a single luminous day spent with someone: a morning meadow, a slow afternoon, a dusk that refuses to end. The aesthetic fuses an iridescent, refraction-soaked **holographic** surface treatment with a deeply **pastoral-romantic** mood — pressed-flower nostalgia rendered through a thin film of soap-bubble light. Everything is delivered as one long unbroken **immersive scroll**, a downhill walk through a countryside afternoon that you fall into rather than navigate. ## Aesthetics and Tone The governing image: a pressed daisy sealed under a sheet of holographic foil. Warm, dusty, hand-bound-journal warmth underneath; cool prismatic shimmer skating across the top whenever the page moves. Think of light hitting an old CD left in a hayfield, or the inside of an abalone shell pressed against linen. - **Mood:** unhurried, tender, faintly melancholic — a love letter written in the last hour of daylight. Not "swipe culture." Closer to a hand-typed letter slipped between book pages. - **Holographic layer:** restrained and *physical*, never RGB-vomit. Iridescence appears as: a faint diagonal sheen that travels across headlines as you scroll; thin foil-edge highlights on cards (a 1px conic-gradient border that slowly rotates hue); a soft prismatic bloom behind hero type; a "holo-flicker" on hover that fans subtle cyan→magenta→gold across an element's surface like tilting a trading card. - **Pastoral substrate:** warm cream paper, ghost-impressions of pressed petals, faint horizon lines, the suggestion of long grass at the very bottom of certain panels. The romance is in the *restraint* — lots of breathing room, slow fades, a single daisy doing the emotional work of a whole illustration. - **Tech motif, quietly:** because the holo film is fundamentally a *manufactured* shimmer, there's a whisper of "tech" underneath — a monospaced caption here, a faint baseline grid that resolves out of the cream like a contact sheet, a cursor-trailing line of pixel-sparkle. It reads as *artisanal lab*, like someone laminating wildflowers in a clean room. Never circuit-boards, never neon HUDs. ## Layout Motifs and Structure A single vertical **immersive scroll** — no traditional nav bar competing for attention. The page is structured as **seven "hours" of one day**, each a near-full-viewport panel that the visitor descends through like sunlight moving across a field. - **Spine, not grid:** a thin vertical hairline runs down roughly the left-third of the page — the "stem" — with each hour's content blooming off it asymmetrically (text left of the stem in one hour, a holo-card right of it the next), so the eye zig-zags gently downhill. The stem itself has a slow-traveling iridescent gradient flowing through it like sap. - **The seven hours:** 1. **Dawn / Cover** — oversized typewriter headline assembling letter-by-letter over a cream void; one daisy, dew-lit, with a holographic dewdrop catching prismatic light; a single line of monospaced subtext typed beneath it. 2. **Morning / The Meeting** — short prose block (left of stem) about beginnings, a holo-foil "polaroid" of a meadow tilting on scroll (right of stem). 3. **Late Morning / Letters** — a "pressed letter" panel: a sheet of cream paper with handwritten-style fragments, the page-edge catching foil shimmer; words reveal as you scroll like ink drying. 4. **Noon / Full Light** — the brightest panel: white-cream wash, the holographic bloom at its widest, a field of small daisies scattered as faint geometric line-glyphs. 5. **Afternoon / Stillness** — the most negative-space-heavy panel; a long quiet caption set in tech-mono, a single iridescent horizon line, room to breathe. 6. **Golden Hour / Closeness** — warmth peaks: deep burgundy ink on cream, foil edges glowing amber-magenta, two daisies leaning together. 7. **Dusk / The Long Goodbye** — color cools and dims toward burgundy-shadow; the typewriter headline *un-types* one phrase and re-types another; the stem's iridescence slows to a stop; a final monospaced sign-off; a faint silhouette of grass along the bottom edge. - **No CTA blocks, no pricing, no stat-grids, no card walls.** The only "interactive" affordances are the scroll itself, hover-holo-flickers, and one quiet anchor at the very bottom (a daisy that, clicked, scrolls you gently back to dawn). - **Composition rules:** generous outer margins (cream "deckle" border framing the whole experience like a pressed-flower frame); content max-width ~62ch for prose; headlines allowed to bleed wide. Vertical rhythm is *long* — let each hour own its space. ## Typography and Palette **Typography** (all Google Fonts): - **Display / headlines:** **"Special Elite"** — a worn typewriter face; perfect for the letter-by-letter typewriter-effect. Used at large sizes for each hour's title. - **Body / prose:** **"Cormorant Garamond"** (light & regular, with italic) — a high-contrast, romantic serif; carries the pastoral love-letter warmth. Generous line-height (~1.8). - **Captions / labels / "tech" whispers:** **"Space Mono"** — used small, uppercase-tracked-out for timestamps ("06:14 — DAWN"), figure captions, and the dusk sign-off. This is the quiet tech-mono undertone. - **Accent handwriting (sparingly):** **"Caveat"** — only for a few "margin note" fragments in the Letters panel, as if pencilled beside the type. Letter-spacing: tight on the serif headlines, airy on the mono labels. Never bold the serif into a slab — keep it delicate. **Palette** (burgundy-cream core, holographic accents): - `#FBF6EC` — **Daisy Cream** — primary background; warm pressed-paper base. - `#F3E9D6` — **Field Linen** — secondary panel wash / deckle border. - `#5C1A2B` — **Deep Burgundy** — primary ink for headlines & emphasis; the romantic anchor. - `#8E3B4E` — **Dried Rose** — secondary text, soft burgundy for body emphasis & the stem base color. - `#3A2A2E` — **Ink Umber** — near-black warm brown for long-form body copy (never pure #000). - `#D9B36A` — **Petal Gold** — golden-hour glow accent, foil-edge warm pole. - Holographic gradient stops (used in conic/linear sheens, foil borders, dewdrop, bloom): - `#A8E6E2` — **Holo Mint** - `#C9B8F0` — **Holo Lilac** - `#F6C6D9` — **Holo Petal-Pink** - `#EFD9A8` — **Holo Champagne** These four cycle (mint → lilac → pink → champagne → back) at low opacity (12–28%) over the cream — iridescence as a *tint*, never a fill. Contrast pairing always: warm dark ink (`#5C1A2B` / `#3A2A2E`) on cream (`#FBF6EC`), with holo tints layered above the type via `mix-blend-mode: soft-light` so they shimmer *through* the letters rather than obscuring them. ## Imagery and Motifs - **The daisy** — the single recurring hero element. Rendered as a clean **geometric-abstract** line construction (a small ring of overlapping ellipse-petals around a stippled dot center), never a photo, never cutesy clip-art. It appears once per hour, in different states: dew-lit, fully open at noon, leaning at golden hour, half-closed at dusk. - **Pressed-petal ghosts** — extremely faint (4–8% opacity) scatter of petal silhouettes and stem-lines bleeding off panel edges, like impressions left in a journal. - **Holographic foil treatments:** - **Foil-edge cards** — "polaroid"/"letter" panels with a 1.5px conic-gradient border (the 4 holo stops) whose start-angle slowly rotates; the card itself is plain cream. - **The dewdrop** — a single small circle on the dawn daisy with a radial holo-gradient highlight; catches a brighter prismatic glint on cursor-proximity. - **Prismatic bloom** — a large, very soft blurred radial gradient (holo stops, low opacity) sitting behind hero headlines; drifts slowly. - **Sheen sweep** — a thin diagonal band of holo gradient that travels left→right across each hour's headline as it scrolls into the viewport (a `background-position` animation through the text via `background-clip: text`). - **The stem hairline** — 1px vertical line, ~33% from left, with an animated iridescent gradient flowing downward through it; thickens slightly and brightens at each hour's anchor point. - **Contact-sheet grid** — in the Noon panel only, a faint baseline grid (cream-on-cream, ~6% contrast) resolves into visibility — the lone overt "tech" texture, like a photographer's proof sheet under all the warmth. - **Grass silhouette** — at the very bottom of the Dusk panel, a low band of simple vector grass blades in `#3A2A2E` at ~20% opacity, gently swaying. - **Pixel-sparkle cursor trail** — a sparse trail of 2–3px iridescent squares following the cursor at low opacity, fading fast — the tech-craft fingerprint. ## Prompts for Implementation - **Build it as one long scrolling story, not a page of sections.** No sticky header, no hamburger, no footer-with-links. The "navigation" is gravity. Sole structural chrome: a slim cream deckle border framing everything, and a small daisy "return to dawn" anchor at the absolute bottom. - **Typewriter-effect is the signature interaction.** On load, the Dawn headline types itself out character-by-character in "Special Elite" with a blinking block caret; the monospaced subtext types after it. At the Dusk panel, trigger an *un-type* (backspace animation) of one phrase followed by re-typing a closing phrase. Respect a slow, human, slightly-uneven keystroke cadence (jitter the interval ±40ms). If `prefers-reduced-motion`, render the final text immediately with a single fade. - **Holographic shimmer = CSS, layered, low-opacity, blend-mode-driven.** Use `background-clip: text` + animated `background-position` for the headline sheen sweep; `conic-gradient` borders with an animated `--angle` custom property (via `@property`) for foil card edges; large blurred `radial-gradient` divs with slow `transform: translate/rotate` for the prismatic bloom; `mix-blend-mode: soft-light` / `overlay` so iridescence sits *over* the cream-and-burgundy without ever turning the page neon. Keep the cream and burgundy clearly dominant — the holo is seasoning. - **Scroll choreography:** as each "hour" enters the viewport, fade + slight upward drift its prose (stagger child lines ~80ms apart, ease-out), tilt the holo polaroid/letter cards a few degrees based on scroll position, advance the daisy's "state," and brighten the stem node. Use `IntersectionObserver`; keep easing slow and gentle (600–1000ms). Subtle parallax on the pressed-petal ghost layer (move slower than scroll). - **Color journey through the day:** programmatically warm the background tint from cool-cream at Dawn → bright white-cream at Noon → amber-tinged at Golden Hour → burgundy-dimmed at Dusk, by interpolating a CSS variable as the user scrolls. Holo accent opacity peaks at Noon, warms toward gold at Golden Hour, and desaturates/slows at Dusk. - **The daisy** must be hand-built SVG (geometric line petals, stippled center) — animate petal-open/close and lean via `transform` and `stroke-dashoffset` path-draw on first reveal. - **Cursor trail:** sparse iridescent pixel squares, `requestAnimationFrame`, low opacity, quick fade — disable entirely under reduced-motion and on touch. - **Tone of any copy:** write it like fragments of a love letter about one perfect day — short, present-tense, tender, a little wistful. Monospaced bits are timestamps and quiet asides. **Never** marketing copy. **No** CTAs, pricing tables, feature grids, testimonials, or stat counters. - **Performance/accessibility concerns are out of scope** — prioritize the visual poetry. ## Uniqueness Notes Differentiators from other designs in the set: 1. **"Pressed daisy under holographic foil"** is the singular controlling metaphor — iridescence rendered as a *thin physical film over warm pressed-paper*, using `soft-light` blend modes so the holo shimmers *through* burgundy serif type rather than as glowing neon. Most holographic designs go chrome/Y2K/dark-neon; this one is warm, papery, and melancholic — holographic *cottagecore*, essentially. 2. **Structure = seven "hours" of one day**, a downhill immersive scroll with a single iridescent "stem" hairline as its spine and a daisy that physically changes state (dew → open → leaning → half-closed) at each stage. No nav, no sections-as-blocks — a continuous narrative descent through an afternoon. 3. **Typewriter-effect carries narrative weight** — not a gimmick header but the open *and* close: text types in at Dawn and *un-types/re-types* at Dusk, with a worn "Special Elite" face, so the love-letter conceit is literally enacted. 4. **The "tech" motif is deliberately submerged** — appears only as a Space Mono caption voice, a faint cream-on-cream contact-sheet grid that surfaces at Noon, and a pixel-sparkle cursor trail. "Tech" here means *the craft of laminating wildflowers in a clean room*, not circuitry — an unusual reading of that motif. 5. **Palette is genuinely burgundy-cream-led** (`#5C1A2B`, `#FBF6EC`, `#F3E9D6`, `#3A2A2E`) with holographic accents kept at 12–28% opacity — the iridescence never becomes the color story, it just *plays across* a warm romantic base. Chosen seed/style (from assignment): **aesthetic: holographic, layout: immersive-scroll, typography: tech-mono, palette: burgundy-cream, patterns: typewriter-effect, imagery: geometric-abstract, motifs: tech, tone: pastoral-romantic**. Avoided patterns from frequency analysis: steered clear of the near-ubiquitous **hand-drawn** aesthetic (96%), **glassmorphism** (66%), **photography** imagery (99%), **card-grid / full-bleed / centered** layouts (86/94/83%), and the over-relied-on **parallax / cursor-follow / spring / stagger / magnetic** pattern stack — here parallax is a faint petal-ghost layer only, and the headline interactions lean on `background-clip: text` sheen sweeps, `@property` conic-gradient foil borders, and the typewriter-effect (10%) instead. Leaned into the *less-used* members of the assigned seed: immersive-scroll (7%), burgundy-cream (3%), geometric-abstract (6%), tech-mono (10%).