Design guide · v4 · gamersradio-design-system-mixed.md

Live design guide.

Reference for tokens, type, the logo, and core components — sourced from src/styles/global.css and src/components/catalog/. Drift between this page and the spec doc is drift in the code.

Colors

Surfaces

surface.cream #F5EFE0 Body, catalog, articles, nav, archive
surface.midnight #0B1538 Hero panel, footer

Text on cream

text.ink #1C1917 Primary headlines + body
text.slate #57534E Secondary, descriptions, meta, italic notes
text.stone #78716C Tertiary, captions, micro-labels
text.stone.muted #A8A29E Sparse states (offline-era year cells)

Text on midnight

text.cream #FAF5E9 Primary headlines + body on midnight
text.coolgray #94A3B8 Secondary text on midnight

Era accents — cream-pair (on cream surfaces)

Arcade
#15803D 1972 – mid 80s
8/16-bit
#1D4ED8 mid 80s – mid 90s
CD era
#BE185D mid 90s – mid 2000s
Modern
#C2410C mid 2000s – now

Era accents — midnight-pair (on midnight surfaces)

Arcade
#4ADE80 1972 – mid 80s
8/16-bit
#60A5FA mid 80s – mid 90s
CD era
#EC4899 mid 90s – mid 2000s
Modern
#FB923C mid 2000s – now

Dividers

divider.cream rgba(28,25,23,0.15) Default cream rules + sections
divider.cream.strong rgba(28,25,23,0.25) Archive section headers, year cell borders
divider.cream.card rgba(28,25,23,0.18) v4: Catalog card + StayTuned outlines
divider.cream.dotted rgba(28,25,23,0.35) Dot-leader patterns
divider.cream.dashed rgba(28,25,23,0.18) Sparse year cell borders
divider.cream.light rgba(28,25,23,0.08) Subtle internal dividers
divider.midnight rgba(250,245,233,0.12) Default midnight rules
divider.midnight.light rgba(250,245,233,0.08) Subtle midnight dividers

Border radius

radius.sm 4px Year cells
radius.md 8px Buttons, badges, inputs
radius.lg 12px Hero panel, catalog cards
radius.full 9999px Pills, round elements

Typography

Type families

GAMERSRADI
Archivo (heading / wordmark)
Heavy condensed sans · weight 900 · Free Druk-Wide substitute
The quick brown fox jumps over the lazy dog.
Inter (body)
Clean readable sans · 400 regular, 500 medium · Avoid 600+
2026.05.26 · 88 min read · ARCADE · 1980
IBM Plex Mono (technical)
Years, dates, counts, durations

Type scale

Aa
48–64px display
Hero display, wordmark, marquee article titles · 1.10–1.20
Aa
26–32px section
Section headlines (catalog, archive, page titles) · 1.15–1.20
Aa
18–22px subsection
H2 / subsection heads, subscribe column titles · 1.30
Aa
14–16px body
Card titles, intro paragraphs, body · 1.30–1.65
Aa
11–13px secondary
Body secondary, card descriptions, captions · 1.40–1.55
Aa
10–11px label
Eyebrows, era badges, column headers, ON AIR · 1.40

Treatment rules

  • Sentence case for all headlines
  • All-caps + letter-spacing 0.10–0.14em for micro-labels (eyebrows, era badges, column headers)
  • ON AIR / NOW PLAYING labels use 0.18em (one exception)
  • No italics for emphasis — use weight 500. Italic IS allowed in the archive section editorial subnotes and column count indicators (small "6", "26", "5")
  • Never bold mid-sentence — bold is for headings / labels only

Wordmark "GAMERSRADI" + vinyl-O disc. Two-tone identity: GAMERS and the "O" disc body in the Arcade dark green #15803D (both surfaces); RADI and the center label in the primary; the album grooves cream on both surfaces; the spindle hole in the surface color. The disc is a green record with cream grooves. Cream is primary (navbar); midnight is the inverse used in the hero panel and footer.

Cream variant (primary)

GAMERS + disc body #15803D · RADI + center label #0B1538 (navy) · grooves #F5EFE0 (cream) · hole #F5EFE0

GAMERSRADI
600 × 100 — desktop navbar
GAMERSRADI
360 × 60 — mobile navbar / footer
GAMERSRADI
180 × 30 — compact (grooves hidden ≤40px tall)

Midnight variant (hero + footer)

GAMERS + disc body #15803D · RADI + center label #FAF5E9 · grooves #FAF5E9 (cream) · hole #0B1538

GAMERSRADI
600 × 100 — desktop navbar
GAMERSRADI
360 × 60 — mobile / footer

Construction (per §4.1–§4.2)

  • viewBox 0 0 540 90 · text font-size 64 · weight 900 · letter-spacing -3
  • Vinyl group at translate(480, 45)
  • Text split: GAMERS tspan (green accent) + RADI tspan (primary)
  • Outer disc r=26 (green body) · grooves r=22/18/14 stroke 1.5 @ 50% opacity (cream on both surfaces) · inner label r=10 (primary) · spindle hole r=2 (surface color)
  • Green accent is the Arcade dark green #15803D on both surfaces (no era rotation); GAMERS + disc body

Components

ON AIR indicator (per era)

Dot 7px + glow + "ON AIR" label. Color is the era's midnight-pair accent. Pulses 0.6 → 1.0 → 0.6 over 2s. Idle: shifts to coolgray, label "OFF AIR".

ON AIR
Arcade
ON AIR
8/16-bit
ON AIR
CD era
ON AIR
Modern
OFF AIR
Idle

Equalizer visualization

9 vertical bars, 3px wide, 3px gap, container 22px tall. Bars in era midnight-pair colors. Heights 35–95% animated independently (periods 0.8–1.6s).

Era badges (per §6.8)

Uppercase 10–11px, letter-spacing 0.12em, weight 500. Era cream-pair color. No background fill.

Arcade8/16-bitCD eraModern

Outline buttons (per §6.7)

0.5px solid era accent · transparent bg · text matches border · padding 6–8 / 12–14 · radius.md · 12–13px weight 500 · hover fills to 8% accent.

Read the essay → Read the essay → Read the essay → Read the essay →

Year-cell states (per §6.9)

Three states: active (substantial content), sparse (offline period), current (active site year).

2007
2014
2026

Catalog card (per §6.6)

Transparent bg · 0.5px border · radius.lg · 3px era top bar · padding 14×16 · 3-line clamp on title + description.

Arcade · 1980

The Pac-Man frequency: Toshio Kai's quartet of 8-bit hooks

Four bars, three sounds, a coffee break — a slow listen to the Namco original.

8 min read
8/16-bit · 1991

Sonic the Hedgehog's Green Hill loop, in four arrangements

Masato Nakamura's pop-funk anchor laid across the Genesis FM chip.

12 min read
CD era · 1997

Nobuo Uematsu on Final Fantasy VII at twenty-five

A long phone call about the Northern Crater theme and what redbook audio finally let him do.

Interview · 18 min

Dot-leader row (Categories column, §6.9)

Name (13px weight 500 ink) · dotted leader · count (11px mono stone). No era colors in Categories.

  • Composers26
  • Interviews18
  • Long reads31
  • Soundtracks44
  • Reviews52
  • From the archive84

Spacing & rhythm

Base unit 4px. Allowed values only.

4
8
12
16
20
24
32
48
64
96
  • Sections separated by 48–64px vertical
  • Cards within a section: 14px gap
  • Three-column grids: 28–32px gap
  • Title-to-body within a card: 10px
  • Hero panel margin from page edges: 16–20px desktop, 12px mobile

Homepage composition

  1. Navigation bar (§6.1) — cream, wordmark + era nav, sticky on scroll
  2. Hero panel (§6.2) — midnight, embedded with rounded corners + inset highlight
  3. Catalog "Reading, one era at a time" — cream, catalog cards
  4. Browse the archive (§6.9) — cream, three columns (Categories · Years · Recent posts)
  5. Stay tuned (§6.10) — cream, Newsletter + YouTube
  6. Footer (§6.11) — midnight, full-width edge-to-edge

Off-limits (§1.2)

  • Frequency-line graphics, radio dial markings, tick-mark dingbats (legal exposure — implies FCC broadcasting)
  • Specific frequency numbers anywhere in the UI or copy ("88.5 FM", etc.)
  • RGB rainbow / Twitch-streamer gaming aesthetics
  • Neon synthwave purple/magenta gradients
  • CRT scanlines, pixel fonts, faux-arcade chrome
  • Heavy drop shadows, blur, neon glow effects
  • Dark backgrounds with thin neon outline text
  • Stock gaming imagery
  • Rotating the logo's color per era · using any era accent other than the fixed Arcade green in the wordmark (the two-tone is a fixed identity, not era-driven)