Web app UI
The ladders
| Role | Job | Floor | |
|---|---|---|---|
| --bg / --surface / --surface-2 | Canvas and card grounds | ground | |
| --text-1 / -2 / -3 | Primary, secondary, hints | 4.5 / 4.5 / 3 | |
| --accent | One per view, matte | label 4.5 | |
| --success / --warn / --danger | Status on tints, never alone | 4.5 on tint | |
| --hairline* | Decoration only, never a boundary | none |
Type trio
| Token | Face | Job |
|---|---|---|
| --font-display | Archivo 650 | Short statements, tight tracking, accent full stop |
| --font-sans | Manrope 400-700 | Everything a human reads; body 13-14px, meta 11-12.5px |
| --font-mono | JetBrains Mono | Machines: IDs, codes, microlabels to 10px |
Radius + press
| Surface | Radius | Press |
|---|---|---|
| controls | 10-14 (--r-sm to --r-btn) | sit down · translateY(1px) |
| product cards | 14 (--r-md) | none |
| modals, elevated | 22 (--r-lg) | none |
| sheets | 26-30 | none |
| floating / icon controls | 16 within pill frames | compress · scale(.92-.97) |
| chips | pill | none |
Contract specimens
Buttons
Status
Deployed2 pending1 failingDraft
Card + stat
Quote 2081
Provenance complete. Ready for review.
4.4ms
p95 after the sweep
Segmented + field
As it appears on the quote.