Design system & spacing
What the design system is
It's the foundation everything else sits on: a set of CSS variables and shared utility classes installed into Bricks when you first set Brickser up.
There are around 70 variables, grouped into six categories you'll see in the Bricks variables panel:
| Category | Controls |
|---|---|
| Site | Page padding, overall width |
| Layout | Section gaps, container widths |
| Spacing | The vertical rhythm scale |
| Typography | Text sizes and their steps |
| Border | Border widths |
| Radius | Corner rounding |
Because every library section references these rather than fixed pixel values, changing one variable reflows the whole site consistently.
Adjusting spacing
Rather than nudging margins on individual sections, edit the spacing variables. A section that felt cramped everywhere gets fixed once.
The scale is deliberately coarse — a handful of steps rather than every value between 0 and 200px. That's what stops a site drifting into fifteen slightly different gaps.
Radius and buttons
The Style panel exposes the two things you'll most often want to change without opening the variables panel:
- Radius — how rounded corners are, from square through Rounded
- Buttons — button shape and styling, applied everywhere at once
Installing or reinstalling
If you skipped the design system during setup, or sections are rendering without their spacing and colour rules, install it from the Style panel and reload the editor.
It installs idempotently — running it again repairs anything missing without duplicating what's already there. Plugin updates refresh the bundle automatically.
The library sections reference these shared classes by name but don't carry copies of them. The bundle is what defines them, which is why an uninstalled design system shows up as unstyled blocks.
Don't rename the variables
Bricks variables are referenced by name. Renaming one in the Bricks panel breaks every section using it, silently. Change the value, not the name.