# Design Language for tsundere.racing ## Aesthetics and Tone **tsundere.racing** is a fevered love letter to the night the city tried to forget — a bootleg fairy-cult of street racers who hot-wire fey magic into combustion engines and run sunset-lit highways like processionals to a god they hate. The site is staged as the eighth issue of a paper zine titled *MERIDIAN BURN*, slipped under windshield wipers in parking garages between the hours of moths. It is not a brand page, not a product, not a "service" — it is a single, vertical, scroll-as-tape-deck reading experience: a centered column of confessional copy from a narrator named **Wisteria 03**, who used to win until she stopped wanting to. The **edgy-rebellious** tone is rendered as a tsundere posture — the prose insists it doesn't care, while the visuals (delicate hand-drawn marigolds, sodium-lamp halos, anamorphic lens flares) betray adoration in every margin. Every paragraph that says "leave me alone" is wrapped in fairycore flourishes the reader cannot opt out of. **Fairycore is not softness applied to street racing; the site argues it was always already fairycore** — cars are wishes, on-ramps are thresholds, exhaust is incense. The narrative arc is six "laps" — not chapters, not sections — each a hairpin between adoration and refusal. Lap 01 *("I told the city I hated it. The city believed me.")* opens on a burnt-orange dusk over a bridge. Lap 02 *("He tuned the carburetor. I tuned the prayer.")* introduces the cult's saint, an unnamed mechanic who installs fairy-bone idols inside intake manifolds. Lap 03 *("Don't call it a race. Call it an apology with a finish line.")* is the manifesto. Lap 04 *("The marigolds bloomed in the engine bay overnight.")* — a long, almost lyrical interlude where motion stops and only a slow lens flare crawls across the page. Lap 05 *("Headlights. Halos. Same difference.")* is the climax: a full-bleed lottie of seven cars cresting an overpass under a horizon the color of cooled iron. Lap 06 *("I'll meet you at the on-ramp. Bring tinsel.")* is the sign-off — barely there, a coda whispered in 14pt italics. The site rejects the entire grammar of contemporary "automotive" sites: there are no horsepower specs, no spec sheets, no "OUR FLEET," no booking widgets, no testimonial carousels, no pricing tiers, no founder bios. There is only the zine, scrolling at its own speed, refusing to be skimmed. The reader is meant to feel they have been chosen and slightly inconvenienced. The CTA — singular — is a hand-lettered link near the bottom that reads *"slip your number under the dashboard"* and opens a `mailto:` to an address that looks like a license plate. ## Layout Motifs and Structure The page is rigorously **centered**: a single 620px-wide column on desktop, 92vw on mobile, never more, never less, with the body of the column held to roughly 58 characters per line for a hand-set-broadside feel. To the left and right of the column, the viewport is filled with a slow, warm, drifting **lens-flare field** — six to eight soft anamorphic flares parallaxing at 0.18× scroll speed, never crossing into the column, only flanking it. The center column itself sits on a translucent vellum panel (`rgba(28, 14, 22, 0.62)` with backdrop-blur 18px) so type stays legible against the moving flares. Vertical rhythm is governed by an **odometer scale**: each lap is exactly `100vh` tall on first glance, but expands organically to fit its content (no forced clipping). Between laps, a 1px hairline rule in `#F2A65A` is interrupted at its midpoint by a tiny inline lottie of a single sodium streetlamp blinking on, off, on. This is the only horizontal element on the entire page — the page is otherwise an unbroken vertical thread. The grid inside the centered column is asymmetrical-by-displacement: most paragraphs sit flush-left within the column, but every fourth paragraph kicks `12px` to the right and is set in italics, as if torn from a different page and pasted in. Pull-quotes break the column entirely, enlarging to 124% of the column width and bleeding 12px past both edges, set in 64px Playfair italic with a 0.4px stroke in `#F4D7B5` (no fill) — hollow neon signage, unlit. The **lap-numbering system** is a typographic motif: numerals are rendered as engraved license plates — small (44×24px) inline SVGs with rivets, slightly tarnished, with the number set in condensed Bebas Neue. They are the only sans-serif on the page. They appear to the left of the column at the top of each lap, vertically centered with the lap's first line. The footer is not a footer. It is a single line, dead-centered, in 11pt all-caps tracking 0.32em: `MERIDIAN BURN · ISSUE 08 · PRINTED IN A GARAGE THAT NO LONGER EXISTS`. Below it, nothing — the page ends in 38vh of negative space and a single, last, slow lens flare drifting upward off the bottom edge. ## Typography and Palette **Typefaces (Google Fonts only):** - **Playfair Display** (400 italic, 700, 900 italic) — the body voice and pull-quotes. Italic is the dominant style; roman is reserved for emphasis, which inverts the usual hierarchy and gives the page its hand-leaned-letter quality. The "playfair-elegant" seed is honored at full strength here. - **Cormorant Garamond** (300 italic) — captions, lap epigraphs, and the final coda. Used at 13–15pt with `letter-spacing: 0.04em` and `line-height: 1.85` to feel like marginalia. - **Bebas Neue** (400) — used **only** inside the license-plate lap numerals. It never appears as running type. No third typeface. No display geometric. No monospace. The page is severe about its three-voice rule. **Palette — *Sodium Marigold Dusk* (sunset-warm):** - `#1C0E16` — Garage Floor (background, near-black with a plum bruise in it) - `#3A1F2B` — Brake Dust (panel and column tint above the background) - `#F2A65A` — Marigold Filament (primary text accent, hairline rules, lens-flare cores) - `#F4D7B5` — Headlight Vellum (body type — warm cream, never pure white) - `#C84B5C` — Tail-Lamp Coral (single-use accent: the *mailto:* link, the lottie streetlamp's "on" state, the underline on Wisteria 03's name) - `#7A8FA8` — Overpass Iron (the only cool tone; used exclusively in the Lap 05 lottie sky and as tarnish on license-plate numerals) The body type runs at `#F4D7B5` on `#1C0E16` — a contrast ratio that prioritizes mood over aggressive legibility. Pull-quotes hollow out (stroke-only) so they feel like neon signs without the kitsch. ## Imagery and Motifs The site has **no photography**. Every visual is hand-drawn SVG or vector lottie — non-negotiable to the zine fiction. **The lens-flare field** (drifting outside the center column) is built from layered radial gradients: a warm core at `#F2A65A`, a soft halo at `rgba(244, 215, 181, 0.18)`, and a long anamorphic streak at 14° from horizontal in `rgba(200, 75, 92, 0.08)`. Eight flares, randomized in size 180–540px, drifting upward at 12–28px per second, looping in a 90s cycle. They never animate aggressively; the page should feel like it's been left on overnight. **Marigold sigils** appear inline in the text — tiny (16×16px) hand-drawn SVG marigolds inserted as decorative drop-caps at each lap opening, and as separators between paragraphs in Lap 04. They are deliberately a little crooked, with line-weight variation, as if drawn with a 0.3mm pen by someone slightly impatient. **The Lap 05 hero lottie** is the centerpiece: a 16:9 vector animation, 11 seconds long, looping, of seven dark sedan silhouettes cresting an overpass against a `#7A8FA8` iron sky bruised orange at the horizon. The cars do not move forward; the world tilts beneath them. Headlights bloom and fade in staggered halos. A single marigold petal drifts across the foreground every 4.3 seconds. No sound, no controls. **Sodium streetlamp lotties** punctuate the inter-lap rules — 24×40px, three frames, blinking irregularly so no two readers see the same rhythm. **License-plate motifs** carry the lap numerals (44×24px embossed SVGs) and reappear once at the bottom as the *mailto:* link's visual: a single dented plate that reads `WSTRA-03` in Bebas Neue. **City-urban motifs** are present but oblique: there is no skyline drawing. The city is invoked through *artifacts* — a parking-garage signage glyph (P with a slash) used as the bullet for the rare list, a manhole-cover pattern (radial ribbing) tiled into the vellum panel at 6% opacity, a faint chain-link diamond pattern (1px white at 4% opacity) behind pull-quotes only. **The cursor** on desktop becomes a single 8px marigold. When hovered over the *mailto:* link, the marigold opens into a five-petaled bloom over 240ms. ## Prompts for Implementation - Build as a **single static `index.html`** with one external `style.css` and one `script.js`. No framework, no bundler, no build step. This is a zine, not an app. - The center column is `max-width: 620px; margin: 0 auto;` with `padding-block: 14vh 38vh`. Do not introduce side rails, sidebars, or split layouts. The page is a vertical thread. - Use **GSAP + ScrollTrigger** for the parallax flare field and the staggered fade-in of paragraphs (each paragraph rises 14px and fades from 0 to 1 over 700ms when its top reaches 78% of viewport). Use **lottie-web** (the standalone player) for the streetlamps, the marigold-petal interludes, and the Lap 05 hero. Do not use Framer Motion. - Provide hand-drawn lottie JSON for the streetlamp (3 frames, 1.4s loop, irregular blink) and the marigold (8 frames, 0.6s bloom-on-hover). The Lap 05 hero may be inline SVG with CSS keyframes if a vector lottie is too heavy — the constraint is *vector-only, no raster*. - Type rendering: enable `font-feature-settings: "liga", "dlig", "swsh"` on Playfair Display to surface its swash italics in pull-quotes. Set `text-rendering: geometricPrecision` and `-webkit-font-smoothing: antialiased`. - The lens-flare field must be `pointer-events: none` and `position: fixed` on a layer behind the column. Implement as eight absolutely-positioned divs with radial-gradient backgrounds and individual `requestAnimationFrame` translation loops — *not* a single canvas — so each flare has an independent drift seed. - The cursor marigold is a `position: fixed` 8×8 SVG that follows `mousemove` with a 90ms ease-out; on `mouseenter` of the *mailto:* link, swap to the bloom lottie and play once. - Treat copy as the primary medium and visuals as accompaniment. **Resist any urge** to add a hero CTA, a navigation bar, a logo lockup, a "features" row, or a footer with social icons. The only outbound interaction is the `mailto:`. - AVOID: dark/light toggle, language switcher, cookie banner, sticky header, scroll-snap, full-screen video, hero stats, pricing, testimonials, FAQ accordion, 3-column anything, masonry, tilt-on-hover cards, gradient-shifting "AI" buttons, blog teasers, "OUR PROCESS" timelines. - BIAS TOWARD: long single-column reading, slow ambient motion, hand-illustration energy, italics-as-default, copy that refuses to behave like marketing. - Mobile: column becomes 92vw, pull-quotes scale to 92% of column width (still bleeding past edges), the flare field drops to four flares for performance, and the cursor marigold is disabled. The Lap 05 lottie remains full-bleed within the column at 16:9. - Performance is not the priority — *atmosphere* is. The site may load in 1.4s on a fast connection and that is acceptable. ## Uniqueness Notes **Seed honored:** aesthetic: fairycore · layout: centered · typography: playfair-elegant · palette: sunset-warm · patterns: lottie-animation · imagery: lens-flare · motifs: city-urban · tone: edgy-rebellious. 1. **The zine fiction is structural, not cosmetic.** The site is *literally* presented as Issue 08 of a paper zine titled *MERIDIAN BURN*. The footer says so. Lap numerals are stamped license plates because zines photocopied license plates. There is no "About Us" because zines do not have About Us pages. This commits at the system level, not the surface — the centered layout is a zine column, not a marketing column. 2. **Italics as the default voice.** Roman type is reserved for emphasis, inverting the standard hierarchy. The entire site reads slightly lilted, as if everything is being said through a smirk. This is the edgy-rebellious tonality made into a typographic rule, executed in playfair-elegant. 3. **The lens-flare field never crosses the column.** Most "ambient flare" implementations let the flares drift over the type. Ours respects the gutter — flares are *outside*, like sodium lamps glimpsed past the edges of a windshield. Type is sacred; air is not. This is a structural inversion of the lens-flare-imagery seed. 4. **No photography, no logos, no spec sheets.** A racing-themed site with zero horsepower numbers, zero car photos, zero "fleet," and zero booking funnel. The "racing" is internal — the narrator's pulse against her own rules — and the city-urban motif is invoked through *artifacts* (parking-garage glyphs, manhole ribbing, chain-link weave) rather than skylines. 5. **Pull-quotes as hollow neon.** Stroke-only Playfair italic at 64px gives the climactic lines the look of unlit signage — a fairycore-meets-street-racing visual idiom unlikely to appear elsewhere in the corpus. 6. **The cursor marigold and the *mailto:* license plate.** The single CTA is a dented plate reading `WSTRA-03`, and the cursor itself becomes a flower that blooms on hover. This collapses the racing motif and the fairycore aesthetic into one micro-interaction — the entire thesis of the site executed at 8 pixels square.