Delta ships a set of base tokens. They are deliberately neutral: a substrate, shaped so that any design system can be built on top of them. They are not a house style you have to work around, and not a placeholder to be replaced later.
This is also how the agent arrives at a design. It works from the base tokens whether it is inventing a look from your brief, or deriving one from a screenshot or a live URL. The substrate takes the shape of the design system you want.
What a token is
A token is a named decision. The site does not say “teal”, it says action, the one interactive color. It does not say “24 pixels”, it says space-xl.
Each name is a job, not a value. Change what action is worth and every button, link and focus ring follows.
The categories
| Category | Covers |
|---|---|
color |
Semantic color roles |
font |
Four typeface slots |
weight |
The weights your fonts actually ship |
tracking |
Standalone letter-spacing |
text |
The running-copy ramp |
title |
The heading ramp |
space |
Padding, margin and gap |
radius |
Corner radii |
border |
The hairline width |
shadow |
The shadow ramp |
layout |
Container widths and section padding |
breakpoint |
Mobile-first breakpoints |
Color is roles, not a palette
The color names describe jobs. ink is every mark on a normal surface. ink-muted is captions and meta, never body copy. surface-subtle separates one section from the next without a hard edge. action is the single interactive color, and on-action is whatever sits on top of it.
One set is worth understanding: surface-contrast and its -on-contrast marks. That is the inverted band: dark on a light site, light on a dark one. Its ink, muted ink and border switch together as a set. Use one such band per page; two competing bands flatten the hierarchy.
Adding a new color name should be rare. If an existing name covers the job, use it.
Type comes in steps
Two ramps: text for copy, title for headings. Every step carries its size, line height and letter-spacing together. Take the whole step, and do not mix a size from one with the leading from another.
From title-md upward the sizes scale with the viewport, so headings need no breakpoint of their own. Which step maps to an h2 is a decision per site, not a fixed rule.
The four font slots are jobs too: text for running copy, title for headings, display for a hero, mono for code. Any of them can be a serif or a sans. The slot describes where it is used, not what it looks like.
Changing them
“Make the accent a deeper green and warm the neutrals slightly.”
“The headings are too big on desktop. Bring the top two steps down.”
Delta checks contrast when the palette changes and refuses a set where text falls below the readable floor, naming the pair that failed. See how the design system works.
For developers
Tokens become CSS variables as --{group}-{key}, and nested steps as --text-sm-size, --title-lg-leading. tokens.css is generated, so never edit it.
Twelve categories are editable; everything else in tokens.json is locked, including the _meta, _accepts and _desc keys that document each name’s job. update-tokens writes values only.
One palette is stored; dark values are composed in site.css, in one block at the top, and shadows need their own dark values. Breakpoints cannot be custom properties. CSS forbids them in media conditions, so write @media (min-width: 40rem) literally.
Off-scale values derive from a token with calc() rather than a raw number, and colors never derive by calc(). Use color-mix() or add a token.