One accent (Zendrop purple). Compact, finance-grade density. Engraved tabular figures. Warm, tight shadows and a single believable plane of light. This kit formalizes and elevates the design system already in .ods-root — it doesn't replace it. Flip the theme (top right) to see every surface in dark.
41 components, all assembled from the tokens above, Phosphor icons, and passing the QA gate. A representative gallery of the building blocks.
This permanently removes Acme Corporation and its history.
The full spec also lives in UI-KIT.md at the repo root. The essentials:
| Token | Light | Dark | Role | |
|---|---|---|---|---|
--background | #fcfcfd | #0a0a0c | page canvas | adjust ⚠ |
--card | #ffffff | #141417 | cards, table, tiles | keep |
--primary | #5952E1 | #8471EE | the one accent | keep |
--border | #e8e8ee | #26262d | hairlines (warm) | adjust ⚠ |
--ring | #8471EE | #8471EE | focus glow | keep |
--success / warning / danger | triplet | lifted triplet | state only | keep |
--label-foreground | #565d6b | #9a9aa5 | overlines | add |
--table-row-hover | neutral 3% | purple 8% | hover = neutral | add |
| Context | Size | Weight |
|---|---|---|
| table cell / dense row | 16 | regular (bold = active glyph) |
| row action · icon button | 16 | regular |
| tab / nav active | 18 | fill |
| KPI · header · primary button | 18–20 | regular |
| empty state / feature tile | 32–48 | duotone |
Default regular @ 16px, color via currentColor. One weight per surface. Retires the heroicons + lucide split.
Build only from the kit. Every surface is assembled from these tokens, the Phosphor icon system, and the component catalog. Reach for the existing ui/src/ui/* component first; build missing ones to the catalog spec.
Read tokens at the semantic / component layer only. Never hardcode a hex, never invent a one-off color, shadow, duration, or radius.
Escalate, do not invent. If you need a value, variant, component, or icon the kit doesn't define — stop and tell the user, with the gap and a proposed value. The kit is the contract; gaps are filled by amending the kit, not by local guesses.
Non-negotiables: one accent (purple, only on selected — never hover) · tabular figures, never in prose · visible focus ring · status = color + icon + text · all numbers through one formatter · reduced-motion honored · Phosphor only.
Surfaces #fbfbfc→#fcfcfd · borders warmed · single radius → 6-tier set · gradient-lit primary button · type retune (24→22 / 28 display) · table hover neutral, purple reserved for selected · warm shadow ink. Applied everywhere, verified at 390 / 768 / 1024 / 1440 / 1920 in both themes before anything is final.
A precision instrument that happens to be beautiful — Stripe-dashboard-meets-Linear density where every number is engraved-sharp and aligned, every surface sits on a believable plane of warm light, and the single purple appears only where something is genuinely chosen or primary. A finance user should stare at a dense table of dollar figures for eight hours and feel the interface is quiet, exact, and on their side.