# Design Language for meltdown.quest ## Aesthetics and Tone meltdown.quest is a **street-culture zine pinned to the wall of a late-night Tokyo record shop** — the kind of shop where hand-cut flyers from fifteen different cities overlap, where navy-blue ink bleeds into raw metal foil, and where the person behind the counter knows every label, every pressing variant, every regional tour date. The domain "meltdown" is read not as catastrophe but as the moment a crowd completely lets go — the heat-shimmer over a street festival floor, the collective dissolve that happens when music, art, and people find the same frequency. The aesthetic is **street-style fused with metallic precision**: condensed grotesque type stencilled onto raw surfaces, liquid-metal accents that behave like security-hologram foil, and deliberate glitch-art interruptions that read as screen-print misregistration rather than digital corruption. The palette is deep navy and cold steel — the colour of a denim jacket soaked in city rain, lit by a halogen streetlamp — broken by moments of neon copper and chrome white. Tone is **friendly-expert**: the site speaks the way a trusted record-shop clerk speaks — no pretension, direct, genuinely enthusiastic, with the confidence of someone who has seen every aesthetic trend and still cares deeply about each one. Sentences are short. Labels are tight. Energy is high but never frantic. The emotional register is **heat-of-the-crowd warmth rendered in cool-metal materials** — a tension that drives every visual decision. ## Layout Motifs and Structure The page is built on a **persistent left sidebar + main canvas** architecture — not the conventional navigation sidebar, but a **stencil-label column**: a fixed 240px-wide strip on the left that functions like the spine of a street-culture magazine or the edge of a tour poster. The sidebar carries vertical type, running bottom-to-top in 9px condensed caps, stamped like a press mark. It holds the site identity, a live city-tag counter (animated via Lottie), and a subtle static noise texture. **Macro grid:** - Sidebar: 240px fixed left, full viewport height, `position: fixed`. Navy background (`#0B1426`), metallic accent rule (`#8A9BB5`) running full height at 239px. - Main canvas: `margin-left: 240px`, fluid width, `min-height: 100svh`. Divided into horizontal **panels** (not sections) that stack vertically and scroll naturally. Each panel is a distinct surface: raw denim, brushed steel, worn concrete — implemented as CSS background textures and `mix-blend-mode` overlays. - Panel height rhythm: panels alternate between `100svh` anchor panels and `auto` content panels. Anchor panels carry full-bleed glitch-art imagery and the Lottie animation layers. Content panels carry dense compressed type in a 12-column fluid grid with generous gutters. **Sidebar internals (top to bottom):** 1. Wordmark `meltdown.quest` — vertical, rotated −90°, tracked at 0.15em, 11px condensed caps, steel white. 2. Vertical hairline rule separating wordmark from counter zone. 3. Lottie animation embed: a looping 80×80px crowd-pulse icon (concentric rings expanding from a centre dot, frame rate 24fps) — the visual heartbeat of the page. 4. Live counter label: `[N] DROPS` — updates via a CSS counter animation on scroll. 5. Footer stamp at very bottom: the domain in micro-type, rotated, with a press-mark circle glyph. **Main canvas panel sequence:** - **Panel 0 — Ignition (`100svh`)**: Full-bleed glitch-art hero. Title `MELTDOWN` in 200px condensed, stacked two lines, with a live channel-split glitch effect (CSS animation, three-layer RGB offset). Subtitle: one short sentence in steel-metallic italic. - **Panel 1 — Culture Feed (`auto`)**: A dense 3-column masonry-style grid of culture cards — each card is a stencilled tag, a date, and a city. No images in the grid, only type and metallic rule lines. Cards have micro-hover states that trigger a 0.3s Lottie micro-animation (a small spark burst). - **Panel 2 — Feature (`100svh`)**: Full-bleed panel with one featured item. Typography-only, no photography. Condensed headline at 120px, body in compact sans, side-decoration via an inline SVG of a halftone dot-field. - **Panel 3 — Map Panel (`auto`)**: An SVG world-map (outline only, stroke `#8A9BB5` on `#0B1426`) with animated pulse-rings on city nodes — each ring is a Lottie micro-loop. - **Panel 4 — Colophon (`100svh`)**: Full-bleed steel-grey surface. Minimal type, press-mark glyph, and a final Lottie sign-off animation (the crowd-pulse icon expanding one last time before looping off). ## Typography and Palette **Typography — condensed grotesque stack, all Google Fonts:** - **Display / Hero**: [`Barlow Condensed`](https://fonts.google.com/specimen/Barlow+Condensed) — weight 800, uppercase. The headline workhorse. Set `MELTDOWN` at clamp(80px, 16vw, 200px), letter-spacing −0.02em, no word-break. Barlow Condensed reads like a stencilled poster headline — industrial, urgent, space-efficient. This is the dominant voice of the page. - **UI Labels / Sidebar**: [`Saira Condensed`](https://fonts.google.com/specimen/Saira+Condensed) — weight 600, uppercase, 9–11px, tracking 0.18em. Sidebar vertical text, card tags, panel labels. Saira Condensed has a slightly technical edge that reads well rotated and at micro sizes. - **Body / Cards**: [`Saira`](https://fonts.google.com/specimen/Saira) — weight 400 for body copy, weight 500 for card subtitles. Set at 14–16px, line-height 1.5. Harmonises with Saira Condensed so the type family reads as a coherent system at different widths. - **Accent / Italic callouts**: [`Barlow`](https://fonts.google.com/specimen/Barlow) — weight 300 italic, used sparingly for one-liner sub-headlines and quotes. Provides warmth against the otherwise hard-edged stack. **Colour Palette — navy-metallic:** | Token | Hex | Role | |---|---|---| | `--navy-void` | `#0B1426` | Page background, sidebar fill, deepest surfaces | | `--navy-mid` | `#162040` | Panel backgrounds, card fills | | `--steel-rule` | `#8A9BB5` | Rule lines, borders, map strokes, dividers | | `--chrome-white` | `#D6E4F0` | Primary body text, card text, readable on navy | | `--metal-highlight` | `#C4D4E8` | Subheadings, secondary type, muted labels | | `--foil-copper` | `#B87333` | Glitch-art channel-split accent, micro-animation sparks, hover accents | | `--foil-silver` | `#A8B8CC` | Metallic sheen on wordmark, holographic rule | | `--glyph-white` | `#F0F6FF` | Hero headline text, high-contrast display type | The palette has **zero warm backgrounds** — every surface is a shade of cold navy or brushed steel. The only warmth is the foil-copper accent, deployed sparingly as a glitch artifact or a spark micro-animation. This constraint makes every copper moment feel like a heat-shimmer breaking through cold metal. ## Imagery and Motifs **All imagery is glitch-art — generated or composed, never photographs.** The glitch vocabulary is **metallic halftone misregistration**: not the RGB channel-split cliché of cyberpunk wallpapers, but the specific register-error of a four-colour screen print on a curved surface — where the navy plate drifts 3–8px from the steel plate, and a ghost of copper bleeds at the edge. Implemented via CSS: three absolutely-positioned layers (navy, steel, copper) of the same text or shape, with `mix-blend-mode: screen` and a `@keyframes` animation that randomly translates X and Y by 2–8px, with occasional 0-frame jumps that read as a print-roller hiccup. **Cultural motifs — the visual lexicon:** - **City tag stamps**: A recurring SVG motif of a rectangular tag (like a vinyl sticker or a wax seal imprint) bearing a city abbreviation (TYO, NYC, BER, MEX, LDN). Used as decoration on cards, as the map panel's city nodes, and as sidebar micro-labels. Drawn at 24×14px, all-caps, in `Saira Condensed`, with a 1px steel border and a 2px foil-copper inner rule. - **Crowd-pulse Lottie icon**: The primary animated motif. Concentric arcs radiating from a centre dot, drawn in steel-rule colour, with a timed trail-fade on each arc. This icon appears in the sidebar (looping, 80×80px), on card hover (spark variant, 40×40px, triggered once), and in the colophon (full-screen fade-out on final loop). It represents the heat signature of a crowd — thermal, human, dissolving. - **Halftone dot-field SVG**: A static inline SVG pattern of 4px dots at 14px spacing, `fill: #8A9BB5`, `opacity: 0.18`, used as a surface overlay on the Feature panel (Panel 2). Creates the feeling of a screen-printed background. - **Stencil bar graphic**: A horizontal bar of 5–7 hand-drawn stencil rectangles (SVG `` elements), each slightly misaligned by 1–3px, at varying opacity levels between 0.4 and 0.9. Used as a decorative underline beneath section labels, evoking the layered paint of a flyposted wall. - **Press-mark glyph**: A circular SVG mark (⌀ 24px) with the letter M at centre and a dashed outer ring — used as the sidebar footer element and as a small recurring motif at section transitions. Drawn in `--foil-copper`. ## Prompts for Implementation **The story to tell.** A visitor arrives at meltdown.quest the way you arrive at a record shop that a friend recommended: you push open the door and the first thing you notice is the wall — covered in flyers, tour posters, stencilled tags from a dozen cities, every surface layered until the layering is the content. You don't get a hero section announcing what the shop is. You see the wall, and you understand immediately. The site must create that sensation digitally: a left edge that is always present (the sidebar = the shop's spine), a main surface that keeps revealing layers as you scroll, and a warmth that is hidden inside cold materials — the friendly clerk voice emerging from behind the industrial type. **Panel 0 — Ignition (implementation):** - HTML: `
` wrapping a `.glitch-stack` div containing three `

` elements with identical text `MELTDOWN`, each classed `.layer-navy`, `.layer-steel`, `.layer-copper`. - CSS: `.glitch-stack` is `position: relative`; each `.layer-*` is `position: absolute; top: 0; left: 0; width: 100%`. `.layer-navy` has `color: #0B1426; mix-blend-mode: normal` (the base). `.layer-steel` has `color: #8A9BB5; mix-blend-mode: screen; animation: glitch-steel 4s infinite`. `.layer-copper` has `color: #B87333; mix-blend-mode: screen; animation: glitch-copper 4s 0.3s infinite`. `@keyframes glitch-steel` randomly translates X by 0→4px in 5 frame-steps with an occasional `skewX(0.5deg)`. `@keyframes glitch-copper` translates X −3→2px and Y 0→2px with a 1-frame `scaleX(1.02)` pop. The result is a cold-metal poster headline that breathes and misfires. - Subtitle line below: `Barlow` 300 italic, 22px, `--chrome-white`, letter-spacing 0.04em, phrasing: *"culture at full temperature."* **Sidebar (implementation):** - `