Bricks-Sections/design/design.md

BCW Design System Reference

Three importable files. Import in this order before any templates:

1. bcw-css-variables.json — defines all custom properties
2. bcw-color-palette.json — adds named swatches to the Bricks color picker
3. bcw-global-classes.json — adds shared layout classes

---

How to Import

File	Where to import
bcw-css-variables.json	Bricks → Settings → Custom CSS → Variables → Import
bcw-color-palette.json	Bricks → Settings → Color Palettes → Import
bcw-global-classes.json	Bricks → Settings → Global Classes → Import

---

CSS Variables

All variables follow the pattern var(--variable-name).

Colors

Replace the placeholder grey hex values with the client's brand colors before importing.

Variable	Default	Purpose
--color-primary	#374151	Main brand color. Used on headers, footers, and primary buttons.
--color-primary-light	#9CA3AF	Lighter variant. Use for hover states, borders, or secondary UI.
--color-primary-dark	#1F2937	Darker variant. Use for active states or deep accents.
--color-secondary	#6B7280	Supporting brand color.
--color-secondary-light	#D1D5DB	Light secondary. Good for dividers, subtle backgrounds.
--color-secondary-dark	#4B5563	Dark secondary. Use for secondary hover/active.
--color-tertiary	#F3F4F6	Accent or background fill color.
--color-tertiary-light	#FFFFFF	Lightest tertiary. Usually pure white.
--color-tertiary-dark	#E5E7EB	Slightly deeper tertiary. Card backgrounds, borders.
--color-text	#374151	Default body copy color.
--color-heading	#111827	Default heading color.
--color-bg	#FFFFFF	Main page background.
--color-bg-alt	#F9FAFB	Alternate section background (off-white).
--color-white	#FFFFFF	Forced white — useful for text on dark backgrounds.

Usage example in Bricks: Set any color field to var(--color-primary). When you rebrand, update the variable once and every element using it updates automatically.

---

Spacing

A simple scale from extra-small to 2x-large. Use these in gap, padding, and margin fields.

Variable	Value	Typical use
--space-xs	8px	Tight internal gaps (icon to label, etc.)
--space-sm	16px	Standard element gaps within a block
--space-md	24px	Medium spacing — between content blocks
--space-lg	40px	Section internal gap (header to content row)
--space-xl	64px	Section top/bottom padding
--space-2xl	96px	Hero or large feature section padding

Usage example in Bricks: In any gap or padding field, type var(--space-lg) instead of a fixed pixel value.

---

Typography

Heading and text size scale. Apply these in the font-size field of any text element or via Global Classes.

Variable	Value	Purpose
--h1	3rem	Page-level heading
--h2	2.25rem	Section heading
--h3	1.75rem	Sub-section heading
--h4	1.25rem	Card or block heading
--h5	1.125rem	Minor heading
--h6	1rem	Small label heading
--text-sm	0.875rem	Captions, footnotes
--text-base	1rem	Body copy (default)
--text-lg	1.125rem	Lead paragraph
--text-xl	1.25rem	Large intro text

---

Color Palette

bcw-color-palette.json imports a "BCW" palette into the Bricks color picker. Every swatch references a CSS variable — so updating a variable updates the swatch automatically.

Swatches: primary, primary-light, primary-dark, secondary, secondary-light, secondary-dark, tertiary, tertiary-light, tertiary-dark, text, heading, bg, bg-alt, white

---

Global Classes

bcw-global-classes.json imports shared layout classes. Apply them to container elements in the Bricks panel under CSS → Classes.

Class	Apply to	What it sets
section-container	Outermost section container	flex-direction: column, gap: 40px, margin: 15px top/bottom
section-header	Heading + subtitle block	flex-direction: column, align-items: center, gap: 16px
col-3	3-column row container	flex-direction: row, centered, gap: 32px, stacks on mobile
col-4	4-column row container	flex-direction: row, centered, gap: 24px, stacks on mobile
features-container	Individual feature column (3 or 4 col)	text-align: center, row-gap: 10px
footer-sub-section	Footer column containers	row-gap: 15px

Note: features-container and footer-sub-section are also embedded in the features-3col, features-4col, and footer-columns templates — importing those templates will bring these classes along automatically.