Every Delta site has one design system. It holds the colors, type, spacing and component styles that every page draws on.
Two modes
A site runs in one of two modes.
- Delta’s seed. Delta’s own design system. Values live in design tokens and
site.css. A new site starts here. - Your own design system. Values live in your stylesheet. Either Delta manages that CSS as your
site.css, or another plugin or build loads it and Delta leaves it alone. In the second case Delta’s ownsite.cssloads after your CSS.
The agent sets the mode with the change-design-system skill, after a snapshot and your confirmation. There is no switch in wp-admin. To switch, or to go back to the seed, see Use your own design system.
What is in it
| Part | Holds |
|---|---|
| Design tokens | The raw values: colors, type scale, spacing, radii. Seed mode only. |
site.css | Element defaults and site-wide patterns. In your own design system, your stylesheet. |
components.css | Styles for your components |
site.js | The site’s JavaScript |
| Notes | Design decisions that outlive a session |
| Components | Markup recipes the agent reuses |
There is one generated file the agent never edits, tokens.css, which turns your tokens into CSS variables. Change a token and it regenerates.
The rule design-system-map under Delta → Context lists the names the active design system uses for each job: page background, second background, links and buttons, text, text on a button, fonts. The agent reads it before it writes CSS. The seed ships one; switching to your own design system replaces it.
base.css and site.css
base.css is the theme’s fixed floor: a reset, the page frame, a navigation reset, the focus outline, the skip link, and styles for soft navigation and the fallback pages. It is not editable, and a theme update replaces it. Your CSS wins over it without extra specificity.
Colors, type, spacing and text rhythm belong in site.css, which belongs to your site and survives theme updates.
The site-wide header and footer scripts sit outside the design system, under Delta → Scripts.
Where to look
Delta → Design shows the design system. It is a view, not an editor: the agent writes these files, you read them and ask for changes. The card at the top names the mode. It has three tabs, Design System, Components and Notes, and a Download button.
Restore Default shows in seed mode when your design pack differs from the theme default. It resets the tokens, notes, CSS and components to the theme default. Templates, pages, fonts, icons and site scripts stay as they are. Delta saves a full snapshot first, so you can undo it.
After a Delta update
A theme update does not change your design pack. When a new Delta brings a newer seed, the agent tells you, and you can ask it to move the site over:
“Upgrade the site to the new seed. Show me what changes first.”
Values you never changed take the new seed’s values. Values you changed or added stay. Nothing is removed, so the names your pages use keep working. Notes, site.js, pages and templates are not touched. Delta saves a snapshot first, so you can undo it. This works in seed mode only. Unlike Restore Default, it keeps your work.
For developers: delta/upgrade-seed with dryRun: true reports the changes and writes nothing. get-design-context reports tokensVersion, seedTokensVersion and, when the site is behind, a seedUpgrade block.
Snapshots have their own screen, Delta → Snapshots.
Asking for changes
“Restyle the site: warmer neutrals, one accent, more generous spacing. Keep the type as it is.”
“Our brand colors are {list them}. Rebuild the palette around them.”
“Turn this card layout into a component so we can reuse it.”
“Write into the design notes that clients’ logos always sit on a light surface.”
The agent reads the existing CSS before writing, because that CSS is the record of what the classes already mean. It prefers an existing name or component to inventing a new one.
Notes
Notes are the constraints you want remembered: a rule about contrast, a decision about when to use a particular section style. The agent reads them at the start of design work and asks before writing to them. If a note contradicts what is built, it raises that rather than picking a side.
What Delta checks on save
When the agent saves a page, a template, or the site CSS and JavaScript, Delta checks for mistakes agents have made before. A new mistake stops the save, and the error names the fix. A mistake that was already stored comes back as a warning, and the save goes through.
- In both modes: webfonts linked from Google Fonts instead of the Fonts screen, a nested
<main>, a rawchwidth onmax-width, and link color rules that would also paint buttons. - In seed mode only: raw palette names such as
var(--white)orvar(--zinc-900)outside the surface blocks. Use a surface class instead.
Delta does not measure color contrast when tokens change. The agent checks contrast when it verifies a design, in each color scheme the site supports.
Undoing a change
Writing site.css or site.js saves an automatic snapshot first. Token and notes changes do not. Before a restyle, ask the agent to save a snapshot, and restore it if the restyle goes the wrong way.
“Save a snapshot called {label}, then restyle the site.”
For developers
The theme seed is design-system/base/; live state is uploads/21press-delta/site/. tokens.json carries the values plus locked _meta, _accepts and _desc keys that describe each name’s job; update-tokens writes values only. site.css, components.css and site.js are written with patch-site-assets or set-site-assets, notes with patch-notes or set-notes, components with patch-component or upsert-component.
Only delta/register-design-system sets the mode: seed or custom, and in custom mode an ownership of delta or external. delta/import-site-css takes a .css file from the Media Library, returns a hash and a report, and makes it the live site.css when you confirm with that hash. It does not change the mode. delta/list-variables lists the CSS custom properties on the site and where each comes from.
Going back to the seed runs delta/restore-seed, then register-design-system with mode: seed, then restore-rule for design-system-map. A custom system writes its own design-system-map as a site override of the rule.
base.css sits in @layer delta.base, so any unlayered CSS wins over it. Composed values are declared once as a custom property in site.css and referenced after, using bare names such as --card-bg, since the --color-* namespace belongs to tokens.json in seed mode.