Spencer
f57034e40d
Sections: - Add announcement-bar, cards, features-3col-cards, hero-card-homepage, hero-card-page, hero-slider - Rename content-image-right → content-image (image-left layout, better mobile stacking) Design system: - Add cards-grid global class (flex-wrap for fluid wrapping card grids) - Update feature-card with responsive _widthMax constraints (33%/50%/95%) - Document Bricks Style Manager spacing setup in design.md Headers: - Fix header-with-cta mobile hamburger positioning — wrap nav+button in block element with row-reverse on mobile Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
125 lines
7.2 KiB
Markdown
125 lines
7.2 KiB
Markdown
# 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
|
|
|
|
---
|
|
|
|
## Bricks Style Manager — Spacing
|
|
|
|
Bricks has a built-in Spacing section in the Style Manager that works well and should be kept enabled. One setting needs to match our design system:
|
|
|
|
- **Scale Steps** → set to: `2xs,xs,sm,md,lg,xl,2xl`
|
|
- **Baseline** → set to `sm`
|
|
|
|
This aligns the Style Manager's spacing scale labels with our `--space-*` CSS variable naming convention.
|
|
|
|
---
|
|
|
|
## 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 |
|
|
| `--row-gap` | `15px` | Default row gap between stacked elements |
|
|
| `--col-gap` | `15px` | Default column gap between side-by-side elements |
|
|
|
|
**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` | `64px` | Page-level heading |
|
|
| `--h2` | `48px` | Section heading |
|
|
| `--h3` | `36px` | Sub-section heading |
|
|
| `--h4` | `28px` | Card or block heading|
|
|
| `--h5` | `22px` | Minor heading |
|
|
| `--h6` | `18px` | Small label heading |
|
|
| `--text-sm` | `14px` | Captions, footnotes |
|
|
| `--text-base` | `16px` | Body copy (default) |
|
|
| `--text-lg` | `18px` | Lead paragraph |
|
|
| `--text-xl` | `20px` | 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` |
|
|
| `cards-grid` | Fluid wrapping card row | `flex-wrap: wrap`, `align-items: stretch`, `gap: var(--col-gap)` — cards wrap to new rows automatically |
|
|
| `feature-card` | Individual feature column (card variant) | `background: var(--color-bg-alt)`, `padding: var(--space-md)`, `border-radius: 8px`, `row-gap: 15px`, `max-width: 33%` (50% landscape, 95% portrait) |
|
|
| `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. `feature-card` is embedded in `features-3col-cards` and `cards`. `cards-grid` and `feature-card` are embedded in `cards` — importing that template brings both along. For the fluid card layout, each card element also has `_flexBasis: 280px` and `_flexGrow: 1` set inline so they fill the row and wrap to the next line automatically.
|