A brutalist black-and-white broadcast console for a global online radio station: a pure-black #000000 canvas carrying white content panels and a dense mosaic of full-bleed show artwork, with the whole page set in ONE licensed condensed grotesque (Univers Condensed, 1616 uses) at deliberately small sizes — the largest text is only 42px and body sits at 12px — UPPERCASE weight 700 for headings and sentence-case 400 for body and nav, so hierarchy is built from case, weight and position rather than scale. The recognisable moment is a pinned black two-channel LIVE ticker under the nav, showing both simultaneous streams with play triangles, marquee-scrolling show titles and city labels; the one accent is a live-red #e81717 indicator dot that flickers on air, while a grey ladder (#cccccc/#999999/#666666/#4c4c4c) does the rest of the chrome and all saturated colour is left to the show imagery. Corners are square (2px dominant, 0px on most controls), structure comes from 1px #666666/#999999 hairlines rather than shadows (elevation is refused), and hover simply dims to opacity 0.7 over plain underlined text labels or white-on-black inverse pills. Motion is short opacity fades (0.1–0.5s ease) plus a marquee ticker and a flicker loop with no animation library, over a dense device breakpoint ladder from 321 to 1920px. Two captured anti-patterns: focus outlines are suppressed site-wide and there is no reduced-motion block despite the marquee and flicker loops. Univers Condensed is licensed, so the preview specimen stands in with Oswald.
⚠ needs-dashboard
Browse NTS Radio in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: nts.live (live DOM, computed styles), 2026-08-02 (desktop 1512px). Coverage: home / live schedule. Same-origin stylesheets fully readable (sheetsBlocked 0); OneTrust consent-widget rules excluded as third-party. Reality check: matches the hint — brutalist mono, ticker-led, print-derived. Sharpening it: the whole page is set in ONE licensed condensed grotesque (Univers Condensed, 1616×) at deliberately SMALL sizes (largest text 42px, body 12px) all UPPERCASE for headings; the signature is the black two-channel LIVE ticker strip pinned under the nav, and the one accent is a live-red #e81717 flicker dot. Square corners (2px dominant), near-zero shadows, hover is opacity 0.7.
A brutalist broadcast console: a pure-black canvas carrying white content panels and a dense grid of full-bleed show artwork, all chrome set in one condensed grotesque. It reads like printed radio listings — utilitarian, information-first, no rounded friendliness and no decorative colour. The recognisable moment is the black LIVE strip pinned directly under the nav, showing two simultaneous channels with play triangles, marquee-scrolling show titles and city labels (London / Melbourne). Colour is refused in the chrome and left entirely to the show imagery; the only chromatic UI mark is a small red live indicator. Feels: brutalist, editorial, utilitarian, broadcast.
| Token | Hex | Role / usage |
|---|---|---|
| black | #000000 | Page canvas, header, live ticker, ink on white panels |
| white | #ffffff | Text on black, content-panel surfaces, inverse button fill |
| grey-cc | #cccccc | Muted text on black, hairlines |
| grey-99 | #999999 | Secondary text, 1px borders |
| grey-66 | #666666 | Dark hairline borders on black (most-used border) |
| grey-55 | #555555 | Tertiary text |
| grey-4c | #4c4c4c | Live-channel hover / focus fill |
| Token | Hex | Role / usage |
|---|---|---|
| live-red | #e81717 | The one accent: live indicator dot (flickers), "on air" marks |
| slate | #27455c | Incidental genre/section fill (8×), not chrome |
| blue | #3860be | Rare link/tag blue, not part of the core system |
Rule: chrome is strictly black / white / grey. All saturated colour lives in show artwork. Rule: red #e81717 is reserved for the live-on-air indicator only.
Univers-Condensed, "Helvetica Neue", Arial, sans-serif — a single licensed condensed grotesque across the entire page (1616 uses). Specimen below uses Oswald (Google Fonts) as the closest open condensed stand-in; the site ships Univers Condensed.| Role | Size/Line | Weight | Tracking / case |
|---|---|---|---|
| Display (largest) | 42 / 42 | 700 | normal, UPPERCASE |
| Section (h2) | 24 / 28 | 700 | normal, UPPERCASE |
| Card title (h1 in card) | 22 / 24 | 700 | normal, UPPERCASE |
| Sub (h3) | 14 / 18 | 700 | normal, UPPERCASE |
| Nav / link | 16 / 22.4 | 400 | normal, sentence case |
| Body | 12 / 17 | 400 | normal, sentence case |
| Button (pill label) | 14 / — | 700 | normal, UPPERCASE |
Patterns: hierarchy comes from case + weight + position, not from large scale — the display size tops out around 42px. Headings are always UPPERCASE 700; running text and nav are 400. Tracking stays normal throughout.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.