Design system
The primitives the demonstration console is built from, and the tokens they reach colour through. Values come from docs/requirements/design-system-conveyancer.md §4.6 — this page renders them, it does not define them.
Role tokens
Components style through these only. The palette exists to define them once.
--bgPage ground--surfacePanels, cards--sunkenResponse bodies--borderHairline structure--brandPrimary action--verifiedA claim that held--attentionDeadline approaching--criticalA refusal
Type
Serif is the firm speaking; sans is the system reporting. Never a status or an amount in the serif.
- --t-display · 46/52 · serifThe isolation is in the database.
- --t-h1 · 33/40 · serifPage title
- --t-h2 · 27/34 · sansSection heading
- --t-h3 · 22/30 · sansCard title
- --t-body · 16/26 · sansDefault body copy, set to a 65-character measure.
- --t-small · 14/22 · sansSecondary and help text
- --t-label · 12/16 · +0.06emEyebrow label
- --t-mono · 15/24 · dataM-2026-000001 · 019ffff8-40fe-79ff
- --t-figure · 30/36 · data$612,480.19
Status
Colour plus glyph plus label, always — never colour alone. Each survives greyscale and a projector.
Buttons
Three variants and a pending state. Every mutation shows that it is working.
Panel
Hairline structure. Elevation is used sparingly — this is a document product.
Neutral panel
The default surface.
Brand panel
Used for the firm that owns the record.
Response
The service's answer, verbatim. Status, duration, body — never reworded.
{
"reference": "M-2026-000001"
}{
"error": "not-found"
}Tabs
Alternative readings of one thing. A real tablist, and selection is weight plus a filled rule — never colour alone.
Data table
Stored rows, with their physical address. The columns are identical across tabs so a row can be matched between two readings; the left rule marks which tenant owns a row, and the tint marks a row the other reading could also see.
| tenant | id | reference | property_address | ctid |
|---|---|---|---|---|
| firm-a | 01a0012d-2743-7ffa | M-2026-000001 | 12 Flinders Lane | (0,1) |
| firm-b | 01a0012e-9c11-7a04 | M-2026-000001 | 400 George Street | (0,2) |
Both rows carry reference M-2026-000001, which is the point: the reference is unique per firm, so two firms holding the same one is correct rather than a collision.
Empty
Explains what it is and offers the action.
No matters. This firm holds none — which is also what the other firm sees of it.