// Chapter 2, 4: Dark

``` --- ## Typography ### Font Families ```css /* Display / Headings */ font-family: 'Instrument Serif', Georgia, serif; /* Body / UI */ font-family: 'Inter', -apple-system, sans-serif; ``` ### Display Headings (H1, H2) ```css .landing-h1 { font-size: clamp(3rem, 12vw, 8rem); line-height: 1; letter-spacing: -0.02em; } .landing-h2 { font-size: clamp(2rem, 6vw, 4.5rem); line-height: 1.15; letter-spacing: -0.02em; } ``` ### Chapter Labels ```tsx

{label}

``` **Pattern:** 40px horizontal dash + uppercase text + 0.2em letter-spacing ### Chapter Numbers ```tsx {String(number).padStart(2, '0')} ``` **Positioning:** `absolute top-4 left-4 md:top-8 md:left-8` --- ## Layout Patterns ### Chapter Section Structure ```tsx

{/* Chapter Number - large, positioned */} {String(number).padStart(2, '0')}

{/* Content */}

{label}

{title}

{/* Illustration */}

``` **Key Rules:** - Even chapters (2, 4): reverse layout (illustration left, content right) - Odd chapters (1, 3): standard layout (content left, illustration right) - Always explicitly set h2 color based on `isLight` (global CSS overrides) --- ## SVG Illustrations ### Standard viewBox **Always use `viewBox="0 0 500 500"`** for consistency. All coordinates must stay within 0-500 range to prevent clipping. ### Path Classes | Class | Purpose | Animation | |-------|---------|-----------| | `.fill-path` | Shapes, filled elements | Opacity 0→0.9, scale 0.8→1 | | `.draw-path` | Lines, strokes | strokeDashoffset animation | | `.label-path` | Text labels | Opacity 0→0.7 | ### CSS Initial States ```css .fill-path { opacity: 0; transform-origin: center; vector-effect: non-scaling-stroke; } .draw-path { opacity: 0; fill: none; stroke-linecap: round; stroke-linejoin: round; } .label-path { opacity: 0; font-size: 14px; font-weight: 500; text-anchor: middle; pointer-events: none; } ``` ### Common SVG Patterns **Person/Figure (Chapter 1):** ```tsx ``` **Process Flow (Chapter 2):** ```tsx {/* Horizontal left-to-right flow */} ``` **Growth Trajectory (Chapter 3):** ```tsx ``` **Central Hub (Chapter 4):** ```tsx ``` --- ## GSAP Animations ### Animation Pattern for Chapters ```typescript import { gsap } from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); export const useChapterAnimations = () => { useEffect(() => { const chapters = document.querySelectorAll('.chapter'); if (chapters.length === 0) return; const ctx = gsap.context(() => { chapters.forEach((chapter) => { const fillPaths = chapter.querySelectorAll('.fill-path'); const drawPaths = chapter.querySelectorAll('.draw-path'); // Fill paths: opacity + scale if (fillPaths.length > 0) { gsap.to(fillPaths, { opacity: 0.9, scale: 1, duration: 0.8, stagger: 0.1, ease: 'back.out(1.5)', scrollTrigger: { trigger: chapter, start: 'top 80%', toggleActions: 'play none none reverse', }, }); } // Draw paths: stroke animation if (drawPaths.length > 0) { drawPaths.forEach(path => { const length = (path as SVGPathElement).getTotalLength() || 1000; (path as SVGPathElement).style.strokeDasharray = String(length); (path as SVGPathElement).style.strokeDashoffset = String(length); }); gsap.to(drawPaths, { strokeDashoffset: 0, opacity: 0.6, duration: 1.5, stagger: 0.1, ease: 'power2.inOut', scrollTrigger: { trigger: chapter, start: 'top 75%', toggleActions: 'play none none reverse', }, }); } }); }); return () => ctx.revert(); }, []); }; ``` ### Key GSAP Rules 1. **Always use `gsap.context()`** for cleanup 2. **`toggleActions: 'play none none reverse'`** for reversible scroll animations 3. **Never use inline `style={{ transform: 'scale' }}`** - let GSAP handle all transforms 4. **Initialize strokeDasharray in the effect**, not inline styles 5. **stagger: 0.1** for sequential element animations --- ## Resources ### references/ - `palette.md` - Full color definitions with usage examples - `typography.md` - Font loading, sizing, and heading styles - `svg-patterns.md` - Common SVG illustration templates - `gsap-recipes.md` - Copy-paste animation patterns ### scripts/ - `validate_colors.sh` - Check if colors match duotone palette - `generate_chapter.sh` - Scaffold new chapter section --- ## Usage Examples **Creating a new chapter:** ``` 1. Use scripts/generate_chapter.sh 5 2. Add SVG to illustration container (500x500 viewBox) 3. Use fill-path/draw-path/label-path classes 4. Set isLight based on position (odd=light, even=dark) ``` **Validating colors:** ``` Use scripts/validate_colors.sh before committing to ensure only cream/charcoal are used ``` --- ## Anti-Patterns | ❌ Don't | ✅ Do | |---------|--------| | Use other colors for UI | Only cream/charcoal | | Inline `style={{ scale }}` | Let GSAP animate | | Different viewBox sizes | Always 500x500 | | Coordinates outside 0-500 | Keep within bounds | | Generic class names | Use fill-path/draw-path/label-path |