# Design Language for tsundere.racing ## Aesthetics and Tone A vaporwave race-control room booting up in chrome-pink twilight. The page is a modular blocks dashboard, but the blocks are not Bento — they are sci-fi heads-up-display panes that hover over a duotone twilight sky, each pane stuttering into existence in staggered bursts like a fighter-jet HUD cold-starting. The aesthetic merges late-80s Japanese race-game arcade aesthetics (OutRun, Power Drift), the chrome-on-magenta of Hiroshi Nagai's resort posters, the curved organic blobs of Wipeout HD's UI, and the dot-matrix racing telemetry of vintage Sega motorsport panels. Energetic in tone: the page reads like a pre-race readiness drill — short, declarative, urgent, but stylized, never frantic. The voice barks in short statements. "Telemetry hot. Curves loaded. Open the throttle." Each block is a callout, not a paragraph. ## Layout Motifs and Structure Modular-blocks layout: 12 HUD panes arranged on an asymmetric 6×6 grid, each pane occupying 1×1 to 3×2 cells. Panes have rounded corners with a single cut-corner (top-right or bottom-left clipped at 24px, like a sci-fi badge). Each pane includes: - A pane-header strip with a 4-digit code ("PNE 0142") and a magenta/cyan duotone indicator dot. - A central content zone: organic blob graphic, telemetry chart, marquee text, or rotating wheel diagram. - A pane-footer strip with a 1px chromatic line and a tiny ALL-CAPS label. The grid does not snap statically; on page load, panes stagger-enter in a precomputed sequence: pane 1 at 80ms, pane 2 at 220ms, pane 3 at 380ms, etc., each sliding in from a random off-screen vector and settling with a 1.04 → 1.00 scale ease-out. The stagger creates a "race-start" feeling. A constant 4px Magenta-to-Cyan chromatic top-bar runs across the top of the viewport, animating its gradient stops at 0.6Hz — the "vapor-band" header. Below it, a thin TELEMETRY ribbon scrolls horizontal text ("LAP 03 · COND CLEAR · LUMA 88% ·"). The footer is a single oversized blob-shaped pane containing a slowly rotating chrome wheel SVG and a marquee block of copy. ## Typography and Palette - **Display headlines:** "Big Shoulders Display" (Google Fonts), weight 800 — display-bold compressed sans for pane titles at 38-64px, ALL CAPS, letter-spacing -0.01em. - **Sub-display:** "Big Shoulders Inline Display" (Google Fonts), weight 700 — for stutter-glitched secondary heads, 24-32px. - **Body / telemetry copy:** "Space Grotesk" (Google Fonts), weight 500 — at 15px line-height 1.5 for HUD descriptive copy. - **HUD codes / numerals:** "Major Mono Display" (Google Fonts), weight 400 — for pane codes, telemetry digits, and label strips. Palette — Duotone vaporwave HUD (Magenta + Cyan): - `#0A0220` Race Void — deepest twilight background. - `#1A0942` Indigo Sky — gradient mid-stop for the twilight backdrop. - `#FF2EA8` Vapor Magenta — primary duotone hue: pane edges, headline strokes, glow. - `#22F0FF` Chrome Cyan — secondary duotone hue: pane interior accents, telemetry charts. - `#F9D7E8` Pearl Mist — paper/text contrast color for HUD body copy on dark surfaces. - `#FFB94A` Caution Amber — micro-warning accent reserved for one alert pane per fold. Duotone discipline: every photographic or illustrative asset is rendered Magenta-on-Cyan or Cyan-on-Magenta. No third-color photographs allowed. ## Imagery and Motifs - **Organic-blobs imagery**: large blobby silhouettes hover behind certain panes — chrome-rendered amorphous shapes (SVG paths with 4-7 anchor points and smooth curves) filled with Magenta-to-Cyan radial gradients. Each blob slowly morphs its path over 9s by interpolating between 4 precomputed silhouettes. - **Sci-fi-hud motifs**: every pane carries HUD chrome — corner brackets, tick-mark scales, circular radar indicators, octagonal status badges, dotted matrix rails. Drawn as crisp 1px SVG strokes in Cyan and Magenta. - **Telemetry charts**: small line-graphs in panes drawn as SVG polylines with Cyan glow filter; data is procedurally generated sine + perlin noise. - **Chromatic ribbons**: thin 2px ribbons stretching diagonally across the void, each carrying a chromatic aberration (Magenta+Cyan split offset 2px). Ribbons drift slowly to keep the void alive. - **Twilight grid floor**: a single perspective-warped grid (CSS `transform-style: preserve-3d` + perspective: 800px) anchored at the bottom of the viewport, suggesting a vaporwave horizon line. The grid pulses at 1Hz with a subtle Cyan glow. ## Prompts for Implementation - Build modular-blocks with CSS Grid `grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, minmax(120px, auto))`. Assign each pane a `grid-area` for its position and span. - Stagger pattern: on page load, JS sequences `transitionDelay` per pane (80ms step, with random jitter ±40ms). Each pane translates from a vector (random angle, 200px distance), scales 1.04→1.00, opacity 0→1, over 540ms cubic-bezier(.2,.7,.2,1). - Use CSS clip-path for the cut-corner panes (one corner clipped at 24px). - Organic blobs are SVG `` elements with `d` attributes animated via Web Animations API between 4 precomputed silhouettes; ease-in-out, duration 9000ms, alternate direction infinitely. - Twilight grid: a single `` element drawing a 14-line horizon grid with perspective warp, redrawn at 30fps, lines pulsing in alpha. - Vapor-band top-bar: a 4px-tall gradient using CSS `background: linear-gradient(90deg, Magenta, Cyan, Magenta)` and `background-size: 200% 100%; animation: pan 1.6s linear infinite`. - No CTAs, no pricing, no stat-grids. The page is a pre-race readiness drill — short telemetry callouts, no commerce. - Cursor becomes a small crosshair with Magenta/Cyan chromatic aberration. On pane hover, the pane's cut-corner pulses Cyan and the corner brackets extend by 4px. - Bias toward energetic full-screen storytelling: each pane is a chapter of the race-start countdown. ## Uniqueness Notes - Differentiator 1: modular-blocks rendered as sci-fi HUD panes with cut-corners and tick-rails, not as bento-box cards — a race-control aesthetic, not a portfolio aesthetic. - Differentiator 2: stagger pattern weaponized as a "race-start ignition sequence" with per-pane vector animation, rather than a generic enter-stagger. - Differentiator 3: duotone palette enforced across all imagery (Magenta + Cyan) — opposite of corpus's warm/gradient dominance. - Differentiator 4: organic-blobs imagery rendered as chrome-magenta amorphous silhouettes that morph live, instead of static decorative blobs. - Differentiator 5: display-bold typography (Big Shoulders Display) used for HUD-grade brevity — short, declarative, never paragraph-prose. - Chosen seed: aesthetic: vaporwave, layout: modular-blocks, typography: display-bold, palette: duotone, patterns: stagger, imagery: organic-blobs, motifs: sci-fi-hud, tone: energetic. - Avoided patterns from frequency analysis: parallax (94% — replaced with stagger-ignition), card-grid (90% — replaced with modular HUD panes), centered (94% — asymmetric 6×6 grid), photography (90% — replaced with SVG blobs + perspective grid), mono typography (81% — used only for HUD codes), mysterious-moody tone (71% — replaced with energetic).