# Design Language for hinagiku.date ## Aesthetics and Tone hinagiku.date is a **playful glitch-garden**: a calendar site that behaves like a faulty modem trying to print pressed flowers. The visual story is **whimsical-creative** -- a small, mischievous daisy spirit that lives inside an obsolete monitor and rearranges the user's day with delight. Inspiration sources: early-net BBS dingbat clipart, Carson Ellis's storybook illustrations, Hugo Pratt comic frames, late-90s tracker-music album art, and the grain you find on a 35mm photo of a daisy growing through a broken sidewalk. The page laughs at itself. Letters jitter, colors slip RGB channels, dust grain crawls across the surface, and small particles drift across the viewport like pollen carried on a glitched breeze. The tone is friendly to the point of conspiratorial -- it whispers "look at this," "watch this happen," "do you want today to be Saturday?" Despite the noise, the type discipline (F-pattern reading order, mono body) keeps the page legible: the chaos is decoration, not confusion. ## Layout Motifs and Structure A textbook **F-pattern** scan path that the user's eye actually obeys, with the chaotic visuals deliberately layered behind it so the structure shows through. - **Hero F-bar (78vh):** Across the top, a long horizontal bar (the top of the F) holds the wordmark "hinagiku.date" in 96px JetBrains Mono, glitch-animated (RGB channel split: red offset -3px, blue offset +3px, jitters every 4.2s). Beneath the bar, an oversized rotating today-date (e.g. "TUE 12 MAY") in clamp(120px, 18vw, 220px), occupying the left 60% of the viewport like the next stroke of the F. - **Index stub (60vh):** The shorter middle bar of the F. A horizontal row of seven days-of-week chips (each 110x46px) glitching softly, with the current day pulsing. Below it, a single descriptive sentence in mono italic running across 70% of the width. - **Long left-rail of entries (variable):** The vertical stem of the F. A scrollable column of dated entries, each a card 560px wide left-aligned. The right side of the viewport is mostly empty -- inviting the eye to scan the left edge. - **Particle field (full-bleed, behind content):** A canvas layer rendering ~140 daisy-petal particles drifting upward at gentle parabolic paths, occasionally glitching their position by ±6px in a single frame. - **Footer epigram (40vh):** A centered glitching monogram "h.date" beneath a one-line philosophical joke about time. Behind the F-pattern content, a noise-grain SVG `` filter overlays every section at opacity 0.12 to give the whole composition a film-grain skin. Cards do not have borders -- they are separated only by their negative space and the grain that surrounds them. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / body:** "JetBrains Mono" weight 800 for headlines at clamp(48px, 9vw, 220px), weight 500 for body at 15px / 1.65, weight 400 italic for asides. The monospace cadence reinforces the calendar-as-printout metaphor and the glitch character (digital, deliberate, slightly clinical). - **Numerals (dates, times):** "JetBrains Mono" weight 700 with tabular figures (tnum). Numbers occasionally swap glyphs to OpenType ss01 (slashed zero, dotted i) mid-animation. - **Accent / labels:** "JetBrains Mono" small caps weight 600. **Palette (gradient: a CSS multi-stop conic gradient is the literal background of the page):** - `#0e0c1a` -- pre-dawn ink (deepest base) - `#1b1430` -- sleeping plum (gradient stop) - `#37204e` -- electric heliotrope (gradient stop) - `#a93a8a` -- noon orchid (gradient stop, primary glitch hue) - `#f0a26a` -- copper sun (warm middle accent) - `#f7e889` -- daisy pollen (highlight) - `#e8f1d6` -- petal cream (foreground text on dark, body fill) The conic-gradient (from 220deg through these stops) rotates 360deg over 240s in the background. RGB-split glitches pull from `#ff3355` (red channel) and `#36c8ff` (blue channel) -- two anti-palette colors used only for the channel-split offset. ## Imagery and Motifs - **Grain-overlay film texture:** Every section sits beneath an SVG `` noise layer (frequency 0.9, octaves 2, opacity 0.12), animated subtly with `` on the seed attribute every 280ms to make the grain crawl. - **Particle-effect daisy petals:** Canvas-rendered 8-pointed petal sprites drift upward at speeds 12-40 px/s, with random horizontal sine sway. Occasional glitch-jumps (every 9-13s) snap one petal's position by ±6px for a single frame. - **Glitch-art typography accents:** Headline letters get duplicated red and blue copies offset diagonally, with a vertical 1-2px slice displacement on the duplicates. - **Pixel-flower dingbats:** Small 16x16 pixel daisy glyphs used as bullets, time markers, and section breaks -- in petal cream, with a 1-frame magenta flash on hover. - **Old monitor scanline:** A single horizontal 2px translucent white bar travels from top to bottom every 14s, simulating a CRT scan. - **Hand-stamped date stamps:** Each entry card carries a small rotated rectangular "stamp" (e.g. "2026-05-12") in monospace with a subtle ink-bleed shadow. ## Prompts for Implementation The whole site behaves like a friendly haunted journal: chaotic surface, surprisingly orderly underneath. Build it so the F-pattern remains scannable even with the grain layer at 12% and the particles in the background. - The conic-gradient background uses CSS custom properties for each stop and animates `--rotation` via `@property` registered angle with a 240s linear infinite cycle. Fall back to a static angle on unsupported browsers. - The RGB-split glitch uses three stacked `` copies of each headline: middle in petal cream, top-left red copy with `mix-blend-mode: screen` and `transform: translate(-3px, -1px)`, bottom-right blue copy with `transform: translate(3px, 1px)`. The displacement is animated with a 4.2s `steps(1)` keyframe that snaps to new offsets at irregular intervals (200ms, 700ms, 2.1s, 3.6s into the cycle). - The particle canvas is fixed-position behind content; its `` element renders at devicePixelRatio. Each petal is a single tiny SVG path rasterized once and reused. - Cards animate in via a single-step glitch on intersect: a 40ms scaleY(0.85) flash followed by a settle to 1, no easing -- intentionally crunchy. - All animations halt on `prefers-reduced-motion: reduce`. The conic-gradient locks; the particle canvas pauses; the channel-split offsets become 0. - Storytelling beats: The user lands; the date glitches into the present; the daisy spirit "introduces itself" via a typed mono line; each calendar entry is a tiny short story the spirit wrote about that day; the footer ends with the spirit promising to return tomorrow. - AVOID CTA banners, pricing tables, stat-counters, signup modals. The site does not collect data; it tells the day's story. - Microcopy voice: short, mono-cadenced, sometimes ALL CAPS for one-word emphasis, with occasional `[redacted]` blocks rendered as black bars over text. ## Uniqueness Notes **Differentiators from other designs:** 1. **Glitch as decoration over a strict F-pattern:** Most playful/glitch sites abandon legibility. Here, the F-pattern reading order is enforced by content placement and respected by the eye, while the glitch lives purely in the visual surface -- structure remains lawful. 2. **JetBrains Mono carries display, body, and italic:** A single monospace family does the entire typographic load at extreme size variance (15px to 220px), unusual for sites that adopt mono for "UI accents only." 3. **Conic-gradient as the literal background:** A 240s rotating conic gradient through six stops -- this is the canvas, not a hero accent. Most "gradient palette" sites apply gradients to objects; here the page itself is the gradient. 4. **Two anti-palette colors reserved exclusively for the channel-split:** `#ff3355` and `#36c8ff` never appear anywhere except as glitch offsets, giving the glitch a chromatic signature distinct from the warm-purple base palette. 5. **The "daisy spirit" narrator:** A whimsical first-person voice that addresses the user directly throughout, turning a calendar into a tiny diary written by a friendly bug. **Chosen seed:** playful F-pattern mono gradient glitch grain-overlay particle whimsical-creative -- planned seed from assignment. **Frequency-aware choices:** Embraces underused `glitch` (8%) and `playful` (27%) carefully -- playful is overused so the design deliberately undercuts it with mono discipline. `F-pattern` layout, `grain-overlay` imagery, `particle-effects`, and `gradient` palette are all uncommon. Avoids overused `photography` imagery completely and never uses the common Inter / Space Grotesk pairing.