Starter workspace
A nested card proves the surface, hairline and shadow tokens all move with the neutral hue — and that the tint on the badge stays readable.
3 seats
Renews 12 Mar
Every control writes one custom property on <html>. The engine's semantic
tokens, the component sheet and the sample column below all recompute from it — the same cascade your
project gets when you override the primitives. Nothing is saved to the library: this is a preview tool,
and the block it prints belongs in your own token file.
Writes --color-primary-500 and the whole brand ramp.
0% gives a neutral zinc brand colour; the ramp keeps its lightness ladder.
Writes --color-gray-50 … 950: surfaces, text, borders.
Negative pulls the neutrals warm (amber), positive cool (blue), and lifts their chroma.
--radius-base, with sm / md / lg derived at the kit's 0.5× · 1.5× · 2×.
--space-4; every other step is re-scaled from it. Control heights stay 44px.
Multiplies the --text-* ramp only; spacing keeps its own rhythm.
Preview tool: it changes this page only. Copy the block into your project's own token file —
design-tokens/engine.css in this repo, or your app's :root — to make it real.
Buttons
Badges & chips
Card
A nested card proves the surface, hairline and shadow tokens all move with the neutral hue — and that the tint on the badge stays readable.
Table row
| Name | Role | Status | Seats |
|---|---|---|---|
| Ada Lovelace | Owner | Active | 12 |
| Grace Hopper | Admin | Invited | 4 |
Paste this after the engine import in your project's token file. Only the lines that differ from the shipped defaults are printed.
/* … */