artanis/Bricks-Sections
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add design system, audit sections, apply global classes

Browse Source 
Design system (design/):
- bcw-css-variables.json: color, spacing (--space-xs→2xl), typography (--h1→h6, --text-sm→xl)
- bcw-color-palette.json: named swatches referencing CSS variables
- bcw-global-classes.json: section-container, section-header, col-3, col-4, features-container, footer-sub-section
- design.md: full variable reference and usage guide

Templates:
- features-3col + features-4col: add global_classes embed + _cssGlobalClasses references
- All headers + footers: apply var(--color-primary) background to section elements
- footer-columns: add footer-sub-section class to column containers
- Remove content-image-left (duplicate of content-image-right with children reversed)
- testimonials: gap tweak 12px → 15px on card containers

Repo hygiene:
- Add .gitignore (Updated_Sections/)
- Clear Updated_Sections staging folder

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Spencer
2026-02-27 15:42:54 -06:00
parent bb7e1483ae
commit dbbcfa27dd
16 changed files with 621 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
design/bcw-color-palette.json Normal file
View File

@@ -0,0 +1,77 @@
{
"id": "bcwpal",
"name": "BCW",
"default": false,
"colors": [
{
"id": "bcwc01",
"name": "primary",
"raw": "var(--color-primary)"
},
{
"id": "bcwc02",
"name": "primary-light",
"raw": "var(--color-primary-light)"
},
{
"id": "bcwc03",
"name": "primary-dark",
"raw": "var(--color-primary-dark)"
},
{
"id": "bcwc04",
"name": "secondary",
"raw": "var(--color-secondary)"
},
{
"id": "bcwc05",
"name": "secondary-light",
"raw": "var(--color-secondary-light)"
},
{
"id": "bcwc06",
"name": "secondary-dark",
"raw": "var(--color-secondary-dark)"
},
{
"id": "bcwc07",
"name": "tertiary",
"raw": "var(--color-tertiary)"
},
{
"id": "bcwc08",
"name": "tertiary-light",
"raw": "var(--color-tertiary-light)"
},
{
"id": "bcwc09",
"name": "tertiary-dark",
"raw": "var(--color-tertiary-dark)"
},
{
"id": "bcwc10",
"name": "text",
"raw": "var(--color-text)"
},
{
"id": "bcwc11",
"name": "heading",
"raw": "var(--color-heading)"
},
{
"id": "bcwc12",
"name": "bg",
"raw": "var(--color-bg)"
},
{
"id": "bcwc13",
"name": "bg-alt",
"raw": "var(--color-bg-alt)"
},
{
"id": "bcwc14",
"name": "white",
"raw": "var(--color-white)"
}
]
}

198
design/bcw-css-variables.json Normal file
View File

@@ -0,0 +1,198 @@
{
"categories": [
{
"id": "bcwcol",
"name": "Colors"
},
{
"id": "bcwspc",
"name": "Spacing"
},
{
"id": "bcwtyp",
"name": "Typography"
}
],
"variables": [
{
"id": "bcwv01",
"name": "color-primary",
"value": "#374151",
"category": "bcwcol"
},
{
"id": "bcwv02",
"name": "color-primary-light",
"value": "#9CA3AF",
"category": "bcwcol"
},
{
"id": "bcwv03",
"name": "color-primary-dark",
"value": "#1F2937",
"category": "bcwcol"
},
{
"id": "bcwv04",
"name": "color-secondary",
"value": "#6B7280",
"category": "bcwcol"
},
{
"id": "bcwv05",
"name": "color-secondary-light",
"value": "#D1D5DB",
"category": "bcwcol"
},
{
"id": "bcwv06",
"name": "color-secondary-dark",
"value": "#4B5563",
"category": "bcwcol"
},
{
"id": "bcwv07",
"name": "color-tertiary",
"value": "#F3F4F6",
"category": "bcwcol"
},
{
"id": "bcwv08",
"name": "color-tertiary-light",
"value": "#FFFFFF",
"category": "bcwcol"
},
{
"id": "bcwv09",
"name": "color-tertiary-dark",
"value": "#E5E7EB",
"category": "bcwcol"
},
{
"id": "bcwv10",
"name": "color-text",
"value": "#374151",
"category": "bcwcol"
},
{
"id": "bcwv11",
"name": "color-heading",
"value": "#111827",
"category": "bcwcol"
},
{
"id": "bcwv12",
"name": "color-bg",
"value": "#FFFFFF",
"category": "bcwcol"
},
{
"id": "bcwv13",
"name": "color-bg-alt",
"value": "#F9FAFB",
"category": "bcwcol"
},
{
"id": "bcwv14",
"name": "color-white",
"value": "#FFFFFF",
"category": "bcwcol"
},
{
"id": "bcwv15",
"name": "space-xs",
"value": "8px",
"category": "bcwspc"
},
{
"id": "bcwv16",
"name": "space-sm",
"value": "16px",
"category": "bcwspc"
},
{
"id": "bcwv17",
"name": "space-md",
"value": "24px",
"category": "bcwspc"
},
{
"id": "bcwv18",
"name": "space-lg",
"value": "40px",
"category": "bcwspc"
},
{
"id": "bcwv19",
"name": "space-xl",
"value": "64px",
"category": "bcwspc"
},
{
"id": "bcwv20",
"name": "space-2xl",
"value": "96px",
"category": "bcwspc"
},
{
"id": "bcwv21",
"name": "h1",
"value": "3rem",
"category": "bcwtyp"
},
{
"id": "bcwv22",
"name": "h2",
"value": "2.25rem",
"category": "bcwtyp"
},
{
"id": "bcwv23",
"name": "h3",
"value": "1.75rem",
"category": "bcwtyp"
},
{
"id": "bcwv24",
"name": "h4",
"value": "1.25rem",
"category": "bcwtyp"
},
{
"id": "bcwv25",
"name": "h5",
"value": "1.125rem",
"category": "bcwtyp"
},
{
"id": "bcwv26",
"name": "h6",
"value": "1rem",
"category": "bcwtyp"
},
{
"id": "bcwv27",
"name": "text-sm",
"value": "0.875rem",
"category": "bcwtyp"
},
{
"id": "bcwv28",
"name": "text-base",
"value": "1rem",
"category": "bcwtyp"
},
{
"id": "bcwv29",
"name": "text-lg",
"value": "1.125rem",
"category": "bcwtyp"
},
{
"id": "bcwv30",
"name": "text-xl",
"value": "1.25rem",
"category": "bcwtyp"
}
]
}

74
design/bcw-global-classes.json Normal file
View File

@@ -0,0 +1,74 @@
[
{
"id": "features-container",
"name": "features-container",
"settings": {
"_typography": {
"text-align": "center"
},
"_rowGap": "10px"
},
"modified": 1772146285,
"user_id": 2
},
{
"id": "footer-sub-section",
"name": "footer-sub-section",
"settings": {
"_rowGap": "15px"
},
"modified": 1772146505,
"user_id": 2
},
{
"id": "section-container",
"name": "section-container",
"settings": {
"_direction": "column",
"_gap": "40px",
"_margin": {
"top": "15",
"bottom": "15"
}
},
"modified": 1772146505,
"user_id": 2
},
{
"id": "section-header",
"name": "section-header",
"settings": {
"_direction": "column",
"_alignItems": "center",
"_gap": "16px"
},
"modified": 1772146505,
"user_id": 2
},
{
"id": "col-3",
"name": "col-3",
"settings": {
"_direction": "row",
"_alignItems": "flex-start",
"_justifyContent": "center",
"_gap": "32px",
"_rowGap:mobile_portrait": "15px"
},
"modified": 1772146505,
"user_id": 2
},
{
"id": "col-4",
"name": "col-4",
"settings": {
"_direction": "row",
"_alignItems": "flex-start",
"_justifyContent": "center",
"_gap": "24px",
"_rowGap:mobile_portrait": "15px"
},
"modified": 1772146505,
"user_id": 2
}
]

109
design/design.md Normal file
View File

@@ -0,0 +1,109 @@
# 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.