# Design Language for tsundere.racing ## Aesthetics and Tone tsundere.racing is staged as **the start menu of a 2003 Dreamcast-era arcade racer that has developed feelings and is mortified about it.** The conceit: a chrome-bezeled, lens-flared, holographically-skinned game shell — pause screen, garage menu, time-attack leaderboard — except every label, tooltip, and loading hint has been written by a character who insists she is *not* helping you, *not* impressed by your lap time, and *definitely not* the reason the menu music swells when you hover the "PLAY" button. The visual language is **Y2K-futurism**: brushed-titanium panels, bevelled liquid-chrome lozenge buttons, iridescent gradient ramps that shift teal-to-magenta as the cursor passes, scanline sheen, and the kind of confident plastic-future optimism that PlayStation 2 boot screens and turn-of-the-millennium energy-drink cans shared. Over that gleaming surface sits a second, contradictory layer — a flushed, hand-set "blush channel": small bursts of warm pink that leak into the cold metal at exactly the moments the copy pretends nothing is happening. The whole site is one running argument between a chrome interface that wants to look invincible and a voice that keeps blushing through it. Tone: **edgy-rebellious on the surface, secretly warm-inviting underneath** — proud, clipped, defensive, occasionally betraying real care, never sappy. The word *tsundere* literally drives the structure: `tsun` (cold, sharp, metallic) is the default state; `dere` (sweet, warm, pink) is what bleeds through under interaction. Racing is the metaphor and the skin — speedometers, sector splits, ghost cars, pit lanes — but the real subject is a UI that can't admit it's rooting for you. ## Layout Motifs and Structure The composition is a **HUD-overlay over a layered-depth diorama** — explicitly NOT a card-grid, NOT centered-hero-stack, NOT bento. The page reads as a **game shell with chrome chrome**: a persistent skeletal frame (corner brackets, a thin animated sector-bar across the top, a faux "P1 — TSUNDERE" tag bottom-left) that stays fixed while the "screens" behind it slide. Structure — six "screens" on one continuous ~600vh vertical track, each a full-bleed plate: 1. **TITLE SCREEN** — the domain wordmark cast in liquid chrome, a single bevelled "PRESS START" lozenge, and a tiny line of copy denying that anyone was waiting for you. 2. **GARAGE / SELECT** — a horizontal-scroll band of three or four "machines," each on its own turntable disc; the parallax here is real depth (floor reflection plane, mid car plane, rim-light plane, foreground spec-dust plane). 3. **TUTORIAL (THE TSUN PART)** — clipped instructional copy laid out like in-game tooltips pinned to HUD anchors with leader lines; deliberately curt. 4. **TIME ATTACK** — a vertical sector-split readout (split 1 / split 2 / split 3), each split a horizontal liquid-chrome gauge that fills as you scroll; this is the closest thing to a "stats" section but it is presented as a *replay scrubber*, not a number grid. 5. **GHOST LAP (THE DERE PART)** — the screen warms; a translucent "ghost" version of the earlier garage car drifts across, pink rim-light, and the copy finally drops the act for two sentences before catching itself. 6. **RESULTS / CONTINUE** — a 9...8...7 continue-countdown framing, a single chrome "GO AGAIN" lozenge, footer denials. Spatial rules: hard 24px corner-bracket margin on every screen; HUD elements snap to a 12-column grid but the *diorama* behind ignores it and flows organically; every "screen transition" is a wipe — a chrome bar sweeps across with a brief lens-flare seam. Negative space is treated as "void garage floor": near-black with a faint reflective gloss-gradient, never empty white. ## Typography and Palette **Typefaces — Google Fonts only, three families, used with arcade-menu discipline.** - **Orbitron** (display / wordmark / screen titles). The chrome voice. Geometric, wide, vaguely instrument-cluster — set at 88px for the title wordmark, 48px for screen headers, **always uppercase, tracked +60**, and always rendered with the liquid-chrome treatment (multi-stop metallic gradient clipped to text, 1px dark inner edge, faint specular highlight band that drifts on hover). This is the "tsun" — hard, polished, untouchable. - **Chakra Petch** (HUD / labels / tooltips / leaderboard rows / body). The functional in-game voice — semi-condensed, slightly mechanical, with cut corners that echo the bevelled buttons. Used at 14–18px for all interface copy, leader-line callouts, sector readouts. Tabular figures for any lap times (`1:07.842`). Tracked +20 in caps-label mode. - **Caveat** (the "blush channel" — and ONLY this). Used *exclusively* for the dere lines: the sentences where the voice slips. Rendered in warm pink, slightly rotated (−2°), small (20–22px), as if scrawled over the chrome HUD in a moment of weakness. Appears no more than once per screen. The contrast between Orbitron's machined uppercase and Caveat's handwritten lean IS the tsundere joke made typographic. **Palette — cold chrome dominant, warm blush as the leak, plus iridescent shift-ramp.** - `#0B0E14` — **Void Floor.** Near-black garage backdrop, all negative space, panel gaps. - `#C9D2DA` — **Brushed Titanium.** Primary chrome midtone — panel fills, default text fill before gradient. - `#F2F6FA` — **Specular Highlight.** The hot edge of every bevel, the drifting glare band on chrome text. - `#5B6B7A` — **Cold Shadow.** Lower stop of metallic gradients, inset panel shadows, disabled HUD. - `#23E0C8` — **Coolant Teal.** The aggressive accent — active sector bar, focused button rim, "P1" tag, the *tsun* glow. - `#FF4FA3` — **Blush Magenta-Pink.** The dere leak — Caveat copy, ghost-lap rim-light, the warm bloom that creeps in on screen 5, the heart-shaped split marker no one will mention. - `#7A5BFF` — **Iridescent Violet.** The mid-point of the cursor-driven shift-ramp; every iridescent gradient runs Teal → Violet → Pink, so motion *literally* drags the palette from cold to warm. - `#E8B23A` — **Hazard Amber.** Sparing — start-light staging dots, the continue-countdown numerals, caution chevrons on screen edges. ## Imagery and Motifs **Four motif families, layered cold-over-warm.** 1. **Liquid-chrome objects (the tsun skin).** Bevelled lozenge buttons (28px radius pill, 4-stop vertical metallic gradient, 1px specular top edge, 2px cold-shadow bottom edge, subtle reflected-floor gradient on the lower third). Brushed-titanium panels with cut corners (45° chamfers, 18px). A drifting **specular glare band** — a thin diagonal white-to-transparent sweep that crosses chrome surfaces on hover. Corner brackets `⌐ ¬ L ⌟` framing every screen. Everything metal has a faint vertical reflection of whatever sits below it. 2. **Racing-HUD elements (the functional layer).** Sector-split gauges (horizontal liquid-chrome troughs that fill teal as you scroll). A top-edge **sector progress bar** with three notches. Ghost-car silhouettes (low-poly wireframe, translucent). Start-light staging column (five amber dots, top-down). A speedo arc used only as a section-divider ornament — a 220° gauge sweep, no numbers, the needle parked. Leader-line callouts: thin teal hairlines from a 4px node to a Chakra Petch label, like in-engine tooltips. Tabular lap-time chips. 3. **The blush channel (the dere leak).** Soft pink radial blooms that appear *behind* chrome panels, as if heat is coming through from inside. A single **heart glyph rendered as a chrome lap-marker** — pill-shaped, bevelled, but unmistakably a heart, used exactly once (the split-2 marker on screen 4) and never acknowledged in copy. Caveat scrawls. On screen 5 the entire color temperature ramps warmer for ~120vh then snaps back. 4. **Iridescence / scanline grain (the surface texture).** A faint horizontal scanline overlay (2px lines, 4% opacity) over chrome — CRT-arcade residue. Holographic foil-sticker gradients (Teal→Violet→Pink at ~110°) on accent chips and the wordmark's underlay. Lens-flare seams during screen wipes. Tiny drifting spec-dust particles in the foreground plane catching teal rim-light. **No photography. No hand-drawn doodles. No glassmorphic frosted cards.** The "glass" here is polished metal, not blurred frost. ## Prompts for Implementation Build tsundere.racing as **one HTML document, one CSS file, one small ES module — no SPA, no router, no framework, no build step beyond a single esbuild/minify pass.** The page is one continuous vertical scroll, ~600vh, six "screens," each a full-bleed plate, plus a persistent fixed HUD frame layer on top (corner brackets, top sector bar, bottom-left `P1 — TSUNDERE` tag, a tiny rev-counter that ticks with scroll velocity). **Storytelling is the organizing principle, not navigation.** The six screens are one short arc: a game UI that starts cold and metallic, gets dragged warmer the more the visitor interacts, briefly drops the act on screen 5 (GHOST LAP), then catches itself and resets on screen 6 with a "GO AGAIN" loop. Copy across the whole site is the tsundere voice — terse, defensive, secretly invested. Examples of register, not literal strings: title screen says something like *"Oh. It's you. I wasn't— the engine just happened to be warm."*; the tutorial is clipped and bossy; screen 5's Caveat line is the one moment of sincerity (*"...go fast. I'll be watching. Not because I care."*) immediately undercut by an Orbitron header snapping back to *"ANYWAY."*; results screen denies it was ever a big deal. **Bias hard toward the narrative shell.** AVOID: CTA-stacks, pricing tables, feature card-grids, stat number-grids, testimonial rows, "trusted by" logos. The only repeated button is the chrome lozenge ("PRESS START" → "GO AGAIN"), and it is a story beat, not a conversion. **Motion is the tsun↔dere mechanic.** Implement a single global `--warmth` custom property (0 = full cold chrome, 1 = full blush). It is driven UP by: cursor proximity to interactive chrome, scroll depth into screen 5, hover-dwell time on the lozenge. It decays back toward 0 over ~3s of no interaction. Wire `--warmth` into: the iridescent gradient stops (cold end stays teal/violet, warm end pushes toward `#FF4FA3`), a pink bloom's opacity behind panels, the Caveat scrawls' visibility, even the menu-hum pitch if audio is used (optional, muted by default). So the *literal feeling* of the site warming up is the visitor's doing — the chrome can't help it. Specific techniques: **liquid-chrome text** via `background: linear-gradient` multi-stop clipped with `background-clip: text` plus an animated `::after` glare band; **bevelled lozenges** via layered `box-shadow` (inset highlight top, inset shadow bottom, outer drop) — no images; **screen wipes** as a fixed `
` chrome bar that translates across with a `mix-blend-mode: screen` lens-flare gradient riding its leading edge, triggered by scroll thresholds; **sector gauges** as `clip-path` reveals tied to `IntersectionObserver` + scroll progress; **ghost car** as an inline SVG low-poly path with `stroke-dasharray` draw-on plus a slow horizontal `translateX` drift; **scanlines** as a fixed `repeating-linear-gradient` overlay at 4% opacity; **spec-dust** as ~30 absolutely-positioned 2px divs with randomized slow `transform` drift in `requestAnimationFrame`. Use `prefers-reduced-motion` to freeze the glare bands, wipes, and dust (keep the warmth color shift, just make it instant on hover instead of animated). Keep the whole thing under ~140KB excluding fonts. Everything must work as a flat static deploy. ## Uniqueness Notes Five differentiators this design commits to. None should be duplicated by any other CMassC site. 1. **`--warmth` as a single load-bearing tsundere variable.** One CSS custom property literally interpolates the entire site from cold chrome to warm blush, driven by the visitor's own interaction and decaying when ignored. The *concept* — a UI that warms up the more you touch it and pretends it didn't — is the signature of tsundere.racing and would be plagiarism if copied. No card-grid, no bento, no hero-stack. 2. **Y2K-chrome × racing-HUD × handwritten-blush triad.** Frequency analysis shows y2k-futurism at 1% and chrome-metallic palette at 3% — already rare; fusing them with a *racing-game HUD shell* and a single handwritten font used ONLY for emotional leakage is a combination at zero before this design. 3. **Typographic tsundere joke.** Orbitron uppercase machined display ("tsun") vs. Caveat handwritten −2° pink scrawl ("dere"), with a strict rule: Caveat appears at most once per screen, always undercut by an Orbitron header snapping back. The contradiction lives in the type system itself, not just the copy. 4. **The unacknowledged chrome heart-marker.** A bevelled, liquid-chrome, pill-shaped lap-split marker that is unmistakably a heart, placed exactly once (split 2, screen 4), and never mentioned in any copy. A deliberate, plant-it-and-walk-away detail. 5. **Deliberately avoids the cohort's defaults.** Frequency analysis flags hand-drawn (95%), glassmorphism (85%), warm-gradient palettes (98%/93%), mono typography (93%), cursor-follow (89%), and card-grid layouts (93%) as saturated — this design uses NONE of them: the "glass" is polished metal not frost, the palette is cold-chrome-first, the type is Orbitron/Chakra Petch/Caveat (no mono), the layout is a HUD-overlay diorama, and cursor input drives a warmth-temperature shift rather than a follower blob. Chosen seed/style: **y2k chrome metallic fashion** (mapped to vocabulary: aesthetic `y2k-futurism`, palette `chrome-metallic` + `dark-neon`, layout `hud-overlay` + `horizontal-scroll`, typography `display-bold` + `tech-mono` + `handwritten`, motifs `futuristic` + `sci-fi-hud`, imagery `neon-glow` + `noise-texture`, patterns `tilt-3d` + `path-draw-svg` + `card-flip`, tone `edgy-rebellious` + `warm-inviting`).