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.