Global Design Rules · Soho Backstage

Source of truth

Admin tools: /backstage/admin/backstage-admin.css
Hub / system pages: /backstage/shared.css (imports admin CSS)
Reference UI: Show Editor — match topbar, pills, panels, footbar

Typography

Display / nav / buttons: Inter, weight 600–800, uppercase, wide letter-spacing
Eyebrows: Special Gothic Expanded One, yellow
Body: Rethink Sans, 14px, line-height 1.5
Labels / meta / footbar: JetBrains Mono

Colour

Background stack: #050505 ink → #0A0A0A → #111111 panels
Text: #F5F5F3 bone; muted #7A7A7A
Accent: #FEE300 yellow (brand mark, primary buttons, active nav)
Status: ok #5dd49c, planned #9A6BF1, warn #ff8585

Navigation brand

Public site: company name text only (e.g. SOHO LIVE STUDIOS) — no yellow square. Links to public home (/music/).
Backstage: yellow square (left) → public home · label text (right) → this tool or section home.
Snippet: admin/_brand-snippet.html

Components

Topbar: 56px, sticky, black + blur, yellow active nav underline
Buttons: pill shape — yellow primary, outline secondary
Panels: 8px radius, 1px border #161616
Footbar: fixed 32px, mono, two-span (left label / right hint)
Planned tools: dashed tile border, reduced opacity

Rule: New backstage tools must link backstage-admin.css and use the standard shell (topbar, main.view, footbar, toast). Do not add a new global stylesheet.