# Collabtunes Design Tokens

Canonical CSS foundation — 5.13.26 | Component Factory

Color Tokens
--bg-primary #070911
--bg-panel #0b0a08
--bg-soft #111111
--text-main #d8d0bd
--text-strong #e7d7b8
--text-muted #8f96a8
--accent-gold #ffd21f
--accent-oldgold #d4af37
--accent-chrome #a3a3a3
--accent-danger #ff3131
Typography Scale
--size-title / 2.20rem The Last Man Singing
--size-subh / 1.15rem Track List
--size-body / 0.97rem Body text and track titles render at this size.
--size-badge / 0.62rem mono Back buttons · Badges · Meta tags
--size-sm / 0.60rem mono Block labels · Breadcrumbs
--size-xs / 0.55rem mono Scroll buttons · Micro labels
Usage Rules

✅ Always use var(--token) — never hardcode hex in component CSS.

✅ Body text: var(--font-body) / Georgia serif.

✅ Labels, badges, mono blocks: var(--font-mono) / Courier New.

✅ Content column: max-width var(--content-width) = 900px.

✅ Body text paragraphs: max-width var(--text-width) = 700px.

❌ Never use #ffffff (white) anywhere in Collabtunes pages.

❌ Never use #00ff00 (green) anywhere in Collabtunes pages.

❌ Never use --accent-danger for decorative purposes. Alert/error/conflict only.