Delta’s seed design system ships a set of base tokens. They are neutral on purpose: a base shaped so that any design can be built on top of them. They are not a house style you have to work around.
This page applies to seed mode. A site that uses its own design system keeps its values in its own stylesheet and has no tokens. See Design system for the two modes.
The agent works from the base tokens whether it invents a look from your brief, or derives one from a screenshot or a live URL.
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 “8 pixels”, it says space-xs.
Each name is a job, not a value. Change what action is worth and every button, link and focus ring follows.
The groups
The seed has 16 groups.
| Group | Covers |
|---|---|
color | Semantic color roles |
font | Four typeface slots |
weight | The weights your fonts ship |
tracking | Standalone letter-spacing |
text | The running-copy ramp, plus label and code steps |
title | The heading ramp |
space | Padding, margin and gap |
radius | Corner radii |
control | One shared height for buttons and fields, and a small one, so controls on the same row line up |
border | The hairline width |
shadow | The shadow ramp |
z | The stacking order: base, raised, sticky, overlay, modal, toast |
layout | Container widths and section padding |
breakpoint | Mobile-first breakpoints |
duration | Transition lengths: fast, base, slow |
curve | Easing curves: standard for state changes, entrance for elements that arrive on screen |
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. surface-raised is a card or panel. action is the single interactive color, and on-action is whatever sits on top of it.
Adding a new color name should be rare. If an existing name covers the job, use it.
Color works in rows
The values in the token file are the light row. The seed site.css adds two more rows that set the same color names to other values:
- The dark row applies when
data-theme="dark"is on the<html>element. Nothing sets it on its own. See the recipe Turn on light and dark mode. - The contrast row applies inside a section with the class
surface-contrast. It is the inverted band: dark on a light page, light on a dark one.
Nothing inside a section changes when it switches rows, because every element reads the same names. Use one contrast band per page; two competing bands flatten the hierarchy. Since 0.4.0 the seed’s site.css no longer enforces this, so it is advice, not a rule.
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 md upward, in both ramps, the sizes scale with the viewport, so they need no breakpoint of their own. The xs and sm steps are fixed. 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.”
A token change does not save a snapshot on its own. Ask the agent to save one before a bigger change. When you change a color, ask the agent to check contrast in the dark and contrast rows too, because their values are separate.
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. The seed tokens.json is version 0.3.0.
Every value group in tokens.json is editable. The _meta, _accepts and _desc keys that document each name’s job are locked, and a write cannot add a new group. update-tokens writes values only and checks them against _accepts.
The light row lives on :root in tokens.css. The seed site.css holds the dark row on :root[data-theme="dark"] and the contrast row on .surface-contrast and [data-surface="contrast"], with shadows in each row. Inside dark mode the contrast row is the light values again. The surface classes .surface-subtle and .surface-raised paint the second background and a raised card.
Version 0.3.0 removed --color-surface-contrast, --color-ink-on-contrast, --color-ink-muted-on-contrast, --color-border-on-contrast and the --title-2xs-* step. It added --color-surface-raised, --color-action-subtle, --text-label-*, --text-code-*, --control-height, --control-height-sm, and the z, duration and curve groups.
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.