# Design Language for tsundere.today ## Aesthetics and Tone tsundere.today is a **daily zen prism** -- a single page that resets at local midnight to surface one new crystalline shard for the day. The mood is **energetic-zen**, a deliberate productive contradiction: the pastel calm of a Kyoto tea garden at first light *combined with* the upward springing pulse of a struck tuning fork. Where most "today" or "daily" sites lean either toward newsfeed urgency (red badges, ticker tape) or yoga-app placidity (muted sage, slow fades), this page commits to neither. It is **alert without anxiety**, **bright without loud**. The tsundere voice here is the friend who insists they were not waiting for you ("oh, *today*? I hadn't even noticed it was today"), but who has clearly polished one small gem just for the date you arrived on. Every visit on a different calendar day yields a different crystal, a different palette pull, a different arrangement -- but always the same single object, centered, breathing. Visitors who return at 23:59 and again at 00:01 should witness the slow, audible chime of the crystal rotating to its next facet. Inspirations: 1960s Karuizawa stationery boxes; Yves Klein's empty rooms; the moment a glassblower pulls a goblet stem; the deliberate negative space of Aesop product photography; the Today screen of an old PalmOS handheld; a single bonsai shoot uncurling. **Not** Apple-clean, **not** Studio Ghibli-soft -- closer to a Kanazawa craft museum vitrine: lit from below, on a cream linen platform, asking you to slow down and notice. ## Layout Motifs and Structure **Strict centered single-column composition with a five-layer parallax depth field.** The layout is centered (the most common pattern in the portfolio at 66%), but rescued from genericity by treating "centered" as a vertical *axis of light* rather than a column of stacked cards. Every element threads through one invisible vertical line at viewport center; horizontal extent is constrained to a maximum of `min(46rem, 78vw)`; **no element ever exceeds this band**. The page reads as a slow vertical pull through five parallax planes, each plane drifting at a different rate as the visitor scrolls. **The five planes (back to front):** 1. **Distant cream wash (z=-1000, parallax 0.05x):** Body background -- a single soft `radial-gradient` pinned to viewport, almost imperceptibly drifting. Color: `#F4ECDB`. 2. **Crystalline lattice (z=-600, parallax 0.18x):** A hand-drawn SVG of forty interconnected line-art crystal shapes (no fills, only 0.5px hairlines in `#D9C9A8`), tiled vertically. Drifts upward as you scroll downward, very slow. 3. **Pastel halation (z=-200, parallax 0.42x):** Three large, soft, blurred ellipses (`filter: blur(80px)`) in pale rose `#F6D9D1`, butter `#F2E0A6`, mint `#CFE5D6` -- positioned offset from the central axis. They scroll faster than the lattice and create gentle color washes behind the foreground. 4. **The Today crystal (z=0, parallax 1.0x):** The one and only foreground content object, anchored at `50vh`, dead-centered horizontally. It moves with the page at native scroll speed, sized to `clamp(280px, 38vw, 520px)`. 5. **Foil (z=+200, parallax 1.35x):** A single thin diagonal sliver of metallic gold `#C8A961` -- scrolls *faster* than the crystal, drifting from upper-right to lower-left across viewport, evoking a beam of leaf-foil catching the crystal as you move. **Vertical procession:** the page scrolls through exactly six **viewport-height sections**, each centered, each a single sentence or small composition: (1) the date, (2) a one-line greeting, (3) the crystal, (4) the day's haiku, (5) the day's small quiet challenge, (6) the colophon and rotation timer. Between sections, **never a divider line, never a card boundary** -- only the parallax motion of the lattice and halation tells you a new section has arrived. The crystal in section 3 is the spatial anchor of the entire page. Above it: only typography in centered prose, max 22 characters per line. Below it: the same. This produces an extremely vertical, hourglass-narrow reading experience, deliberately resistant to the wide-grid card layouts dominant in the codebase. ## Typography and Palette **Typography (elegant-serif, 3% prevalence -- one of the rarer choices):** - **Display / The Date / The Crystal Caption:** **"Cormorant Garamond"** (Google Fonts), weight 300, italic, letter-spacing `-0.012em`, set at `clamp(2.6rem, 6.4vw, 5.4rem)`. The high-contrast strokes and ball-terminals carry the "elegant" register. Used only three times on the page: today's date, the crystal's facet name, the colophon. - **Sub-display:** **"Cormorant Garamond"** weight 500 (not italic), set at `clamp(1.4rem, 2.6vw, 2.2rem)`, line-height 1.32. Reserved for the day's one-sentence greeting and the haiku. - **Body:** **"EB Garamond"** (Google Fonts) weight 400, set at `clamp(1.0625rem, 1.4vw, 1.1875rem)`, line-height 1.78, max-width 22ch. The slightly warmer Garamond cut beneath the colder Cormorant display creates a two-tier serif hierarchy without ever leaving the family lineage. - **Caption / Timestamp / Colophon:** **"Cormorant Garamond"** weight 400 italic, `0.875rem`, letter-spacing `+0.06em`, set in small-caps via `font-feature-settings: "smcp"`. **Hard rule:** no sans-serif anywhere on the page. No mono. No handwritten. The portfolio is 79% mono and 22% humanist -- this page commits absolutely to a single elegant-serif lineage. **Palette (creamy-pastel, 1% prevalence):** - `#F4ECDB` -- **Cream linen** (page background, dominant) - `#EFE3C9` -- **Aged paper** (next-tier surface, used for the crystal's pedestal aura) - `#F6D9D1` -- **Blush quartz** (one of three halation washes) - `#F2E0A6` -- **Butter citrine** (halation wash; also the daily greeting color) - `#CFE5D6` -- **Pale jade** (halation wash) - `#D9C9A8` -- **Lattice ochre** (the crystalline line-art layer, hairline-only) - `#C8A961` -- **Leaf-foil gold** (the single metallic accent, used for the parallax sliver and the rotation timer ring) - `#3A2E1F` -- **Walnut ink** (all body type, never pure black -- pure black is forbidden on this page) The palette drifts daily: the seed for "today" deterministically rotates the three halation hues through a 365-day pastel wheel, so visiting on May 10 vs. May 11 yields a perceptibly but subtly different bloom of color. The cream and walnut anchors never change. ## Imagery and Motifs **The Crystal (custom-illustration, 1% prevalence):** the singular hero of the page is a **hand-drawn SVG crystal**, never a photograph, never a 3D render, never a stock vector. It is built from 9 to 14 polygonal facets with sub-pixel hairline edges (`stroke: #3A2E1F; stroke-width: 0.4; fill: none`), then internally washed with three semi-transparent fills picked from the day's palette. **No drop shadow**, no glow -- the crystal sits in space because the parallax behind it gives it depth, not because we faked depth on the asset. There are 365 distinct crystal SVGs in the asset bundle, one per day of the year; each is genuinely different in geometry and facet count. **Crystalline lattice:** the back-plane lattice (mentioned above) is a tessellation of forty smaller crystal silhouettes connected by hairlines, drawn by hand and exported as a single tiling SVG. It is **never animated translationally on its own** -- it only moves through the parallax bind. Inside each lattice cell, a single dot pulses on a 4-second sine, opacity 0 to 0.35, staggered by cell index modulo 7 -- this is the page's only "energetic" motion at rest, a slow soft heartbeat across the back wall. **Halation washes:** three large blurred ellipses, never sharp-edged, always set to `mix-blend-mode: multiply` against the cream ground. They scroll at 0.42x and **rotate** at 0.0008 radians per frame -- imperceptibly slow, but enough that returning visitors after several minutes sense the room has shifted. **The Foil sliver:** a single diagonal gold streak, 1px wide, 28vh long, semi-transparent (`opacity: 0.55`), drifting from upper-right to lower-left at parallax 1.35x. It crosses the crystal exactly once per scroll-pass and never crosses any text. This is the entire page's only metallic note. **No icons. No buttons that look like buttons. No avatars, no logos, no brand chrome.** The wordmark "tsundere.today" appears once, in the colophon, in small-caps Cormorant italic, almost the same color as the page. The page is allergic to iconography. ## Prompts for Implementation This page is a **scroll-driven daily ritual**, not an information dashboard. Build it accordingly: - **Single HTML page**, six full-viewport sections (`100svh` each), centered. No nav, no header, no footer chrome. The first paint should show only `#F4ECDB`, the date in Cormorant italic, and the lattice already drifting. - **Parallax via `transform: translate3d`** on five layered absolutely-positioned containers, driven by a single `requestAnimationFrame` loop reading `window.scrollY`. Use `will-change: transform` on each layer. Do **not** use `background-attachment: fixed` -- parallax must be performant and respond to inertia scrolling. - **Crystal selection is deterministic from the local date.** On page load, compute `dayOfYear = (date - jan1) / 86400000 | 0`, then `fetch(\`/crystals/\${dayOfYear}.svg\`)` and inline-mount its DOM into section 3. The 365 crystals must ship as static SVGs in the bundle; no server-side selection. - **Daily palette rotation:** the three halation hue values are derived as `hsl((dayOfYear * 7) % 360, 38%, 86%)` at three offsets (0deg, 122deg, 246deg). Cache the computed values in `localStorage` under the date key so a within-day refresh keeps identical color. - **The countdown ring:** the colophon (section 6) contains a thin gold ring (`stroke-dasharray` animated) around the rotation timer -- it depletes over the day from 100% to 0%, recomputed every minute, and at midnight it chimes (`