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:

{
  "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):

: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.

: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:

: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:

<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:

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.
Whitespace is content — section padding must be at minimum 80px vertical on desktop. Divi often uses 40-60px which feels cramped.
One weight per heading level — h1 at 700, h2 at 600, h3 at 500. Divi often leaves all headings at the same weight.
Max-width prose — body copy containers max 680px wide. Divi stretches copy to full column width on 1200px screens, which is unreadable.
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.

5.3 KiB Raw Blame History Unescape Escape