UI Lab

Typography

Canonical type ramp and section labels — the HQ dialect vocabulary for operational UI.

Foundations · fixture-only

List and panel section headers

Use SectionLabel (or typeRamp.sectionLabel) for 11px uppercase meta — never 18px marketing H2s in product chrome.

Workshop: ObjectList filters, inspector tabs, dashboard tile groups.
Avoid: Inventing ad-hoc text sizes — compounds already encode the ramp.

Fixture data only — behaviour matches production chrome

Record detail title block

RecordHero for detail page headers with caption and inline actions.

Workshop: /objects/[type]/[id] hero row — matches DetailSurface fixtures.

Fixture data only — behaviour matches production chrome

Meta lines and tabular numbers

MetaCaption for timestamps and counts; tabular prop for aligned numeric readouts.

Workshop: ListSurface footers, proof lines, ARR and metric captions.

Fixture data only — behaviour matches production chrome

Type ramp

Shared class strings from typeRamp — prefer SectionLabel and MetaCaption compounds over raw tokens.

Section

sectionLabel — PIPELINE

sectionSubtitle — Prioritised by operator

Record

recordTitle — Acme Corp

recordEyebrow — Customers / Acme

Meta

metaCaption — Updated 3 minutes ago

metaCaptionTabular — ARR $1,240,000

SectionLabel

Uppercase section headers — 11px meta, not 18px H2s.

Pipeline

Your day

— Prioritised by operator

MetaCaption

Muted meta lines; tabular prop for numeric columns.

Updated 3 minutes ago · 12 records

ARR $1,240,000 · +4.2% WoW

RecordHero

Detail page title block — display-weight but compact, not a marketing hero.

Acme Corp

Enterprise · 42 orders

Operational voice

DurationLabel, ChangePill, and ProofLine live under Agent fixtures — not general typography.

See Agent → Transcript for streaming meta compounds