Design system
Element defaults
What a section, a heading or a link looks like before anyone styles one.
The Elements module answers one question per element kind: what does this look like before anyone styles one? Those answers are emitted as one rule each, selected by the element attribute.
:where([builder-data-element="heading"]) {
font-family: var(--font-heading);
font-weight: var(--heading-weight);
line-height: var(--heading-line-height);
letter-spacing: var(--heading-letter-spacing);
color: var(--heading-color);
margin-block: 0px;
text-wrap: balance;
}The buckets
| Bucket | Defaults worth knowing |
|---|---|
| Section | display: flex, column, padding-block: var(--section-space-m), padding-inline: var(--gutter) |
| Container | max-inline-size: var(--content-width), margin-inline: auto, gap: var(--container-gap) |
| Flex Div | row, wrapping, gap: var(--space-m) |
| Div | a plain block |
| Figure | column, no margin |
| Heading | family, weight, line height, letter spacing, colour, text-wrap: balance |
| Text | family, font-size: var(--text-size), line-height: var(--text-line-height) |
| Link | colour, underline, offset, transition — plus hover, focus-visible and visited |
| Button | the shape, in --btn-* tokens — this bucket belongs to the Buttons module |
| Image | max-inline-size: 100%, block-size: auto, object-fit: cover |
| SVG | inline-size: 1.5rem, flex-shrink: 0 |
| List | column, gap, indent, marker |
Each field can be changed or emptied. An empty field emits nothing — that is how you take a default away rather than override it with something else.
States
Some buckets carry states, and each state is its own rule:
:where([builder-data-element="link"]:hover) {
color: var(--primary-hover);
}Links have hover, focus-visible and visited. Buttons have hover, active and disabled. They are edited on the same screen, under the element they belong to.
Modules own buckets
The button's shape belongs to the Buttons module, not the Elements module, because it is written in --btn-*. Switch Buttons off and the shape rule goes with it. Everything else here belongs to Elements, which reads Colors, Typography, Spacing and Layout — switch one of those off and the Modules screen will tell you which tokens are now undeclared.
When to use this instead of a class
Use element defaults when the answer is "every one of these on the site". Use a class when the answer is "this one, and the ones like it".
The generated rules have zero specificity, so a class always wins — you are setting the floor, not fighting for the ceiling.
Nothing has two homes. The page background lives in Colors, the content width in Layout, the text colour in Typography. If you are looking for a value here and cannot find it, it belongs to the module that owns that concept.