# Design Language for tsundere.xyz ## Aesthetics and Tone tsundere.xyz is an **abyssal art-deco observatory** — imagine the lobby of the 1929 Chrysler Building submerged six kilometers beneath the Norwegian Sea, its brass chevrons and sunburst inlays now coated in cold-current bioluminescence, the upper viewport perpetually ribboned by an aurora that is not in the sky but rippling across the underside of pack ice three kilometers above. The aesthetic fuses **art-deco** geometry (the high-waisted proscenium, the stepped ziggurat, the radial fan) with **futuristic-cutting-edge** rendering technique (CSS Houdini paint worklets, view-transition API choreography, OKLCH color space, GPU-shaded SDF ripples) — the past architecture is the chassis, the cutting-edge runtime is the lighting rig. The tone is **cold, luminous, and quietly brilliant** — not friendly, not chatty, never warm. tsundere here is the literal Japanese reading: a polished outer shell that seems aloof but reveals depth on inspection. The xyz TLD signals "the unknown variable, the experimental coordinate" — so this site reads as an *observation post* logged by an unnamed researcher recording aurora-ripple events at six fathoms. Inspirations: René Lalique's frosted glass panels, the opening titles of *Annihilation* (2018) where the iridescent shimmer crawls across surfaces, the 1933 Cunard Queen Mary first-class smoking room, Alexander Calder's stabiles, and Studio Drift's *Meadow* installation. There is no mascot. There is no chibi. There is no pink. There is only the cold blue-violet of deep water, the thin amber of polished brass observed by a single luminaire, and the slow vertical descent of aurora-light through saltwater. ## Layout Motifs and Structure **Asymmetric salon-tableau, not grid, not card stack, not centered hero.** The page is a single full-bleed continuous canvas (`min-height: 100vh` per scene, no outer margin, no max-width container) divided into four asymmetric **observation tableaux**, each laid out by an offset CSS Grid where the leading column is `1.618fr` and the trailing column is `1fr` — but every other tableau *flips* the ratio so the heavy column alternates left/right down the scroll. No section is mirror-symmetric; no tableau uses 50/50. - **Tableau I — Submersion:** Full viewport. The domain wordmark sits **at the lower-left third** (offset from any visual center) above a hand-drawn deco fan motif rendered in inline SVG. The right two-thirds is empty water, traversed only by the aurora-ribbon (described below) drifting down-right at 3deg from vertical. - **Tableau II — Manifest:** The heavy column is now on the right, holding a numbered ledger of "observed properties" of tsundere.xyz set in serif-revival display type. The light column on the left is a vertical strip of inline SVG ripple-rings that pulse outward when intersected. - **Tableau III — The Instrument:** Heavy column flips back left. A large inline SVG of a stylized bathysphere viewport rendered as an art-deco octagon with stepped chevron inlays inside its frame; through it, the aurora-mesh shader is visible. Right column: a quiet column of caption text. - **Tableau IV — Telegraph:** Heavy column right. A serif-revival closing pull-quote, set ragged-left, breaking against the aurora-ribbon as the ribbon exits the bottom-right of the viewport. **Asymmetry rules (load-bearing):** No element is allowed to land on the central vertical axis. Every text block has a deliberate offset of `clamp(2vw, 6vw, 9vw)` from one edge. CSS `text-align: center` is forbidden in this design. Vertical rhythm is governed by a Fibonacci spacing scale (`8px, 13px, 21px, 34px, 55px, 89px, 144px`) — never a uniform 16px multiple. **Scroll behavior:** `scroll-snap-type: y proximity` (not mandatory — proximity allows the asymmetric tableaux to hold partial overlap, which mandatory snapping would erase). The aurora-ribbon SVG is `position: fixed` with a slow GSAP-free CSS scroll-driven animation (`animation-timeline: scroll(root block)`) translating it down-and-right across the entire scroll length, so it threads through all four tableaux as one continuous gesture. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / Tableau Titles:** "Italiana" (Google Fonts) — a serif-revival face with ultra-high contrast and elongated ascenders that read as deco when uppercased and letter-spaced. Weight 400 at `clamp(2.8rem, 8.5vw, 7rem)`, `letter-spacing: 0.14em`, `text-transform: uppercase`. Used only for the four tableau headings and the wordmark. - **Sub-display / Numerals & Pull-quotes:** "Cormorant Garamond" (Google Fonts), weight 300 italic, at `clamp(1.4rem, 2.6vw, 2.2rem)`. Used for Tableau II's ledger numbers (set as old-style figures via `font-variant-numeric: oldstyle-nums`) and for the closing telegraph quote in Tableau IV. - **Body / Captions:** "Cormorant Garamond" weight 400 roman at `1.05rem / 1.7`. The body is intentionally serif — sans-serif body would break the serif-revival commitment. - **Instrumentation / Coordinates:** "DM Mono" (Google Fonts) at `0.78rem`, `letter-spacing: 0.18em`, uppercase, used only for the four small site-corner data readouts (depth, bearing, log-time, observer-id). **Palette — "ocean-deep with aurora overlay" (OKLCH-derived, written as hex for compatibility):** - `#03101F` — abyssal black-blue (page base) - `#0A2238` — ocean-deep mid (gradient mid-stop) - `#143959` — submerged steel (panel washes) - `#2C7A8C` — aurora-cyan (primary aurora hue) - `#4FB3A9` — aurora-mint (secondary aurora hue) - `#9D6FE0` — aurora-violet (rare accent, for the ripple peak only) - `#C9A35B` — brass (deco hardware, used sparingly, never on body text) - `#E8DDC1` — ivory (display type only) The aurora hues are deployed as a **gradient-mesh** rendered via CSS Houdini `paint()` worklet (with a static SVG fallback), generating four moving radial gradients in OKLCH whose centers drift along Lissajous paths. Brass `#C9A35B` is reserved exclusively for stroke lines on inline SVG ornament — it never appears as a fill, never as a text color. Body text is always `#E8DDC1` on `#03101F` (contrast ratio 13.9:1). ## Imagery and Motifs **No photography. No stock illustration. No mascot.** Every visual is hand-authored inline SVG or shader-generated. 1. **The Aurora-Ribbon (signature element).** A single 12,000-px-tall SVG path traverses the entire scroll length, fixed to the right-of-center vertical line. It is rendered as a 200px-wide ribbon with `fill: url(#aurora-mesh-gradient)` referencing an SVG `` that animates through `#2C7A8C → #4FB3A9 → #9D6FE0 → #2C7A8C` over 22 seconds. The ribbon itself slowly translates Y on scroll-driven animation. Its edges are softened by a `feTurbulence + feDisplacementMap` SVG filter that gives it a **ripple** shimmer, never CSS `blur()` (which would flatten it). 2. **Ripple-rings (Tableau II).** Six concentric circles, stroked in `#C9A35B` brass at varying stroke-widths (0.5px to 2.5px, art-deco ornament principle). When the tableau enters the viewport, each ring expands outward with `stroke-dashoffset` and `r` animations on staggered 180ms delays, like a single drop hitting still water. After the initial ripple, the rings hold and emit a slow 8-second pulse. 3. **The Bathysphere Octagon (Tableau III).** A custom inline SVG, ~800 lines of `` markup, depicting a 1930s deco viewport: octagonal outer frame with eight stepped-chevron inlays at the corners (classic Chrysler-Building motif), brass rivets at each chevron junction, and a circular inner viewport whose fill is the live aurora-mesh shader. Inside the viewport, three small fish silhouettes drift across at different rates (parallax-like, but driven by `scroll-driven animation` not `transform: translate3d` parallax — this is the cutting-edge technique). 4. **Deco Fan (Tableau I).** Below the wordmark, a 21-rib radial sunburst fan in `#143959` fill with `#C9A35B` 0.8px stroke. Each rib is a separate `` with a `:nth-child` animation-delay so on first paint the fan unfolds left-to-right over 1.4 seconds. 5. **Gradient-mesh background washes.** Each tableau's empty column carries a low-opacity (0.18) gradient-mesh wash placed via the Houdini paint worklet. These washes never use the violet hue — only cyan and mint — so the violet remains a one-time-only Tableau II ripple peak. 6. **Site-corner instruments.** Four tiny fixed-position readouts at the four screen corners in DM Mono: top-left `DEPTH 5,924m`, top-right `BRG 287°`, bottom-left `2026-05-10T LOG-04:18Z`, bottom-right `OBS XYZ-tsundere`. These never animate; they are the cold instrumentation frame around the warm content. ## Prompts for Implementation Build `index.html` as a **single static document** with embedded `