# Radiohead design system

> Captured from https://www.radiohead.com/ on 2026-10-05 by Brooks New Media (https://design.brooksnewmedia.com/styles/radiohead/). An independent analysis for reference: Radiohead and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

Radiohead's page is a near-black #050607 terminal with #e8eef0 text and a #54d7de cyan accent. Nearly every word is in Share Tech Mono at 16px with slight tracking, and VT323, a pixel font, carries the larger lines. Tour dates sit in bordered tables on #2b2b2b hairlines, and panels glow with a faint cyan in their shadow.

- Theme: dark
- Mood: dark, monospace, terminal, minimal, data
- Category: Band

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#050607` | The page ground |
| Surface | `#ffffff` | Raised panels, bands and cards |
| Text | `#e8eef0` | Primary ink, 17.3:1 on the background |
| Accent | `#54d7de` | Primary actions |
| Border | `#2b2b2b` | Hairlines and dividers |

Full palette, most used first: `#e8eef0`, `#050607`, `#ffffff`, `#0d0f11`, `#54d7de`, `#1c1e20`.

## Typography

- **Share Tech Mono**: code, 77.4% of the text. Use Share Tech Mono. Share Tech Mono is free under the SIL Open Font License.
- **VT323**: display and body, 22.6% of the text. Use VT323. VT323 is free under the SIL Open Font License.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | VT323 | 24px | 400 | 1.1 | 0.042em |
| Heading | Share Tech Mono | 17px | 400 | 1.55 | 0.015em |
| Body | Share Tech Mono | 16px | 400 | 1.55 | 0.019em |

Sizes in use, largest first: 29px, 27px, 25px, 24px, 21px, 17px, 16px, 13px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 2px, 6px, 8px, 10px, 12px, 14px, 16px, 20px.

## Shape

Corner radii, smallest first: 4px, 6px.

Shadows, most used first:

- `rgba(0, 0, 0, 0.55) 0px 4px 10px 0px, rgba(0, 150, 180, 0.11) 0px 0px 10px 0px, rgba(255, 255, 255, 0.08) 0px 0px 0px 6px inset`
- `rgba(0, 0, 0, 0.6) 0px 2px 8px 0px, rgba(0, 120, 140, 0.06) 0px 0px 8px 0px`
- `rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset`

## Components

No repeated button or card treatment was found above the fold.

## Do

- Run the whole page in monospace and present information as plain tables.
- Give panels a dark shadow with a hint of cyan for a screen glow.
- Keep color to one cool accent on a near-black ground.

## Don't

- Use a proportional sans for body copy: the terminal feel depends on monospace.
- Add photography behind the text: the page is type and lines.
- Round corners past 6px.

## CSS variables

```css
:root {
  --color-background: #050607;
  --color-surface: #ffffff;
  --color-text: #e8eef0;
  --color-accent: #54d7de;
  --color-border: #2b2b2b;
  --font-display: "VT323", system-ui, sans-serif;
  --text-display: 24px;
  --weight-display: 400;
  --font-heading: "Share Tech Mono", ui-monospace, monospace;
  --text-heading: 17px;
  --weight-heading: 400;
  --font-body: "Share Tech Mono", ui-monospace, monospace;
  --text-body: 16px;
  --weight-body: 400;
  --space-1: 2px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 20px;
  --radius-1: 4px;
  --radius-2: 6px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-05.