The design system, consolidated for code. Four themes, fifteen components, one app shell, eight laws. Switch the accent and the mode in the bar above — everything on this page follows, because nothing here carries a literal. This page scrolls; it is a reference document, and it is the only carve-out from law 1.
A screen that breaks one is wrong even if it looks good.
Twelve steps. It carries the structure of every surface.
Colour reinforces. The word is the message — every chip carries its label.
| Meaning | Tone | Class |
|---|---|---|
| Active · Completed · Paid · Verified | ok | js-chip--ok |
| Pending · Held · Waiting · Auto-expired | info | js-chip--info |
| Payment due · Overdue · Needs you | warn | js-chip--warn |
| Cancelled · Voided · Failed · Refund | bad | js-chip--bad |
| Frozen · Paused | frozen | js-chip--frozen |
| Guest · Day pass | guest | js-chip--guest |
| Expired · Inactive · Closed · Stale | neutral | js-chip |
Class swap on the surface root. Nothing else changes.
One per screen. The only big number. Pattern B opens with it.
Primary is charcoal. Buttons name the outcome and read the same as the toast.
A disabled control states its reason on screen. Gating is allowed; hiding that a capability exists is banned.
Rows are buttons; the whole row is the target. Fit, then page.
The register grid. Out of stock is a hatched, unpressable tile — not a hidden one.
The rule lives at the field, not in a paragraph above it.
Pattern E. Every action opens a real sheet with a preview naming what changes.
The hold releases on its own after 24 hours and the order goes back to placed.
Logical properties only. Figures stay left-to-right inside a right-to-left row.
Shop language, not software language.
| Write | Never |
|---|---|
| Owed to suppliers | Accounts payable |
| Needs you | Action items |
| Waiting parts | Pending fulfilment |
| Nothing in stock yet | No records found |
| Set price and mark ready | Update status |
Buttons name the outcome and read the same as the toast that follows. A toast reports what was recorded, never "success".
A new component is not finished until all five hold.
| # | Rule |
|---|---|
K1 | Tokens. No colour, space, radius or shadow literal. White ink on charcoal and alpha overlays on charcoal are the only allowed literals. |
K2 | Elevation — a real shadow from the three-step scale. |
K3 | Reflection — an inset top highlight so the surface catches light. |
K4 | Micro-interaction — hover on fine pointers, press at scale(.97), visible focus-visible. |
K5 | Accessibility — 44px where pressable, AA contrast, reduced-motion safe. |