recent updates

2026-06-09 18:31:59 +02:00
parent 398b94965c
commit 94f7a1f72a
42 changed files with 8686 additions and 0 deletions
@@ -0,0 +1,172 @@
+# 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.