diff --git a/skills/design-system/COWORK-PROMPT.md b/skills/design-system/COWORK-PROMPT.md
new file mode 100644
index 0000000..6ba74c2
--- /dev/null
+++ b/skills/design-system/COWORK-PROMPT.md
@@ -0,0 +1,77 @@
+# Design System — Cowork Prompt
+
+Paste this whole block into Claude Cowork. Fill in the bracketed fields. Submit. Cowork will reply with a customized design-system HTML file you can save and open in any browser.
+
+```text
+I want you to build me a brand-customized, single-file HTML design system. You'll act as a senior brand designer who has stood up design systems for 30+ product and revenue teams. You build with primitives — color, type, spacing, radius, shadow. You ship one file every team can open in a browser, share, and fork.
+
+CONTEXT — what you're building on top of:
+
+The starting template is a self-contained HTML file with a sticky sidebar TOC; a color palette section (12 swatches: brand, neutrals, semantic); typography ramps (H1 → mono, 8 ramps); buttons (primary / secondary / ghost in 3 sizes); cards; badges; forms; navigation; and a composed page preview at the bottom. Every brand decision lives in CSS variables in :root at the top of the file. Fetch the template here:
+
+https://raw.githubusercontent.com/GTMify/aigtm/main/skills/design-system/template.html
+
+MY BRAND ANSWERS (fill these in):
+
+- Brand name: [Your company name — replaces [Your Brand] throughout the file]
+- Tagline: [One short sentence — goes under the brand name on the cover]
+- Primary color: [Hex code — dominant CTA / accent on most surfaces]
+- Accent color: [Hex code — secondary highlight that complements the primary]
+- Heading font: [A Google Font name — e.g., Fraunces, Playfair Display, Space Grotesk, Inter, IBM Plex Sans]
+- Body font: [A Google Font name — often the same family different weight, or a clean sans]
+- Brand voice: [One line — "authoritative + warm", "playful + direct", "operator + technical", etc.]
+
+WHAT TO DO:
+
+1. Read the template at the URL above. Do not change the HTML structure (sections, classes, layout). Brand variables only.
+
+2. Derive the rest of the palette from my primary and accent:
+   - --color-primary-dark — darken primary ~15% (hover state)
+   - --color-primary-light — lighten primary ~25% (tint / chip background)
+   - --color-bg — neutral that pairs with the primary (default #FAFAF7)
+   - --color-ink — near-black (#1A1A1A)
+   - --color-ink-muted — #5C5C5C
+   - --color-neutral — #E5E2DC or a neutral matching the bg
+   - --color-dark — #0F1419 for dark sections
+
+3. Apply these transformations to the template:
+   - Search-and-replace [Your Brand] with my brand name (preserve my exact capitalization)
+   - Update <title> to "[My brand name] — Design System"
+   - Replace the cover tagline with mine
+   - Update CSS variables in :root with my colors (derived ones from step 2 for what I didn't provide)
+   - Swap the Google Fonts <link> URL to load my chosen heading + body fonts
+   - Update --font-heading and --font-body in :root
+   - Update the HOW TO USE comment block at the top to credit my brand
+
+4. Output the entire customized HTML file as a single fenced code block (language hint: html). Above the block, give me a short cover paragraph (≤3 sentences) summarizing what you customized — brand name, color thesis, type thesis.
+
+CONSTRAINTS:
+
+- No dependencies beyond Google Fonts. Single file. No build step.
+- Don't fabricate brand colors I didn't give you. Derive only.
+- Don't include a logo unless I provide a URL.
+- Final file must stay under 800 lines.
+- If my primary color fails WCAG AA contrast on white (text contrast < 4.5:1), note it once in the cover paragraph and proceed anyway.
+- If my fonts aren't on Google Fonts, ask once for a Google Fonts alternative.
+
+OUTPUT SPEC:
+
+1. Cover paragraph (≤3 sentences) — what changed.
+2. Single fenced `html` code block — the complete customized template, ready to save as `.html`.
+
+That's it. After you reply, I'll save the block as <my-brand-name>-design-system.html, open it in any browser, and that's my live design system.
+```
+
+## After Cowork replies
+
+1. Click into the `html` code block and copy.
+2. Save as `<your-brand-name>-design-system.html` (lowercase, hyphens).
+3. Open the file in any browser — that's your design system.
+4. To revise: edit the CSS variables in `:root` at the top of the file.
+5. To share: drop on any static host (Vercel, Netlify, GitHub Pages) or PDF-print directly from the browser.
+
+## How this works under the hood
+
+This is a skill from the [aigtm](https://github.com/GTMify/aigtm) toolkit. The template lives at [`skills/design-system/template.html`](template.html) in the repo. The full SKILL.md (Claude Code version) is in the same folder — it does the same thing but reads the template directly from your filesystem instead of fetching it via URL.
+
+Same Six-Layer Power Prompt Stack as every other skill in the repo. Layer 1 (Context) = your brand. Layer 6 (Output Spec) = a single fenced HTML block. The skill is the framework.
diff --git a/skills/design-system/README.md b/skills/design-system/README.md
new file mode 100644
index 0000000..e69b063
--- /dev/null
+++ b/skills/design-system/README.md
@@ -0,0 +1,86 @@
+# design-system
+
+Build a brand-customized, single-file HTML design system from a working template — no build step, no dependencies beyond Google Fonts, one file your whole team can open in a browser.
+
+## What this is
+
+A skill that interviews you for the seven brand decisions that actually matter (name, tagline, primary, accent, heading font, body font, voice), then produces a self-contained `design-system.html` file you can save, share, and fork.
+
+The template is at [`template.html`](template.html) in this folder. Open it in a browser to see what the output looks like before you customize.
+
+## Three ways to use this
+
+### 1. Claude Code
+
+```bash
+claude "use the design-system skill to build me one for my company"
+```
+
+Claude reads `template.html` from `~/.claude/skills/design-system/` (installed when you ran the aigtm bootstrap), interviews you, and writes the customized file to your current directory.
+
+### 2. Cowork
+
+Paste the contents of [`COWORK-PROMPT.md`](COWORK-PROMPT.md) into Claude Cowork. Fill in the bracketed fields. Cowork fetches the template via its raw GitHub URL and replies with the customized file.
+
+### 3. Web form
+
+Visit [aigtmschool2026q2.vercel.app/design-system](https://aigtmschool2026q2.vercel.app/design-system) — the takeaway page has an interactive form. Fill it in, click Download, the customized file is generated client-side and downloaded immediately. No Claude needed.
+
+## What the template includes
+
+| Section | Purpose |
+|---|---|
+| Cover | Brand title + tagline |
+| Color palette | 12 swatches (brand, neutrals, semantic) with hex values |
+| Typography | 8 type ramps from H1 → mono |
+| Buttons | Primary / secondary / ghost, three sizes |
+| Cards | 3-up feature grid |
+| Badges | 5 status colors |
+| Forms | Input / select / textarea with focus states |
+| Navigation | Marketing top-nav pattern |
+| Page preview | Hero + stats bar + testimonial composed from primitives |
+
+## What customization actually changes
+
+Every brand decision lives in CSS variables in `:root` at the top of the file. The skill modifies exactly seven things:
+
+- `[Your Brand]` placeholder (replaced throughout)
+- `<title>` tag
+- Cover tagline
+- `--color-primary` and `--color-accent` (you provide these)
+- `--color-primary-dark` and `--color-primary-light` (derived from your primary)
+- `--font-heading` and `--font-body` + the Google Fonts `<link>` URL
+- The HOW TO USE comment block at the top
+
+Everything else — the HTML structure, the component definitions, the spacing scale, the radius and shadow tokens — stays as-is. That's the point. The structure is the contract; the variables are the brand.
+
+## Why a single-file design system
+
+A design system is a single source of truth for how your brand looks on screen. Most companies maintain one in Figma (slow to share), Notion (no live components), or a Storybook (engineering-only). A single HTML file:
+
+- Opens in any browser, on any OS, with no install
+- PDF-prints to a sharable artifact in one click
+- Lives in version control (treat it as code)
+- Doubles as a working reference — copy the CSS for any component into your real app
+- Is editable by anyone who knows enough HTML to find `:root`
+
+When you outgrow it, port the variables into Tailwind config, CSS custom properties on your real app, or a proper Figma library. The single-file version was just to get you moving in the first 24 hours.
+
+## How this fits the Six-Layer Power Prompt Stack
+
+This skill is itself a Power Prompt — every layer is visible in [`SKILL.md`](SKILL.md):
+
+| Layer | What it does here |
+|---|---|
+| 1. Context | Describes the template structure so Claude knows what it's building on |
+| 2. Role | Senior brand designer with 30+ design systems shipped |
+| 3. Task | One verb: build (interview → customize → output) |
+| 4. Constraints | No structural HTML changes, no dependencies, under 800 lines, derive don't invent |
+| 5. Examples | Two reference brand customizations (SEN-style + Pavilion-style) |
+| 6. Output Spec | A cover paragraph + a single fenced `html` code block — that's it |
+
+If you want to extend the template (new sections, dark mode, motion specs), edit `SKILL.md`'s Constraints layer to allow it and `template.html` to add the structure. Same six-layer pattern.
+
+## License
+
+MIT. Same as the rest of the [aigtm](https://github.com/GTMify/aigtm) toolkit. Pass it along.
diff --git a/skills/design-system/SKILL.md b/skills/design-system/SKILL.md
new file mode 100644
index 0000000..5eb2ee6
--- /dev/null
+++ b/skills/design-system/SKILL.md
@@ -0,0 +1,134 @@
+---
+name: design-system
+description: "Build a brand-customized single-file design system from a working HTML template. Interviews the user for brand name, palette, typography, and voice; produces a self-contained design-system.html the user can share with their team. Use when the user says 'build my design system', 'design system template', 'brand my design system', 'design tokens', 'design guide for my brand', or asks for help producing a single-source-of-truth design artifact."
+---
+
+# Design System Agent
+
+## Your Role
+
+You are a senior brand designer who has stood up design systems for 30+ product and revenue teams. You build with primitives: color, type, spacing, radius, shadow. You don't ship a Figma library; you ship one file every team can open in a browser, share, and fork. Your job is to interview the user just enough to fill the brand variables, then produce a customized HTML file ready to share.
+
+## Context (Layer 1)
+
+You ship a single-file HTML design system (`template.html` in this skill folder). It has:
+
+- A sticky sidebar TOC
+- Color palette (12 swatches: brand, neutrals, semantic)
+- Typography ramps (H1 → mono, 8 ramps)
+- Buttons (primary / secondary / ghost in 3 sizes)
+- Cards, badges, forms, navigation, and a composed page preview
+- Every brand decision lives in CSS variables in `:root` at the top of the file
+
+The user wants a copy of this file customized to their brand. Your job is to collect just enough information to fill in those variables, then produce the file.
+
+## Process
+
+### Step 1: Interview the user
+
+Ask one focused round of questions. Bundle them into a single message so the user can answer in one reply. Do NOT ask one at a time.
+
+Required:
+1. **Brand name** — the literal company name that replaces `[Your Brand]` throughout the file
+2. **Tagline** — one short sentence that goes under the brand name on the cover
+3. **Primary brand color** — hex code (the dominant CTA / accent on most surfaces)
+4. **Accent color** — hex code (the secondary highlight that complements the primary)
+5. **Heading font** — name a Google Font (e.g., Fraunces, Playfair Display, Space Grotesk, Inter, IBM Plex Sans)
+6. **Body font** — name a Google Font (often the same family different weight, or a clean sans)
+7. **Brand voice** — one line ("authoritative + warm", "playful + direct", "operator + technical", etc.)
+
+Optional (only ask if the user prompts you to go deeper):
+- Dark-section color (defaults to near-black if unspecified)
+- Page background color (defaults to off-white if unspecified)
+- Success / warning / error / info semantic colors (defaults to muted variants if unspecified)
+- Logo URL (the file does not ship with a logo slot by default — only add one if user requests)
+
+### Step 2: Derive the palette
+
+From the primary and accent the user gave, derive:
+
+- `--color-primary-dark` — darken the primary by ~15% (hover state)
+- `--color-primary-light` — lighten the primary by ~25% (tint / chip background)
+- `--color-bg` — if not provided, use `#FAFAF7` or a neutral that pairs with the primary
+- `--color-ink` — near-black (`#1A1A1A`) unless the brand has a strong opinion
+- `--color-ink-muted` — `#5C5C5C`
+- `--color-neutral` — `#E5E2DC` or a brand-neutral that matches `--color-bg`
+- `--color-dark` — `#0F1419` for the dark sections
+
+### Step 3: Produce the customized file
+
+Read `template.html` from this skill folder. Apply these transformations:
+
+1. **Search-and-replace `[Your Brand]`** with the user's brand name (case-preserving — keep the user's exact capitalization)
+2. **Update the `<title>` tag** to: `<title>[Brand Name] — Design System</title>`
+3. **Replace the cover tagline** with the user's tagline
+4. **Update CSS variables in `:root`** with the user's color values (derived per Step 2 for the ones they didn't provide)
+5. **Swap the Google Fonts `<link>` URL** to load the user's chosen heading + body fonts
+6. **Update `--font-heading` and `--font-body`** in `:root` to the user's font choices
+7. **Update the HOW TO USE comment block at the top** to credit the user's brand as the source brand
+
+Leave the rest of the file structure intact. Do NOT rewrite the body markup unless the user asks — the structure is the contract.
+
+### Step 4: Output the file
+
+Output the entire customized HTML file as a single fenced code block in your reply, with the language hint `html`. Tell the user:
+
+1. Save the block as `<brand-name>-design-system.html`
+2. Open in any browser — that's the live design system
+3. To revise the brand, edit the CSS variables in `:root`
+4. To share with their team, drop the file on any static host (Vercel, Netlify, GitHub Pages) or PDF-print directly from the browser
+
+## Constraints (Layer 4)
+
+- Do NOT change the HTML structure (sections, classes, layout). Brand variables only.
+- Do NOT introduce dependencies (no React, no Tailwind, no build step). Single file, zero dependencies beyond Google Fonts.
+- Do NOT fabricate brand colors the user didn't provide. If they only gave a primary, derive the palette mathematically from that primary; don't invent.
+- Do NOT include a logo unless the user provides a URL.
+- Final file must stay under 800 lines.
+- All CSS variables must have a clear comment explaining what they control. Match the template's comment style.
+
+## Examples (Layer 5)
+
+Reference brand customization that this template ships with (cover SEN-inspired off-white + green):
+
+```css
+:root {
+  --color-primary: #2C5F2D;
+  --color-primary-dark: #1F4520;
+  --color-accent: #C9A55C;
+  --color-bg: #FAFAF7;
+  --font-heading: 'Fraunces', Georgia, serif;
+  --font-body: 'Inter', system-ui, sans-serif;
+}
+```
+
+Reference brand customization for a Pavilion-inspired deep-purple + pink palette:
+
+```css
+:root {
+  --color-primary: #180A5C;
+  --color-primary-dark: #0D0339;
+  --color-primary-light: #EDEAFF;
+  --color-accent: #DD275B;
+  --color-bg: #FFFFFF;
+  --font-heading: 'Poppins', sans-serif;
+  --font-body: 'Poppins', sans-serif;
+}
+```
+
+Both produce a fully functional design system from the same template — only the variables changed.
+
+## Output Spec (Layer 6)
+
+Your reply contains exactly two things:
+
+1. A short cover paragraph (≤3 sentences) summarizing what you customized — brand name, color thesis, type thesis.
+2. A single fenced `html` code block containing the complete customized template, ready to save as `.html`.
+
+No additional sections, no walkthrough, no "here's what I changed" lists. The user opens the file in a browser; that's the validation. If the user wants revisions, they edit `:root` directly or ask you for a second pass.
+
+## Guardrails
+
+- **If the user provides brand colors that fail WCAG AA on white backgrounds** (text contrast < 4.5:1), note it once in the cover paragraph and proceed. Don't refuse to build.
+- **If the user picks fonts that aren't on Google Fonts**, ask once for a Google Fonts alternative. If they insist, swap the `<link>` for a comment explaining the user needs to self-host the font.
+- **If the user wants major structural changes** (different sections, removed components, added components), tell them this skill is for brand customization only and that structural edits should be done by hand after they open the customized file.
diff --git a/skills/design-system/template.html b/skills/design-system/template.html
new file mode 100644
index 0000000..ff1a3d0
--- /dev/null
+++ b/skills/design-system/template.html
@@ -0,0 +1,691 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>[Your Brand] — Design System Template</title>
+
+  <!--
+  ═══════════════════════════════════════════════════════════════════════════
+  DESIGN SYSTEM TEMPLATE
+  Built for the Pavilion class by Scott Wueschinski
+  ═══════════════════════════════════════════════════════════════════════════
+
+  HOW TO USE THIS FILE:
+
+  1. Search-and-replace `[Your Brand]` with your company name.
+  2. Edit the CSS variables in `:root` below — colors, fonts, spacing.
+     Every value is commented with what it controls.
+  3. Swap the Google Fonts `<link>` for your typefaces.
+  4. Replace placeholder copy (hero, stats, pillars, testimonial) with
+     your real messaging.
+  5. Open in a browser — this single file IS your design system.
+     Share the URL or PDF-print it for designers, devs, and partners.
+
+  WHY A DESIGN SYSTEM:
+  A design system is a single source of truth for how your brand looks
+  and behaves on screen. It eliminates one-off decisions, accelerates
+  build time, and keeps every page, deck, and email consistent.
+  ═══════════════════════════════════════════════════════════════════════════
+  -->
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <!-- CHANGE ME: swap fonts to match your brand -->
+  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&family=Inter:wght@300..700&display=swap" rel="stylesheet">
+
+  <style>
+    :root {
+      /* ─── BRAND COLORS — CHANGE ME ─── */
+      --color-bg:             #FAFAF7;  /* page background */
+      --color-surface:        #FFFFFF;  /* card / panel surface */
+      --color-ink:            #1A1A1A;  /* primary text */
+      --color-ink-muted:      #5C5C5C;  /* secondary text */
+      --color-primary:        #2C5F2D;  /* primary brand / CTA */
+      --color-primary-dark:   #1F4520;  /* hover state for primary */
+      --color-primary-light:  #97BC62;  /* tint of primary */
+      --color-accent:         #C9A55C;  /* accent / highlight */
+      --color-neutral:        #E5E2DC;  /* dividers, borders, chips */
+      --color-dark:           #0F1419;  /* dark sections */
+
+      /* ─── SEMANTIC COLORS ─── */
+      --color-success:        #4A7C59;
+      --color-warning:        #D4882A;
+      --color-error:          #C04A3C;
+      --color-info:           #4A6FA5;
+
+      /* ─── TYPOGRAPHY ─── */
+      --font-heading: 'Fraunces', Georgia, serif;  /* CHANGE ME */
+      --font-body:    'Inter', system-ui, sans-serif;  /* CHANGE ME */
+
+      /* ─── SPACING SCALE ─── */
+      --space-1: 4px;
+      --space-2: 8px;
+      --space-3: 16px;
+      --space-4: 24px;
+      --space-5: 32px;
+      --space-6: 48px;
+      --space-7: 64px;
+      --space-8: 96px;
+
+      /* ─── RADIUS + SHADOW ─── */
+      --radius-sm: 4px;
+      --radius-md: 8px;
+      --radius-lg: 16px;
+      --radius-pill: 999px;
+      --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
+      --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
+      --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
+    }
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: var(--font-body);
+      color: var(--color-ink);
+      background: var(--color-bg);
+      line-height: 1.6;
+    }
+
+    /* ─── SIDEBAR NAV ─── */
+    .toc {
+      position: fixed; top: 0; left: 0;
+      width: 220px; height: 100vh;
+      background: var(--color-dark);
+      padding: var(--space-4) var(--space-3);
+      overflow-y: auto; z-index: 100;
+    }
+    .toc h3 {
+      font-family: var(--font-heading);
+      color: var(--color-accent);
+      font-size: 14px; font-weight: 600;
+      text-transform: uppercase; letter-spacing: 1px;
+      margin-bottom: var(--space-3);
+    }
+    .toc a {
+      display: block;
+      color: rgba(255,255,255,0.6);
+      text-decoration: none;
+      font-size: 13px; padding: 6px 0;
+      transition: color 0.2s;
+    }
+    .toc a:hover { color: var(--color-accent); }
+
+    .main { margin-left: 220px; }
+
+    /* ─── SECTIONS ─── */
+    .section {
+      padding: var(--space-7) var(--space-6);
+      border-bottom: 1px solid var(--color-neutral);
+    }
+    .section--surface { background: var(--color-surface); }
+    .section--dark { background: var(--color-dark); color: var(--color-bg); }
+    .section--dark .section-subtitle { color: rgba(255,255,255,0.55); }
+
+    .section-title {
+      font-family: var(--font-heading);
+      font-size: 32px; font-weight: 500;
+      margin-bottom: var(--space-1);
+    }
+    .section-subtitle {
+      color: var(--color-ink-muted);
+      font-size: 15px;
+      margin-bottom: var(--space-6);
+    }
+    .section-label {
+      display: inline-block;
+      font-size: 11px; font-weight: 600;
+      text-transform: uppercase; letter-spacing: 1.5px;
+      color: var(--color-accent);
+      padding: 4px 10px;
+      border: 1px solid var(--color-accent);
+      border-radius: var(--radius-pill);
+      margin-bottom: var(--space-3);
+    }
+
+    /* ─── COVER ─── */
+    .cover {
+      background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-neutral) 50%, var(--color-primary-light) 100%);
+      padding: var(--space-8) var(--space-6);
+      text-align: center;
+    }
+    .cover-eyebrow {
+      font-size: 12px; font-weight: 600;
+      text-transform: uppercase; letter-spacing: 2px;
+      color: var(--color-primary-dark);
+      margin-bottom: var(--space-3);
+    }
+    .cover h1 {
+      font-family: var(--font-heading);
+      font-size: 72px; font-weight: 400;
+      line-height: 1.05;
+      margin-bottom: var(--space-3);
+      letter-spacing: -0.02em;
+    }
+    .cover p {
+      font-size: 20px; color: var(--color-ink-muted);
+      max-width: 600px; margin: 0 auto;
+    }
+
+    /* ─── COLOR SWATCHES ─── */
+    .swatch-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+      gap: var(--space-3);
+    }
+    .swatch {
+      border-radius: var(--radius-md);
+      overflow: hidden;
+      background: var(--color-surface);
+      box-shadow: var(--shadow-sm);
+    }
+    .swatch-color { height: 100px; }
+    .swatch-meta {
+      padding: var(--space-3);
+      font-size: 12px;
+    }
+    .swatch-name {
+      font-weight: 600; margin-bottom: 4px;
+      color: var(--color-ink);
+    }
+    .swatch-hex {
+      color: var(--color-ink-muted);
+      font-family: ui-monospace, monospace;
+    }
+
+    /* ─── TYPOGRAPHY SAMPLES ─── */
+    .type-sample {
+      padding: var(--space-4) 0;
+      border-bottom: 1px solid var(--color-neutral);
+    }
+    .type-sample:last-child { border-bottom: none; }
+    .type-label {
+      font-size: 11px; text-transform: uppercase;
+      letter-spacing: 1.5px; color: var(--color-ink-muted);
+      margin-bottom: var(--space-2);
+    }
+    .type-h1 { font-family: var(--font-heading); font-size: 64px; font-weight: 400; line-height: 1.1; }
+    .type-h2 { font-family: var(--font-heading); font-size: 48px; font-weight: 500; line-height: 1.15; }
+    .type-h3 { font-family: var(--font-heading); font-size: 32px; font-weight: 500; line-height: 1.2; }
+    .type-h4 { font-family: var(--font-heading); font-size: 24px; font-weight: 600; }
+    .type-body-lg { font-size: 18px; line-height: 1.6; }
+    .type-body { font-size: 16px; line-height: 1.6; }
+    .type-small { font-size: 13px; color: var(--color-ink-muted); }
+    .type-mono { font-family: ui-monospace, 'SF Mono', monospace; font-size: 14px; }
+
+    /* ─── BUTTONS ─── */
+    .button-row {
+      display: flex; flex-wrap: wrap;
+      gap: var(--space-3); align-items: center;
+    }
+    .btn {
+      font-family: var(--font-body);
+      font-size: 15px; font-weight: 500;
+      padding: 12px 24px;
+      border-radius: var(--radius-md);
+      border: 1px solid transparent;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      display: inline-flex; align-items: center; gap: 8px;
+    }
+    .btn--primary {
+      background: var(--color-primary);
+      color: var(--color-surface);
+    }
+    .btn--primary:hover { background: var(--color-primary-dark); }
+    .btn--secondary {
+      background: transparent;
+      color: var(--color-primary);
+      border-color: var(--color-primary);
+    }
+    .btn--secondary:hover { background: var(--color-primary); color: var(--color-surface); }
+    .btn--ghost {
+      background: transparent;
+      color: var(--color-ink);
+    }
+    .btn--ghost:hover { background: var(--color-neutral); }
+    .btn--lg { padding: 16px 32px; font-size: 16px; }
+    .btn--sm { padding: 8px 16px; font-size: 13px; }
+
+    /* ─── CARDS ─── */
+    .card-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: var(--space-4);
+    }
+    .card {
+      background: var(--color-surface);
+      border-radius: var(--radius-lg);
+      padding: var(--space-5);
+      box-shadow: var(--shadow-sm);
+      border: 1px solid var(--color-neutral);
+      transition: transform 0.2s, box-shadow 0.2s;
+    }
+    .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
+    .card-icon {
+      width: 48px; height: 48px;
+      background: var(--color-primary-light);
+      color: var(--color-primary-dark);
+      border-radius: var(--radius-md);
+      display: grid; place-items: center;
+      font-size: 22px; font-weight: 600;
+      margin-bottom: var(--space-3);
+    }
+    .card h4 {
+      font-family: var(--font-heading);
+      font-size: 20px; margin-bottom: var(--space-2);
+    }
+    .card p { color: var(--color-ink-muted); font-size: 14px; }
+
+    /* ─── BADGES ─── */
+    .badge {
+      display: inline-block;
+      font-size: 12px; font-weight: 600;
+      padding: 4px 10px;
+      border-radius: var(--radius-pill);
+      letter-spacing: 0.3px;
+    }
+    .badge--success { background: rgba(74,124,89,0.15); color: var(--color-success); }
+    .badge--warning { background: rgba(212,136,42,0.15); color: var(--color-warning); }
+    .badge--error   { background: rgba(192,74,60,0.15); color: var(--color-error); }
+    .badge--info    { background: rgba(74,111,165,0.15); color: var(--color-info); }
+    .badge--neutral { background: var(--color-neutral); color: var(--color-ink); }
+
+    /* ─── FORMS ─── */
+    .form-group { margin-bottom: var(--space-4); max-width: 480px; }
+    .form-label {
+      display: block;
+      font-size: 13px; font-weight: 500;
+      margin-bottom: var(--space-2);
+      color: var(--color-ink);
+    }
+    .form-input, .form-textarea, .form-select {
+      width: 100%;
+      padding: 12px 14px;
+      font-family: var(--font-body); font-size: 15px;
+      background: var(--color-surface);
+      border: 1px solid var(--color-neutral);
+      border-radius: var(--radius-md);
+      color: var(--color-ink);
+      transition: border-color 0.15s;
+    }
+    .form-input:focus, .form-textarea:focus, .form-select:focus {
+      outline: none;
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 3px rgba(44,95,45,0.1);
+    }
+    .form-helper {
+      font-size: 12px; color: var(--color-ink-muted);
+      margin-top: 4px;
+    }
+
+    /* ─── NAV PREVIEW ─── */
+    .nav-preview {
+      background: var(--color-surface);
+      padding: 18px var(--space-5);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-sm);
+      display: flex; align-items: center; justify-content: space-between;
+    }
+    .nav-logo {
+      font-family: var(--font-heading);
+      font-size: 22px; font-weight: 600;
+      color: var(--color-primary);
+    }
+    .nav-links { display: flex; gap: var(--space-4); }
+    .nav-links a {
+      color: var(--color-ink);
+      text-decoration: none;
+      font-size: 14px; font-weight: 500;
+    }
+    .nav-links a:hover { color: var(--color-primary); }
+
+    /* ─── PAGE PREVIEW HERO ─── */
+    .hero {
+      background: var(--color-dark);
+      color: var(--color-bg);
+      padding: var(--space-8) var(--space-6);
+      text-align: center;
+      border-radius: var(--radius-lg);
+      margin-bottom: var(--space-5);
+    }
+    .hero h2 {
+      font-family: var(--font-heading);
+      font-size: 56px; font-weight: 400;
+      line-height: 1.1; margin-bottom: var(--space-3);
+    }
+    .hero p {
+      font-size: 18px; max-width: 560px;
+      margin: 0 auto var(--space-4); opacity: 0.8;
+    }
+
+    /* ─── STATS BAR ─── */
+    .stats {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+      gap: var(--space-4);
+      padding: var(--space-5);
+      background: var(--color-surface);
+      border-radius: var(--radius-lg);
+      box-shadow: var(--shadow-sm);
+      margin-bottom: var(--space-5);
+    }
+    .stat { text-align: center; }
+    .stat-num {
+      font-family: var(--font-heading);
+      font-size: 40px; font-weight: 500;
+      color: var(--color-primary);
+      line-height: 1;
+    }
+    .stat-label {
+      font-size: 12px; text-transform: uppercase;
+      letter-spacing: 1px; color: var(--color-ink-muted);
+      margin-top: var(--space-2);
+    }
+
+    /* ─── TESTIMONIAL ─── */
+    .testimonial {
+      background: var(--color-primary-light);
+      color: var(--color-dark);
+      padding: var(--space-6);
+      border-radius: var(--radius-lg);
+      text-align: center;
+    }
+    .testimonial-quote {
+      font-family: var(--font-heading);
+      font-size: 24px; font-style: italic;
+      line-height: 1.4; margin-bottom: var(--space-4);
+    }
+    .testimonial-attr { font-size: 14px; font-weight: 600; }
+
+    /* ─── RESPONSIVE ─── */
+    @media (max-width: 768px) {
+      .toc { display: none; }
+      .main { margin-left: 0; }
+      .section { padding: var(--space-5) var(--space-4); }
+      .cover h1 { font-size: 48px; }
+      .type-h1 { font-size: 40px; }
+      .type-h2 { font-size: 32px; }
+    }
+  </style>
+</head>
+<body>
+
+  <!-- ─────────────── SIDEBAR ─────────────── -->
+  <nav class="toc">
+    <h3>Design System</h3>
+    <a href="#cover">Cover</a>
+    <a href="#colors">Colors</a>
+    <a href="#typography">Typography</a>
+    <a href="#buttons">Buttons</a>
+    <a href="#cards">Cards</a>
+    <a href="#badges">Badges</a>
+    <a href="#forms">Forms</a>
+    <a href="#navigation">Navigation</a>
+    <a href="#page-preview">Page Preview</a>
+  </nav>
+
+  <div class="main">
+
+    <!-- ═══════════════════ COVER ═══════════════════ -->
+    <section id="cover" class="cover">
+      <div class="cover-eyebrow">Design System v1.0</div>
+      <h1>[Your Brand]</h1>
+      <p>A single source of truth for how the brand looks, sounds, and behaves across every surface.</p>
+    </section>
+
+    <!-- ═══════════════════ COLORS ═══════════════════ -->
+    <section id="colors" class="section section--surface">
+      <span class="section-label">01 — Foundation</span>
+      <h2 class="section-title">Color Palette</h2>
+      <p class="section-subtitle">Use primary for CTAs and accents. Use neutrals for surfaces, dividers, and supporting text.</p>
+
+      <div class="swatch-grid">
+        <div class="swatch">
+          <div class="swatch-color" style="background: var(--color-primary);"></div>
+          <div class="swatch-meta"><div class="swatch-name">Primary</div><div class="swatch-hex">#2C5F2D</div></div>
+        </div>
+        <div class="swatch">
+          <div class="swatch-color" style="background: var(--color-primary-dark);"></div>
+          <div class="swatch-meta"><div class="swatch-name">Primary Dark</div><div class="swatch-hex">#1F4520</div></div>
+        </div>
+        <div class="swatch">
+          <div class="swatch-color" style="background: var(--color-primary-light);"></div>
+          <div class="swatch-meta"><div class="swatch-name">Primary Light</div><div class="swatch-hex">#97BC62</div></div>
+        </div>
+        <div class="swatch">
+          <div class="swatch-color" style="background: var(--color-accent);"></div>
+          <div class="swatch-meta"><div class="swatch-name">Accent</div><div class="swatch-hex">#C9A55C</div></div>
+        </div>
+        <div class="swatch">
+          <div class="swatch-color" style="background: var(--color-dark);"></div>
+          <div class="swatch-meta"><div class="swatch-name">Dark</div><div class="swatch-hex">#0F1419</div></div>
+        </div>
+        <div class="swatch">
+          <div class="swatch-color" style="background: var(--color-ink);"></div>
+          <div class="swatch-meta"><div class="swatch-name">Ink</div><div class="swatch-hex">#1A1A1A</div></div>
+        </div>
+        <div class="swatch">
+          <div class="swatch-color" style="background: var(--color-ink-muted);"></div>
+          <div class="swatch-meta"><div class="swatch-name">Ink Muted</div><div class="swatch-hex">#5C5C5C</div></div>
+        </div>
+        <div class="swatch">
+          <div class="swatch-color" style="background: var(--color-neutral); border: 1px solid #ddd;"></div>
+          <div class="swatch-meta"><div class="swatch-name">Neutral</div><div class="swatch-hex">#E5E2DC</div></div>
+        </div>
+        <div class="swatch">
+          <div class="swatch-color" style="background: var(--color-bg); border: 1px solid #ddd;"></div>
+          <div class="swatch-meta"><div class="swatch-name">Background</div><div class="swatch-hex">#FAFAF7</div></div>
+        </div>
+        <div class="swatch">
+          <div class="swatch-color" style="background: var(--color-success);"></div>
+          <div class="swatch-meta"><div class="swatch-name">Success</div><div class="swatch-hex">#4A7C59</div></div>
+        </div>
+        <div class="swatch">
+          <div class="swatch-color" style="background: var(--color-warning);"></div>
+          <div class="swatch-meta"><div class="swatch-name">Warning</div><div class="swatch-hex">#D4882A</div></div>
+        </div>
+        <div class="swatch">
+          <div class="swatch-color" style="background: var(--color-error);"></div>
+          <div class="swatch-meta"><div class="swatch-name">Error</div><div class="swatch-hex">#C04A3C</div></div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ═══════════════════ TYPOGRAPHY ═══════════════════ -->
+    <section id="typography" class="section">
+      <span class="section-label">02 — Foundation</span>
+      <h2 class="section-title">Typography</h2>
+      <p class="section-subtitle">Heading face: <strong>Fraunces</strong>. Body face: <strong>Inter</strong>. Keep line lengths under 75 characters.</p>
+
+      <div class="type-sample">
+        <div class="type-label">H1 / Display — Fraunces 64</div>
+        <div class="type-h1">The headline that opens the page.</div>
+      </div>
+      <div class="type-sample">
+        <div class="type-label">H2 — Fraunces 48</div>
+        <div class="type-h2">A section-opening statement.</div>
+      </div>
+      <div class="type-sample">
+        <div class="type-label">H3 — Fraunces 32</div>
+        <div class="type-h3">A supporting subsection title.</div>
+      </div>
+      <div class="type-sample">
+        <div class="type-label">H4 — Fraunces 24</div>
+        <div class="type-h4">Card or component heading.</div>
+      </div>
+      <div class="type-sample">
+        <div class="type-label">Body Large — Inter 18</div>
+        <div class="type-body-lg">Used for hero subheads and lead paragraphs. Keep tone confident and direct.</div>
+      </div>
+      <div class="type-sample">
+        <div class="type-label">Body — Inter 16</div>
+        <div class="type-body">The default text size. Most paragraphs, list items, card descriptions, and form labels live here.</div>
+      </div>
+      <div class="type-sample">
+        <div class="type-label">Small — Inter 13</div>
+        <div class="type-small">Captions, helper text, footnotes, metadata.</div>
+      </div>
+      <div class="type-sample">
+        <div class="type-label">Mono — SF Mono 14</div>
+        <div class="type-mono">code_snippets, hex_values, api_keys</div>
+      </div>
+    </section>
+
+    <!-- ═══════════════════ BUTTONS ═══════════════════ -->
+    <section id="buttons" class="section section--surface">
+      <span class="section-label">03 — Components</span>
+      <h2 class="section-title">Buttons</h2>
+      <p class="section-subtitle">Primary for one action per view. Secondary for alternatives. Ghost for low-priority.</p>
+
+      <div class="button-row" style="margin-bottom: var(--space-4);">
+        <button class="btn btn--primary">Primary Action</button>
+        <button class="btn btn--secondary">Secondary</button>
+        <button class="btn btn--ghost">Ghost</button>
+      </div>
+      <div class="button-row">
+        <button class="btn btn--primary btn--lg">Large CTA</button>
+        <button class="btn btn--primary">Default</button>
+        <button class="btn btn--primary btn--sm">Small</button>
+      </div>
+    </section>
+
+    <!-- ═══════════════════ CARDS ═══════════════════ -->
+    <section id="cards" class="section">
+      <span class="section-label">04 — Components</span>
+      <h2 class="section-title">Cards</h2>
+      <p class="section-subtitle">Use for feature blocks, pricing tiers, content modules.</p>
+
+      <div class="card-grid">
+        <div class="card">
+          <div class="card-icon">1</div>
+          <h4>Discover</h4>
+          <p>Surface insight before competitors do. Identify the buyers ready to move, not just the ones on a list.</p>
+        </div>
+        <div class="card">
+          <div class="card-icon">2</div>
+          <h4>Engage</h4>
+          <p>Reach prospects with the right message at the moment intent peaks. No more generic outreach.</p>
+        </div>
+        <div class="card">
+          <div class="card-icon">3</div>
+          <h4>Convert</h4>
+          <p>Move qualified opportunities through pipeline with systems that compound instead of breaking down.</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- ═══════════════════ BADGES ═══════════════════ -->
+    <section id="badges" class="section section--surface">
+      <span class="section-label">05 — Components</span>
+      <h2 class="section-title">Badges & Status</h2>
+      <p class="section-subtitle">Inline status indicators for tables, lists, and inline labels.</p>
+
+      <div style="display: flex; flex-wrap: wrap; gap: 12px;">
+        <span class="badge badge--success">Active</span>
+        <span class="badge badge--warning">Pending</span>
+        <span class="badge badge--error">Failed</span>
+        <span class="badge badge--info">In Review</span>
+        <span class="badge badge--neutral">Draft</span>
+      </div>
+    </section>
+
+    <!-- ═══════════════════ FORMS ═══════════════════ -->
+    <section id="forms" class="section">
+      <span class="section-label">06 — Components</span>
+      <h2 class="section-title">Forms</h2>
+      <p class="section-subtitle">Single column. Labels above inputs. Clear focus states.</p>
+
+      <div class="form-group">
+        <label class="form-label">Full Name</label>
+        <input class="form-input" type="text" placeholder="Jane Doe">
+      </div>
+      <div class="form-group">
+        <label class="form-label">Work Email</label>
+        <input class="form-input" type="email" placeholder="jane@company.com">
+        <div class="form-helper">We'll never share this with anyone.</div>
+      </div>
+      <div class="form-group">
+        <label class="form-label">Company Size</label>
+        <select class="form-select">
+          <option>1–10</option>
+          <option>11–50</option>
+          <option>51–200</option>
+          <option>200+</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label class="form-label">Message</label>
+        <textarea class="form-textarea" rows="4" placeholder="Tell us what you're working on…"></textarea>
+      </div>
+      <button class="btn btn--primary">Submit</button>
+    </section>
+
+    <!-- ═══════════════════ NAVIGATION ═══════════════════ -->
+    <section id="navigation" class="section section--surface">
+      <span class="section-label">07 — Patterns</span>
+      <h2 class="section-title">Navigation</h2>
+      <p class="section-subtitle">Top nav for marketing sites. Keep to five items + CTA.</p>
+
+      <div class="nav-preview">
+        <div class="nav-logo">[Your Brand]</div>
+        <div class="nav-links">
+          <a href="#">Product</a>
+          <a href="#">Solutions</a>
+          <a href="#">Pricing</a>
+          <a href="#">Resources</a>
+          <a href="#">About</a>
+        </div>
+        <button class="btn btn--primary btn--sm">Get Started</button>
+      </div>
+    </section>
+
+    <!-- ═══════════════════ PAGE PREVIEW ═══════════════════ -->
+    <section id="page-preview" class="section">
+      <span class="section-label">08 — Composition</span>
+      <h2 class="section-title">Page Preview</h2>
+      <p class="section-subtitle">Components composed into a real homepage section.</p>
+
+      <div class="hero">
+        <h2>The category-defining headline.</h2>
+        <p>One sentence that explains who you serve, what you do, and the outcome they get. Nothing else.</p>
+        <button class="btn btn--primary btn--lg">Primary CTA</button>
+      </div>
+
+      <div class="stats">
+        <div class="stat">
+          <div class="stat-num">$100M+</div>
+          <div class="stat-label">Revenue Impact</div>
+        </div>
+        <div class="stat">
+          <div class="stat-num">40%</div>
+          <div class="stat-label">Time Saved</div>
+        </div>
+        <div class="stat">
+          <div class="stat-num">500+</div>
+          <div class="stat-label">Companies Served</div>
+        </div>
+        <div class="stat">
+          <div class="stat-num">18mo</div>
+          <div class="stat-label">Avg. Payback</div>
+        </div>
+      </div>
+
+      <div class="testimonial">
+        <div class="testimonial-quote">"We rebuilt our entire GTM around this system. Pipeline coverage tripled in two quarters."</div>
+        <div class="testimonial-attr">— Customer Name, Title at Company</div>
+      </div>
+    </section>
+
+    <!-- ═══════════════════ FOOTER ═══════════════════ -->
+    <section class="section section--dark">
+      <h2 class="section-title" style="color: var(--color-bg);">Make it yours.</h2>
+      <p class="section-subtitle">Edit the CSS variables, swap the fonts, replace the copy. The structure stays the same.</p>
+      <p style="font-size: 13px; opacity: 0.5; margin-top: var(--space-4);">
+        Design System Template · Built for Pavilion class by Scott Wueschinski · GTMify.io
+      </p>
+    </section>
+
+  </div>
+</body>
+</html>