The Quiet Workspace design system

Every surface in Provenance is drawn from one stylesheet, app/static/quiet.css — the Quiet Workspace design system, reverse-designed from attio.com (real captured values, not guessed). It is a light, near-monochrome system on a pure-white canvas with near-black Inter Display headings and a cool-grey scale. The governing rule: colour appears only in product data. The chrome stays quiet so the verdicts, the ledger lights, and the metrics are the only things that carry hue.

One token set

There is a single :root token set. The structural greys carry the layout: --ink (near-black headings), --slate (body text), --muted (secondary text), and --hairline (the 1px borders that divide everything). Colour is reserved for data through a small named palette — --g green (verified/pass), --a amber (allude/simulated), --r red (hold/blocked) — plus exactly one accent, --signal, used sparingly for primary actions and active states. Type is Inter Display for headings, Inter for UI, Newsreader for the occasional pull-quote; radii and the calm cubic-bezier(.2,0,0,1) easing are tokens too.

The core components

Each component is defined once and composed everywhere:

• q-card — the bordered, soft-shadowed content surface (with a .hover lift variant).
• q-stat — the metric card: uppercase label over a large Inter Display figure.
• q-panel / q-table — the record panel and its hairline-ruled data table.
• q-pill — the tinted, dotted tag that carries a verdict colour (green/amber/red/signal).
• q-tabs — the sliding-underline tab switcher.
• q-sec / q-sim / q-kpitree — the shared dashboard primitives: a compact uppercase section divider, the amber “this is synthetic” marker chip, and the baseline→current→target KPI-tree.
• q-mono — the tabular-figures monospace role for numeric arrays and metrics, so layout stays stable.

Pages compose, never restyle

The contract is explicit in the spec: pages compose components, never restyle. No page sets its own palette or rogue max-width outside the tokens, and a UI-consistency harness asserts it — every navigable route is rendered and its computed palette must be a subset of the token set, with one type family and token-driven radii. The payoff is the WWDC26 Consistency principle in practice: the shared dashboard primitives (q-sec / q-sim / q-kpitree, added in quiet.css v1.9) are used by both the KPI control tower at /demo/monitor and the Assurance dashboard at /assurance — one definition, not two, so the same surfaces look and behave the same everywhere.

Charts are dependency-free inline SVG

Every chart is hand-rendered inline SVG by app/charts.py — no CDN, no JavaScript chart library — so each surface stays fully offline. The charts reference the design tokens directly (for example style="fill:var(--g)") rather than hard-coding colours, so they stay on-brand and adapt with the system. Crucially, the helpers take already-real values and invent nothing: wilson_ci computes confidence intervals from real counts so a number is never hand-typed into a template — the Constitution's Article I, enforced in the chart layer.

Principles applied — light only

The system applies the WWDC26 Principles of great design and the Material 3 Expressive layer on the light Attio base: spring-physics motion, scroll-reveal, focus-visible rings, a global reduced-motion guard, and a light “Spatial Liquid Glass” frosted-nav treatment. The dark Carved-Hardware canvas was deliberately skipped — the product is light-only by decision, matching attio.com, which does not follow OS dark appearance. The surface/on-* token indirection is kept (at clean light values), but there is no prefers-color-scheme dark override.