# NTS Radio — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Core (monochrome)
| 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 |

### Accent & incidental
| 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.

## 3. Typography Rules

- Font stack: `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.
- Body: 12px / 17px / 400, sentence case; headings UPPERCASE at 700.

| 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.

## 4. Component Stylings

### Buttons
- **Inverse pill (NTS Supporters)**: bg `#ffffff`, text `#000000`, 1px `#ffffff` border, radius ~2px, h 28px, 14/700 UPPERCASE, padding `5px 10px`.
- **Text / ghost (View tracklist, More Info)**: transparent bg, text `#000000` or `#ffffff`, 0px radius, no border — a plain underlineable label.
- **Play control**: transparent, white triangle glyph, 0px radius, h 32–58px, no border.

### Live-channel row (signature)
- Black bg, white text, play triangle + channel number, marquee-scrolling title, right-aligned city label. Rest bg `#000000`; hover/focus bg `#4c4c4c` (collapsed, not-playing state).

### Inputs
- Search field in nav: minimal, bg transparent, 1px hairline `#999999`, ~0–2px radius, Univers Condensed. (No prominent focus ring captured — see states.)

### Cards / panels
- White `#ffffff` panels and full-bleed image tiles; radius 0–2px, 1px `#666666`/`#999999` hairlines, essentially no shadow (a faint `rgba(0,0,0,.05) 0 1px 20px` appears on a few floating cards).

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Link / footer link | text, no underline | `opacity:0.7`, `outline:0` | outline suppressed (anti-pattern) | — | — |
| Live channel (collapsed) | bg `#000000` | bg `#4c4c4c` | bg `#4c4c4c` | playing = expanded | — |
| Inverse pill | white / black | opacity 0.7 | not captured | — | — |

Focus note: interactive links set `outline:0` on hover and no visible focus ring was captured — recorded as an anti-pattern; a visible 2px `#ffffff` (or `#e81717`) ring is the recommended replacement.

## 5. Layout Principles

- Full-bleed edge-to-edge layout — content runs to the viewport edges, not a centered max-width column.
- Fixed top nav (h ~44px, black) with wordmark left + UPPERCASE section links; directly below it a pinned black LIVE ticker strip (two channels) that persists across the site.
- Home body is a dense mosaic grid of square show-artwork tiles plus a right-hand "Infinite Mixtapes" rail of image cards.
- Spacing is tight; hairlines (`#666666`/`#999999`) divide rows and cells rather than whitespace.

## 6. Depth & Elevation

- Radii: `2px` dominant, then `1px` and `4px` — effectively square/brutalist; `20px`/`24px`/`50%` only on circular player controls.
- Borders carry structure: 1px `#666666` (on black), 1px `#999999`, 1px `#ffffff`, 2px `#000000`.
- Elevation refused: most surfaces flat. Recorded shadows are faint and rare — `rgba(0,0,0,.05) 0 1px 20px` on a few floating cards; a couple of directional drop shadows on player chrome.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| opacity | 0.1s / 0.3s / 0.5s | ease / linear | fades, hover dimming |
| transform | 0.25s | ease | slide / lift |
| color | 0.1s | ease | link colour |
| height, margin, opacity | 0.5/0.5/0.3s | ease | expanding live channel |

House transition: short opacity fades (0.1–0.5s ease) plus `transform 0.25s ease`. Keyframes observed: `marquee` (the scrolling ticker titles), `flickerAnimation` (the live-red indicator pulse, 2s ease infinite), `spin` (0.8s loader), `slideInVideo`, `slide-in-from-left`, `slide-up-down`, `fadeInScrollDown`. No animation library detected. No `prefers-reduced-motion` block (reducedMotionBlocks 0) — recorded as a gap given the marquee + flicker loops.

## 8. Backgrounds, Effects & WebGL

- Atmosphere is photographic, not synthetic: 35 raster show-artwork layers + 2 background videos. No canvas, no WebGL, no grain texture.
- Gradients are scrims only: `linear-gradient(to top, rgba(0,0,0,0) 66%, rgba(0,0,0,.33))` over image tiles, and a `rgba(0,0,0,.5)` darkening layer over hero imagery. One legacy `-webkit-gradient` white→grey.
- No backdrop-filter blur.

## 9. Do's and Don'ts

### Do
- Keep chrome strictly black / white / grey; let show artwork supply every saturated colour.
- Set everything in one condensed grotesque; UPPERCASE 700 for headings, 400 sentence-case for body/nav.
- Keep the type scale small (largest ~42px, body 12px) — build hierarchy from case, weight and position, not size.
- Pin a black live ticker under the nav; marquee-scroll long titles; flicker a red `#e81717` dot for on-air.
- Keep corners square (0–2px) and structure from 1px `#666666`/`#999999` hairlines, not shadows.
- Use hover = `opacity:0.7`; inverse (white-on-black) pills for the few solid buttons.

### Don't
- Don't introduce rounded cards, soft shadows or gradient chrome — the surface is flat and square.
- Don't add a second accent; red is the live indicator only.
- Don't scale headings up for emphasis — emphasis is case + weight.
- Don't suppress focus outlines (the live site does; provide a visible ring instead).
- Don't add a second type family or use a non-condensed face.

## 10. Responsive Behavior

- Dense device-targeted breakpoint ladder from stylesheets: 321, 400, 416, 425, 426, 476, 530, 550, 600, 767, 768, 860, 896, 1023, 1024, 1025, 1190, 1200, 1500, 1542, 1548, 1920px.
- The mosaic grid recolumns and the Infinite Mixtapes rail collapses at narrow widths; the live ticker persists.
- No dark-scheme media block (darkSchemeBlocks 0) — the site is single-theme dark-on-black by default. No container queries.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#000000` · Text `#ffffff` · Muted `#999999` · Border `#666666` · Accent `#e81717`
- Font: Univers Condensed (stand-in Oswald) · Body: 12px · Radius: 2px control / 2px card · Control height: 28–32px
- Focus: not captured (site suppresses outline) — use a 2px `#ffffff`/`#e81717` ring · Hover: `opacity:0.7`

<nts-radio_design_language>
Use the NTS Radio design language: a brutalist black-and-white broadcast console. Pure-black `#000000` canvas with white `#ffffff` content panels and a grey ladder (#cccccc/#999999/#666666/#4c4c4c); the only accent is a live-red `#e81717` indicator dot that flickers. Set everything in one condensed grotesque (Univers Condensed; open stand-in Oswald) — UPPERCASE weight 700 for all headings, sentence-case 400 for body (12px) and nav (16px). Build hierarchy from case, weight and position, not scale: the largest text is only ~42px. Corners are square (2px dominant, 0px on many controls); structure comes from 1px `#666666`/`#999999` hairlines, not shadows (elevation is refused). The signature is a pinned black two-channel LIVE ticker under the nav with play triangles, marquee-scrolling titles and city labels. Buttons are plain text labels or white-on-black inverse pills; hover dims to `opacity:0.7`. Motion is short opacity fades (0.1–0.5s ease) plus a marquee ticker and a flicker loop; no animation library. All saturated colour comes from full-bleed show artwork. Feels: brutalist, editorial, utilitarian, broadcast. Avoid: rounded cards, soft shadows, gradient chrome, a second accent colour, a non-condensed typeface, or scaling headings up for emphasis.
</nts-radio_design_language>