Why Are These Two Features So Underrated?
When Bricks 2.2 shipped, all the attention went to “new components / performance.” But Color Manager and Style Manager are the hidden gems that actually change your site-building workflow — they turn Bricks from a “page editor” into a “design system tool.”
Color Manager: Global Color Management
What It Is
Bricks 2.2’s Color Manager lets you manage colors site-wide from one place, instead of hardcoding color values into every element:
- Define a color palette (brand / neutral / functional)
- Name your colors semantically (primary / accent / text-muted…)
- Reference them globally — change once, update everywhere
How to Use It
- Bricks Settings → Theme Styles → Colors
- Add color groups: brand colors (primary/secondary), neutrals (text/background/border), functional colors (success/warning/error)
- Give every color a semantic name (like
--color-primary) - When styling elements, pick colors from the palette instead of typing hex values by hand
Why It Matters
- Consistency: one unified color system — no more “three different blues”
- Fast rebranding: change the primary color once, the whole site follows
- Design-system ready: color tokens are the core of any design system, and Bricks now supports them natively
Style Manager: Style Tokenization
What It Is
Style Manager stores reusable “tokens” for the styles you use all the time:
- Type scale (heading 1/2/3, body, small text)
- Spacing scale (xs/sm/md/lg/xl)
- Border radius, shadows, border styles
How to Use It
- Bricks Settings → Theme Styles → Style
- Define the typography scale: h1–h6, body, and blockquote font size/weight/line-height
- Define spacing variables:
--sp-1through--sp-10 - Use tokens directly in elements — never fill in raw values
Why It Matters
- No more magic numbers: no more orphaned values like
padding: 23px - Responsive-friendly: tokens can be defined per breakpoint (60px desktop / 24px mobile)
- ACSS-compatible: Style Manager tokens play naturally with Automatic CSS’s variable system
In Practice: Build a Design System with Color + Style Manager
1. Build the color palette (brand / neutral / functional) → Color Manager
2. Build the type scale (headings / body / blockquote) → Style Manager
3. Build spacing / radius / shadow tokens → Style Manager
4. Use only tokens when building components → consistency, automatically
5. Sweep the whole site → not a single magic number leftThe result: your Bricks site is “design-system-driven” from day one, not “styles adjusted on a whim.”
What Changed vs. the Old Way (If You’re Still on an Older Version)
| Scenario | Old approach | 2.2+ approach |
|---|---|---|
| Rebranding colors | Search the whole site for hex values and replace | Change one value in Color Manager |
| Consistent heading sizes | Fill in sizes on every element | Use typography tokens |
| Consistent spacing | Whatever feels right that day | Use spacing tokens |
| Responsive spacing | Set values per breakpoint by hand | Tokens defined per breakpoint |
Upgrade Recommendation
If you’re still on 2.0/2.1: upgrade to 2.2+, then spend half a day migrating your existing site’s colors and styles into the Managers — a one-time investment that pays off on every page you build afterward.
Migration tip: you don’t have to do it all at once. Use tokens on new pages and migrate old pages incrementally — the two can coexist just fine (tokens are additive and don’t break existing values).
Related Reading
- [Bricks 2.3 Update Review](2.3 update link) (new features like AI-to-HTML paste)
- Bricks Installation & Basic Setup (fonts / performance settings)
Bricks’ evolution is clear: from “drag-and-drop editor” to “design system tool” — Color Manager and Style Manager are two key steps on that road, and the earlier you adopt them, the sooner you benefit.
