Design reference. The token values on this page are
normative. The sample rows, names and money amounts rendered beside them are
illustrative specimens — they are not data from any venue.
The single component vocabulary shared across Floor, Bookings, Door, Closeout, Outcomes and Promoter surfaces. Each sample below is live and carries its usage rule as caption text — treat that caption as the component's acceptance spec. Dark-only, red-free, hub colors semantic. Money renders from integer cents; take-rate is a ⚑ placeholder.
A
Status system
DOCUMENTED FIRST
The ratified, red-free answer to "what color is this state?". Booking lifecycle chips plus the three-weight amber alarm ladder. This is the most load-bearing decision in the system — everything else defers to it.
Lifecycle status chips160ms color-only · position never moves
HeldConfirmedSeatedGoodClosedCancelled
SpecHELD = dashed MID chip + pulsing hollow dot (awaiting deposit). CONFIRMED = cyan. SEATED / GOOD = mint #34D399. CLOSED = gray. CANCELLED = gray with line-through. State changes animate color only over 160ms — the chip never changes position or size.
Amber alarm ladder — three weightsoutline -> tinted fill -> solid
△Attention⊘Failed⚑Blocking
SpecEscalate by weight, never by hue. W1 outline (attention) -> W2 tinted fill rgba(251,191,36,.12) (failed) -> W3 solid amber, dark text (blocking — max one per view). Negative money is amber and parenthesised.
NeverRed is never used — not for errors, declines, or destructive actions. Alarm severity is carried entirely by amber weight. This is the rule the whole system is built to protect.
Token referencesemantic -> hex
held · mid
confirmed
seated · good
closed · cxl
alarm · amber
UseThese five are the only status colors. Hub wayfinding colors (E) are separate and never stand in for status.
B
Primitives
Interactive controls and labels. Buttons carry live hover and press. Destructive paths are amber, never red — consistent with A.
Buttons120ms ease-out · press translateY(1px)
SpecPrimary = solid cyan, one per context. Secondary = glass + hairline. Ghost = text only. Destructive is amber-outline, never red — it reads as caution, not danger. Big variant (16px/500, full-width) for NIGHT density targets >=48px (host stand, door).
Text inputSURFACE-2 · focus -> cyan border
SpecFilled on SURFACE-2 #111524 with a chrome hairline; label is a mono kicker above. On focus the border goes cyan (matching the focus-visible ring). Placeholder is LO.
SpecMenlo, uppercase, tracked .16-.28em. Segments joined with a middle-dot · flanked by double spaces — never a slash. Smaller labels track wider.
Attribution chip2px hub-color left rule + mono label
Promoter · Mara K.venue-link · mkt
Guest · directwalk-in · guest
Ops · host standmanual seat · ops
Spec2px hub-colored left rule + mono label naming the source path. Hub color is semantic: Marketing amber, Guest mint, Ops violet (E). Attribution is wayfinding, not status.
C
Data display
Flat SURFACE-1, no backdrop-filter — anything past ~8 data points drops the glass. All money renders from integer cents; take-rate stays a ⚑ placeholder (venue reporting only, never marketing UI).
Ledger rowflat · money = Menlo from cents
Date
Guest · table
State
Tab
Take ⚑
07-21
Beaulieu· T-09
Closed
$1,500.00
⚑
07-21
Okonkwo· T-14
Seated
$842.50
⚑
07-21
Vance · T-03
Cancelled
($300.00)
—
SpecGuest name HI/regular, meta mono/LO, numbers right-aligned Menlo. $1,500.00 is rendered from 150000 cents. Negative amounts are amber and parenthesised. Cancelled rows strike the guest cell. Take column is a ⚑ placeholder — never a live rate in operator UI.
Split-pay dotsfilled mint · hollow gray · amber
DEP3 LOCKED · 1 PENDING · 1 FAILED
SpecFilled mint = share locked. Hollow gray (pulsing) = pending. Amber = failed. A leading DEP badge marks the deposit share. Failed shares escalate to the D blocking banner.
Stat callout2px left rule · Light display
$18,420
Total tab · tonight
92%
Show-up rate
⚑
Take · rate placeholder
SpecBig Light-weight value over a mono kicker, 2px left rule. Rule color is semantic: cyan (neutral headline), mint (good), amber (attention or ⚑ placeholder). Money is Menlo from cents.
Metric barscategorical = fixed 7-slot PC palette
Taste82
Identity64
Crews71
Venues58
Bookings90
Revenue47
SpecSingle-series bars use ELECTRIC #60A5FA. Categorical bars use the fixed 7-slot PC palette in locked order (taste · identity · crews · venues · bookings · revenue · marketing) — the order never changes so a color always means the same pillar.
D
Containers
Glass is reserved for chrome — KPI heroes, modals, headers. Empty states and the blocking banner set the tone when something is missing or wrong.
Glass KPI cardglass fill .05-.08 · blur 12px · chrome only
Bookings tonight
24
Total tab
$18,420
Take
⚑
⚑RATE PLACEHOLDER
Post-visit sent
18
SpecGlass (rgba(255,255,255,.05-.08) fill, .12 hairline, 12px blur) — permitted only for chrome heroes. The take card shows ⚑ + "RATE PLACEHOLDER", never a computed rate. Money from cents.
Empty statedashed border · night-one default
○
No arrivals yet
NIGHT 1 · ALL TABLES AVAILABLE
SpecDashed chrome border, hollow glyph, plain-language line, mono status subline. Used for night-one and zero-data panels; money zeroes read as $0.00, never blank.
Modal shellscrim + glass · 200ms panel
MINT A LINK · STEP 1 OF 2
Attribute this link
Pick the promoter and an optional campaign. The minted venue-link carries this attribution through checkout.
Surface behind scrim
SpecDimmed blurred scrim over a glass panel; panel rises 8px->0 over 200ms. Kicker · title · body · right-aligned actions (ghost cancel + primary confirm). Esc and scrim-click close.
Blocking bannersolid amber · dark text · max one per view
⊘BLOCKING · T-09 Beaulieu — 2 of 5 split-pay shares failed. Table held pending payment.
SpecThe heaviest amber weight (A W3): solid amber ground, dark text. Reserved for a hard block a human must clear — max one per view. Still amber, still never red. Dark-text buttons invert inside.
E
Navigation
Wayfinding chrome. The nav-rail active state uses a violet rule; hub colors label who owns a path (Guest / Ops / Marketing) and appear only on rails, left-rules and attribution chips — never as status.
Nav-rail itemactive = violet left rule + count
Floor 24
Bookings 31
Door 18
Closeout —
SpecMono uppercase items with right-aligned counts. Active carries a 2px Ops-violet left rule + glass wash; hover lifts color only. Click a row to move the active state (live below).
Hub rulesGuest mint · Ops violet · Marketing amber
Guest
#34D399 · walk-in · direct
Ops
#A78BFA · host stand · manual
Marketing
#FBBF24 · venue-link · promoter
SpecSemantic wayfinding colors for rails, left-rules and attribution chips only. Marketing amber and alarm amber share #FBBF24 — disambiguated by position (a left-rule vs an alarm chip), never confused with status.
View headerglass · title + mono kicker · KPIs right
OPS CONSOLE · LIVE
Floor
24
Seated
$18,420
Tab
⚑
Take
SpecGlass header: view title (Light) over a mono kicker on the left, up to three KPIs right-aligned. Money from cents; take stays ⚑. One header per view.