Design system
Overview & modules
What the design system emits, and what switching a module off actually removes.
The design system is one generated stylesheet — src/styles/generated/framework.css — holding the tokens a site is built out of and the defaults every element starts from. It is edited under Design, and it is modular: eleven modules, each one block of that sheet and one screen in the rail, switched together.
The master switch
The whole system can be off. A project that wants to write every value by hand switches it off and the sheet stops being emitted at all — nothing else changes, because nothing in the emitted markup depends on it.
That is a different question from switching a module off, which is the next section.
The eleven modules
| Module | What it emits |
|---|---|
| Variables | nothing — your variables have their own sheet either way; this is the screen |
| Fonts | nothing — installed families stay installed and keep loading |
| Colors | --{role} for every active colour, its shades and transparencies, and the page background |
| Typography | --text-*, --h1 … --h6, --font-*, the running-text tokens, the root size, the h1–h6 rules |
| Spacing | --space-*, --section-space-*, --content-gap, --container-gap, --grid-gap |
| Buttons | the --btn-* tokens, the button shape rule, the paint rule and every variant class |
| Elements | one rule per element kind — what a section, a heading or a link looks like by default |
| Layout | --content-width, --content-width-safe, --gutter |
| Borders | --border-width, --border-light, --border-dark, --border, --border-strong, --radius-s/m/l |
| Shadows | --shadow-s, --shadow-m, --shadow-l |
| Motion | --motion-duration, --motion-ease, --motion-distance, --motion-stagger |
Off means the block is not emitted and the screen leaves the rail. A site that writes its own depth is not reading past a Shadows page it will never open.
Nothing is deleted. The values stay in the project document, so switching a module back on brings your settings back exactly as they were.
Loose ends
Modules read each other's tokens: Typography reads Colors, Buttons reads Colors, Elements reads Colors, Typography, Spacing and Layout. Switch off something another module is spending and the Modules screen lists it under Loose ends.
It is reported, not enforced. A var() you are about to declare by hand is a legitimate thing to be halfway through — the app tells you and gets out of the way.
Zero specificity, on purpose
Every generated element rule is wrapped in :where():
:where([builder-data-element="section"]) {
display: flex;
flex-direction: column;
padding-block: var(--section-space-m);
padding-inline: var(--gutter);
}:where() contributes nothing to specificity, so any class or id you write beats the design system without !important and without depending on source order. This is the ACSS idea: generous defaults that never fight you.
And because the selector is the element attribute, structural styling never depends on a class you might rename.
Where the screens live
Design's rail is grouped rather than flat:
- Foundations — Variables, Fonts, Colors, Typography, Spacing
- Components — Buttons, Elements
- Frame — Layout, Borders, Shadows, Motion
- Modules — the rail again, with switches on it
Grouping is what turns eleven pages into an overview. The Modules screen is the one screen that can never be switched away.