173 lines
5.3 KiB
Markdown
173 lines
5.3 KiB
Markdown
# 04 — Design System Extraction
|
||
|
||
Convert Divi theme settings into AM CSS custom properties.
|
||
The goal is to ENHANCE the design — cleaner, more modern — not replicate it.
|
||
|
||
## Input
|
||
|
||
`design-system.json` produced by `analyze_db.py`. Key fields:
|
||
|
||
```json
|
||
{
|
||
"primary_color": "#1a8a7a",
|
||
"body_font": "DM Sans",
|
||
"header_font": "DM Serif Display",
|
||
"body_font_size": "16",
|
||
"body_line_height": "1.7",
|
||
"site_name": "VibrantYou Yoga"
|
||
}
|
||
```
|
||
|
||
## Color palette strategy
|
||
|
||
Never lift the Divi palette 1:1. Use extracted colors as the base and build a
|
||
full 5-step scale around the primary hue:
|
||
|
||
| Token | Derived from | Role |
|
||
|-------|-------------|------|
|
||
| `--color-primary` | Divi accent_color | Buttons, links, active states |
|
||
| `--color-primary-dark` | Darken primary 15% | Hover states, section backgrounds |
|
||
| `--color-primary-light` | Lighten primary 40% | Subtle tints, borders |
|
||
| `--color-surface` | Always `#fafafa` | Page background |
|
||
| `--color-surface-alt` | `#f3f3f3` | Alternating sections |
|
||
| `--color-text` | Always `#1a1a1a` | Body copy |
|
||
| `--color-text-muted` | `#666` | Subheadings, captions |
|
||
| `--color-border` | 10% primary or `#e0e0e0` | Dividers, inputs |
|
||
| `--color-white` | `#ffffff` | Card backgrounds, hero text |
|
||
|
||
For VibrantYou Yoga (primary `#1a8a7a`, dark `#0f5f53`):
|
||
|
||
```css
|
||
:root {
|
||
--color-primary: #1a8a7a;
|
||
--color-primary-dark: #0f5f53;
|
||
--color-primary-light: #d4f0eb;
|
||
--color-surface: #fafafa;
|
||
--color-surface-alt: #f0f7f6;
|
||
--color-text: #1a1a1a;
|
||
--color-text-muted: #5a6e6b;
|
||
--color-border: #c8dedd;
|
||
--color-white: #ffffff;
|
||
}
|
||
```
|
||
|
||
## Typography strategy
|
||
|
||
Use the extracted fonts but upgrade the type scale.
|
||
Divi's default type scale is too small and too flat. Aim for 1.25–1.333 modular ratio.
|
||
|
||
```css
|
||
:root {
|
||
/* Fonts from design-system.json */
|
||
--font-body: 'DM Sans', system-ui, sans-serif;
|
||
--font-heading: 'DM Serif Display', Georgia, serif;
|
||
|
||
/* Modular scale (1.25 ratio from 16px base) */
|
||
--text-xs: 0.75rem; /* 12px */
|
||
--text-sm: 0.875rem; /* 14px */
|
||
--text-base: 1rem; /* 16px */
|
||
--text-lg: 1.125rem; /* 18px */
|
||
--text-xl: 1.25rem; /* 20px */
|
||
--text-2xl: 1.5rem; /* 24px */
|
||
--text-3xl: 1.875rem; /* 30px */
|
||
--text-4xl: 2.25rem; /* 36px */
|
||
--text-5xl: 3rem; /* 48px */
|
||
--text-6xl: 3.75rem; /* 60px */
|
||
|
||
/* Line heights */
|
||
--leading-tight: 1.2;
|
||
--leading-normal: 1.6;
|
||
--leading-loose: 1.8;
|
||
|
||
/* Font weights */
|
||
--weight-normal: 400;
|
||
--weight-medium: 500;
|
||
--weight-semibold: 600;
|
||
--weight-bold: 700;
|
||
}
|
||
```
|
||
|
||
## Spacing and layout
|
||
|
||
Divi uses pixel-based margins/paddings that must be converted to a consistent
|
||
rem-based spacing scale:
|
||
|
||
```css
|
||
:root {
|
||
--space-1: 0.25rem; /* 4px */
|
||
--space-2: 0.5rem; /* 8px */
|
||
--space-3: 0.75rem; /* 12px */
|
||
--space-4: 1rem; /* 16px */
|
||
--space-5: 1.25rem; /* 20px */
|
||
--space-6: 1.5rem; /* 24px */
|
||
--space-8: 2rem; /* 32px */
|
||
--space-10: 2.5rem; /* 40px */
|
||
--space-12: 3rem; /* 48px */
|
||
--space-16: 4rem; /* 64px */
|
||
--space-20: 5rem; /* 80px */
|
||
--space-24: 6rem; /* 96px */
|
||
--space-32: 8rem; /* 128px */
|
||
|
||
/* Section vertical padding */
|
||
--section-py: var(--space-20); /* 80px default */
|
||
--section-py-sm: var(--space-12); /* 48px mobile */
|
||
|
||
/* Container */
|
||
--container-max: 1200px;
|
||
--container-px: var(--space-6);
|
||
|
||
/* Border radius */
|
||
--radius-sm: 4px;
|
||
--radius-md: 8px;
|
||
--radius-lg: 12px;
|
||
--radius-xl: 20px;
|
||
--radius-full: 9999px;
|
||
|
||
/* Shadows */
|
||
--shadow-sm: 0 1px 3px rgba(0,0,0,.08);
|
||
--shadow-md: 0 4px 16px rgba(0,0,0,.1);
|
||
--shadow-lg: 0 12px 40px rgba(0,0,0,.12);
|
||
}
|
||
```
|
||
|
||
## Google Fonts import
|
||
|
||
For DM Sans + DM Serif Display:
|
||
|
||
```html
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">
|
||
```
|
||
|
||
## Enhancement rules (required)
|
||
|
||
These upgrades apply to every AM migration regardless of source:
|
||
|
||
1. **Increase contrast** — body text must be #1a1a1a on white (WCAG AA minimum).
|
||
Never use the grey-on-grey color schemes that Divi themes commonly use.
|
||
|
||
2. **Whitespace is content** — section padding must be at minimum 80px vertical
|
||
on desktop. Divi often uses 40-60px which feels cramped.
|
||
|
||
3. **One weight per heading level** — h1 at 700, h2 at 600, h3 at 500.
|
||
Divi often leaves all headings at the same weight.
|
||
|
||
4. **Max-width prose** — body copy containers max 680px wide. Divi stretches
|
||
copy to full column width on 1200px screens, which is unreadable.
|
||
|
||
5. **Brand color is a highlight, not a wallpaper** — primary color should
|
||
appear on buttons, links, and 1-2 hero sections only. Divi sites often
|
||
paint every other section in the primary color.
|
||
|
||
## Output: main.css variables block
|
||
|
||
Write the complete `:root {}` block into `src/assets/css/main.css` as the
|
||
first section. All other CSS rules reference only `var(--token-name)`.
|
||
Never hard-code a color, font, or spacing value outside of `:root`.
|
||
|
||
## Next step
|
||
|
||
Proceed to `05-content-migration.md` to map extracted content into AM HTML
|
||
templates using this design system.
|