DS · v20.22
Audio Lounge — Design System
Internal · Eng + Design

Audio Lounge is one studio with two front doors. The admin cockpit is the control room. The public site is the live room. They share an 8 px grid, monospace for machine-speech, and a 3 px rule for "armed" state — nothing else. The boundary between them is a hard cut by design. This document reads bridge-first: what crosses the cut, then each theme under load, then the cut itself.

Read order · 01 bridge · 02 admin · 03 public · 04 boundary · 05 changelog
01 · Bridge

Ten primitives. Two voices.

If the system works, every primitive on this page feels like the same idea rendered twice — once for people reading numbers, once for people making records. If any row feels like two different products, that's the bug.

Role
Admin · control room
Public · live room
01
Section mark
"Named region starts here."
Credit & Lending DSCR 2.14x · IC pending
3px rule · 11px · +1.5 tracking · gold
— The Rooms
Four rooms. One ethos.
em-dash eyebrow · weight carries the accent
02
Live status
"Something is happening right now."
LIVE · 09:12 UTC
Outlined · timestamp · semantic green
Recording now
Unframed · pulsing coral · plain verb
03
Primary action
"The thing we want you to do."
5px radius · named operation
Book the room
100px pill · imperative invitation
04
Headline number
"The one metric you came for."
FCFE · TTM
$484,241
▲ +12.4% QoQ · CALC
Dollar-cent · source-tagged · signed delta
Since 1976
2,184 +
sessions tracked
Round · unverified on purpose · legend
05
Display line
"The biggest thing on the page."
Financial Health · Q1 2026
Geist 22/1.15 · -.4 tracking · sentence case
Where culture meets craft
Archivo Black · gradient once · caps
06
Secondary action
"The other thing, quieter."
Outlined · neutral · no caps
Hear the room
100px pill · border matches primary shape
07
Metadata line
"What the machine wants to tell you."
fin_engine.revenue_mix · computed 09:12 UTC · CALC
Module · timestamp · provenance tag
Studio B · 48 kHz · 24-bit · 2 hr minimum
Room · spec · terms
08
Category label
"Which bucket this belongs to."
CALC
5 fixed tags · OBS CALC LIVE ASS PROJ
Founder
Tier badge · outlined pill · brand hue
09
List row
"A thing in a list of things."
Studio A · tracking$220/hr68% util
Tabular · alternating row tint · right-aligned num
Studio A · Tracking $220 / HR
Editorial · ruled separator · em-dash
10
Empty state
"Nothing here yet, on purpose."
No recommendations · model idle · next run 09:15
Dashed border · reason · next action
The booking page is quiet this week. Say hello if you want to change that.
Prose · inline CTA · no iconography
02 · Admin

Cockpit, under load.

Three plates, increasing density. Gold appears only where something is armed, measured, or recommended — never as decoration. Every numeric value ships with a provenance tag, so a reader can tell what's observed vs. modeled before they ask.

PLATE 02.1 /dashboard · default load · 1440× Real tokens · no retouch
Audio Lounge · Dashboard
LIVE
17 APR 2026 · 09:12 UTC
FCFE · Trailing 12 Months
$484,241
+12.4% QoQ · all covenants within band
DSCR
2.14x
+71% over floor
CALC
Utilization
68%
+4pp WoW
LIVE
Leverage
1.6x
-54% of cap
CALC
Default P
1.8%
Merton · 1Y
CALC
Runway
14mo
assumes mix hold
ASS
Credit & Lending DSCR comfortable · liquidity tightening · 1 watch item
3 of 7
Revenue MixHIGH
Catalog streaming concentration crossed 42% of gross revenue this week.
Accelerate Studio B and Studio D bookings — 6 artists in pipeline.
fin_engine.revenue_mix · last computed 09:12 UTC
Covenant WatchMED
Min-cash covenant headroom narrowed from $180k to $124k in 14 days.
Defer Studio C renovation draw to May 1. Model attached.
covenants.min_cash · next test Apr 30
Signal present · 3px rule on region only
Hero: 56/1 · Geist Mono · gold glow .15
Tag opacity .55 → 1 on hover
Urgency color replaces left-rule gold
PLATE 02.2 /dashboard · bookings table · dense load Row-alt tint 1.8% · zebra

Studio Bookings · Next 14 days

42 rows · $68,420 booked · 3 pending hold
Date Artist · Project Room Hours Rate Booked Status
18 AprMarla Tenn · LP overdubsStudio B12$140.00$1,680.00Confirmed
19 AprHorizon Kid · single trackingStudio A8$220.00$1,760.00Hold
20 AprDella Finch · vocal compStudio C4$95.00$380.00Confirmed
21 AprSaint Lumen · live-to-tapeStudio A10$220.00$2,200.00Confirmed
22 AprNye Alder · mixdownStudio D6$110.00$660.00Tentative
23 AprIKO Trio · EP pickupStudio B9$140.00$1,260.00Confirmed
Panel-hdr: 4% gold wash
Numbers right · labels left · always

Color in-situ

Admin uses four neutrals, one gold, five semantics. They only appear like this — as working surfaces — never as a chip wall. Teal exists in tokens as a reserved chart color; treat it as out-of-system for UI.

PLATE 02.3 Neutral stack · elevation --bg → --bg4
--bg
#050810
Page.
Never content.
--bg2
#0a0f18
Panel.
Most content lives here.
--bg3
#111820
KPI card.
Elevated surface.
--bg4
#171f2b
Input · hover.
Ceiling.
PLATE 02.4 Semantics · in context Each hue locked to a role
GOLD
Signal present
Armed regions, CTAs, headers.
GREEN
Positive · observed
Confirmed, in-band, OBS tag.
BLUE
Calculated
Model output, CALC tag.
PURPLE
Assumption
User-set, ASS tag.
RED
Breach · loss
Covenant break, downside.

Type · at real size

Geist · Geist Mono
$484,241
Geist Mono · 56 / 1 · 700 · -1.5
Financial Health · Q1 2026
Geist · 22 · 700 · -.4 · sentence
FCFE · TRAILING 12 MONTHS
Geist · 16 · 700 · +2 · gold · upper
CREDIT & LENDING
Geist · 13 · 700 · +1.5 · panel head
Catalog streaming concentration crossed 42% of gross revenue this week.
Geist · 14 / 1.6 · body
fin_engine.revenue_mix · computed 09:12 UTC
Geist Mono · 10 · +.12 · meta
03 · Public

Live room, under load.

Three plates, same escalation. The amber→violet gradient exists once per page, on the display headline. Used anywhere else it reads as trend, not brand. Every headline is Archivo Black because a studio you can walk into should have weight on the page.

PLATE 03.1 / · home · fold Gradient: one appearance only
Audio Lounge
RoomsRosterStreamBook
— Est. 1976 · Four rooms · One ethos

Where culture
meets craft.

A working studio since '76. Neve 1073s, a Studer A800 calibrated monthly, and a couch that has held more Grammys than most offices.

Since
1976
Rooms
04
Sessions
2,184+
Grammys
11
Em-dash eyebrow · Space Mono 10
Gradient appears once · here
Pill radius 100px · both buttons match
PLATE 03.2 /rooms · listing · one accent per card Status hues only
— The Rooms

Four rooms. One ethos.

Studio A
Tracking

Neve 1073 sidecar, Studer A800, the room Marla cut her second record in.

$220 / HR Open
Studio B
Overdubs

Tighter, drier, closer. Iso booth, two-mic kit, a floor that stays put.

$140 / HR Booked · Thu
Studio C
Vocal

One chair, one window, a Sony C-800G and a bottle of water.

$95 / HR Recording
Studio D
Mix

SSL 4000G, ATC 110s, the softest lights in the building.

$110 / HR Open
Display MD · Archivo Black 40
Violet · community/booked
Coral · live in room now
PLATE 03.3 /pricing · tier cards · v20.22 rule: one accent per card Fixed from 3-color leak
Founder
$0 / mo

For anyone who wants to say they were here first.

  • · Monthly newsletter
  • · Room availability alerts
  • · Community Discord
Sign up
Patron · Popular
$24 / mo

Hear the records before anyone else does.

  • · Early listening: 30 days before release
  • · Session photo archive
  • · 10% off studio bookings
Become a patron
The Circle
$120 / mo

Name on the wall. Seat at the table.

  • · Everything in Patron
  • · Quarterly listening parties in-studio
  • · Direct line to founders
Join the circle
One accent per tier: violet
Amber — only the popular tier
Mint — top tier

Color in-situ

Four plum neutrals in an elevation stack. Four named accents. Each accent carries exactly one meaning on the storefront — do not rehome them.

PLATE 03.4 Neutral stack · --al-bg → --al-raised 8% step between layers
--al-bg
#0E0D12
Page.
--al-surface
#161520
Card.
--al-elevated
#1E1D28
Nav · hover.
--al-raised
#28273A
Input · modal.
PLATE 03.5 Named accents · locked meanings Do not rehome
AMBER
Primary
Prices, CTAs, gradient start.
VIOLET
Community
Founder tier, booked state.
CORAL
Live now
The dot pulses. Only then.
MINT
Available
Open rooms, top tier.

Type · at real size

Archivo Black · Manrope · Space Mono
Meets craft.
Archivo Black · 72 / .9 · -.025 · caps
Four rooms.
Archivo Black · 40 / 1 · display MD
A working studio since '76. Neve 1073s, a Studer A800 calibrated monthly.
Manrope · 17 / 1.55 · lead
Tighter, drier, closer. Iso booth, two-mic kit, a floor that stays put.
Manrope · 15 / 1.55 · body · --al-sub
— EST. 1976 · FOUR ROOMS · ONE ETHOS
Space Mono · 10 · +.12 · eyebrow
$220 / HR · 48 KHZ · 24-BIT
Space Mono · 11 · +.1 · spec line
04 · Boundary

The hard cut.

Crossing between the storefront and the cockpit is a full-page navigation. No shared header. No crossfade. No "you are now in the admin" banner. The cut is the feature — different people, different voices, different rooms.

— PUBLIC
/ · /rooms · /pricing
  • Archivo Black display
  • Amber primary · violet secondary
  • 100 px pill buttons
  • Space Mono for machine-speech
  • Gradient: once per page
  • 8 px grid
Hard cut · no transition
— ADMIN
/dashboard · /credit · /ops
  • Geist UI · Geist Mono numbers
  • Gold primary · 5 semantics
  • 5 px radius buttons
  • Geist Mono for machine-speech
  • 3 px rule on armed regions
  • 8 px grid
Persists across cut
Auth session
prefers-reduced-motion
prefers-color-scheme
Resets on cut
Scroll position
Open panels · sub-tabs
Filter chips · command palette
Forbidden across cut
Shared global nav
Cross-theme toasts
"You are now in…" banner

Enforcement. Separate Next layout trees. Separate CSS entry points. A lint rule blocks --al-* in /dashboard and --gd in /website. If you are building a feature that wants to span both surfaces — onboarding, referral, notification — you are building two features. Link them by deep link, not by chrome.

05 · v20.22

What this version changed.

Slop cleanup
Dropped colored left-borders on /my cards. One accent per pricing tier instead of three leaking simultaneously. Removed hero-card ::before gradient rail.
New utility set
.al-card, .al-card-hero, .al-eyebrow, .al-display-sm/md/lg, .al-btn-primary, .al-btn-ghost, .al-tier-badge, .al-gradient-text — and a fallback @supports not (background-clip: text) so the display line never ships invisible.
Tag opacity
Admin KPI tags (OBS/CALC/LIVE/ASS/PROJ) now sit at .55 opacity and lift to full only on hover. The metric is the thing, not the tag.
Focus ring
Global 2 px amber on public surfaces, 2 px gold on admin. Neither overrides the element's border-radius.
Deferred
Light-mode parity on public. Tier-badge iconography. Unified empty-state illustration set. Command-palette visual pass.
Audio Lounge · Design System v20.22 · 17 APR 2026