@opendirectory.dev/skills 0.1.56 → 0.1.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendirectory.dev/skills",
-  "version": "0.1.56",
+  "version": "0.1.57",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "bin": {

package/registry.json

@@ -116,6 +116,16 @@
     "version": "2.0",
     "path": "skills/google-trends-api-skills"
   },
+  {
+    "name": "graphic-case-study",
+    "description": "Generates a professionally designed case study PDF for B2B SaaS sales and marketing.",
+    "tags": [
+      "Marketing"
+    ],
+    "author": "OpenDirectory",
+    "version": "1.0.0",
+    "path": "skills/graphic-case-study"
+  },
   {
     "name": "graphic-slide-deck",
     "description": "Generates a professionally designed HTML slide deck from a brief or content.",

package/skills/graphic-case-study/README.md

@@ -0,0 +1,121 @@
+# graphic-case-study
+
+Generate a professionally designed case study PDF for B2B SaaS sales and marketing. Structured around the challenge → solution → results → testimonial arc. Outputs a browser-ready HTML file + print-ready PDF. Supports 7 page section layouts and 9 business style presets.
+
+## Install
+
+```bash
+npx "@opendirectory.dev/skills" install graphic-case-study --target claude
+```
+### Video Tutorial
+Watch this quick video to see how it's done:
+
+https://github.com/user-attachments/assets/ee98a1b5-ebc4-452f-bbfb-c434f2935067
+
+### Step 1: Download the skill from GitHub
+1. Copy the URL of this specific skill folder from your browser's address bar.
+2. Go to [download-directory.github.io](https://download-directory.github.io/).
+3. Paste the URL and click **Enter** to download.
+
+### Step 2: Install the Skill in Claude
+1. Open your **Claude desktop app**.
+2. Go to the sidebar on the left side and click on the **Customize** section.
+3. Click on the **Skills** tab, then click on the **+** (plus) icon button to create a new skill.
+4. Choose the option to **Upload a skill**, and drag and drop the `.zip` file (or you can extract it and drop the folder, both work).
+
+> **Note:** Make sure you upload the folder that contains the `SKILL.md` file directly.
+
+---
+
+## What it does
+
+- Asks the questions that determine how the case study should be structured
+- Interviews you (or processes your notes) to extract customer story details
+- Structures the narrative: customer context → challenge → solution → results → testimonial
+- Generates a single self-contained HTML file -- opens in any browser, no build tools
+- Splits into per-page HTML files for individual sharing or editing
+- Exports a print-ready PDF via Playwright (A4 portrait, 1200×1697px)
+- Supports 1-pager summary card, standard 2-pager, and detailed 4-pager formats
+
+## Example
+
+> "Create a 2-page case study for Acme Corp. They were spending 20 hrs/week on manual reporting. We automated it. They saved 80% of that time and reduced errors by 95%. Use midnight-editorial style."
+
+Output: 2-page PDF with cover, challenge/solution spread, results stat page, and closing CTA.
+
+---
+
+## Supported Styles
+
+| Style | Best for |
+|---|---|
+| clean-slate | Enterprise B2B, sales teams, any audience that expects professionalism |
+| midnight-editorial | Tech/AI companies, premium B2B, investor-grade materials |
+| matt-gray | Board materials, internal reviews, professional mixed audiences |
+| product-minimal | Product companies, design-forward B2B, design-savvy buyers |
+| mint-pixel-corporate | SaaS sales, tech startups, growth-stage B2B |
+| warm-earth | Agencies, consultancies, service businesses, health/education tech |
+| brutalist | Standout sales materials, design-forward agencies, bold brands |
+| magazine-red | Marketing agencies, brand-forward companies, editorial-style stories |
+| soft-cloud | Onboarding materials, customer education, approachable SaaS |
+
+---
+
+## Supported Page Layouts
+
+| Layout | Purpose |
+|---|---|
+| cover | Opening page -- customer name, headline result, logos |
+| overview | At-a-glance: company profile, industry, use case |
+| challenge | The problem -- context paragraph + pain points |
+| solution | How your product solved it -- feature callouts |
+| results | Key metrics in large stat format + supporting narrative |
+| testimonial | Full-width pull quote with attribution |
+| closing-cta | Vendor logo + contact info + next step CTA |
+
+---
+
+## Output
+
+| File | What it is |
+|---|---|
+| `case-study/[slug]/index.html` | Full case study, browser-ready |
+| `case-study/[slug]/page-01.html` ... | Per-page HTML files for individual sharing |
+| `case-study/[slug].pdf` | Print-ready PDF (A4 portrait) |
+
+Standard dimensions: 1200×1697px (A4 portrait). Landscape 4:3 (1200×900) available on request.
+
+---
+
+## Parameters
+
+| Param | Required | Notes |
+|---|---|---|
+| customer_name | Yes | Company name (or "Anonymous Fortune 500 Retailer" to anonymize) |
+| challenge | Yes | Core problem in 2-5 sentences |
+| solution | Yes | What your product did |
+| results | Yes | Measurable outcomes -- ideally 3 stats |
+| customer_context | No | Industry, size, location (for overview page) |
+| testimonial | No | Customer quote + name + title |
+| page_count | No | 1 / 2 / 4 (default: 2) |
+| customer_logo | No | Logo URL for cover page |
+| your_company_name | No | Vendor name + logo URL for CTA page |
+| style | No | One of 9 named presets or "show me options" (default: clean-slate) |
+| orientation | No | A4 portrait (default) or landscape 4:3 |
+| anonymize | No | Keep name or replace with industry descriptor |
+| slug | No | Filename slug (derived from customer name if omitted) |
+
+---
+
+## Dependencies
+
+This skill requires the `frontend-slides` skill files at:
+`/Users/ksd/Desktop/Varnan_skills/frontend-slides/`
+
+Specifically:
+- `viewport-base.css` -- responsive page foundation (included verbatim in generated HTML)
+- `scripts/export-pdf.sh` -- PDF export via Playwright (Node.js required, auto-installs; use `--portrait` flag for A4)
+
+## No API keys required
+
+Pure AI skill. No external services, no scraping, no dependencies beyond the above.

package/skills/graphic-case-study/SKILL.md

@@ -0,0 +1,312 @@
+---
+name: graphic-case-study
+description: Generates a professionally designed case study PDF for B2B SaaS sales and marketing. Supports 7 page layouts, 9 style presets, 1-4 page output. Trigger when user says "create a case study", "write a customer story", "make a case study PDF", "design a success story", "turn this customer win into a PDF".
+compatibility: [claude-code, gemini-cli, github-copilot]
+author: OpenDirectory
+version: 1.0.0
+---
+
+# Graphic Case Study
+
+Generate a professionally designed B2B case study PDF from customer story details. Output is a single self-contained HTML file (opens in any browser) plus a print-ready PDF. Supports 7 page section layouts and 9 style presets.
+
+---
+
+**Critical rules -- non-negotiable:**
+
+1. Every page MUST fit within the A4 canvas (1200×1697px). No content overflow.
+2. ALL scalable font sizes use `clamp()`. Fixed px only for structural borders/lines.
+3. Single self-contained HTML: all CSS inline. Zero external dependencies except font CDN link.
+4. Never dump HTML in chat. Save to file, show summary only.
+5. Results stat numbers MUST be visually dominant -- at least 3× body text size.
+6. No generic AI slop: no Inter as display font, no purple gradient on white, no "Thank You" closing.
+
+---
+
+## Step 1: Brief Intake
+
+Need four things to start. If all four present in the message: skip to Step 2.
+
+If any missing, ask exactly:
+
+> "To create your case study, I need four things:
+> 1. **Customer name** -- company name (or a descriptor to anonymize: "Fortune 500 Retailer")
+> 2. **Challenge** -- what problem did they have before using your product? (2-5 sentences)
+> 3. **Solution** -- what did your product do to solve it? (features, approach)
+> 4. **Results** -- measurable outcomes: ideally 3 stats (%, time saved, revenue impact, etc.)"
+
+Wait for all four before continuing.
+
+---
+
+## Step 2: Complete Intake
+
+Ask all questions in one message, grouped by category. User can skip any -- defaults apply.
+
+> "A few questions before I start:
+>
+> **Content**
+> 1. **Customer context** -- industry, company size, location? (optional, used for overview page)
+> 2. **Testimonial** -- customer quote (40 words max) + speaker name + title? (or "I'll add later")
+> 3. **Page count** -- 1-pager (summary card) / 2-pager (standard, default) / 4-pager (detailed)
+> 4. **Customer logo** -- URL or "none"
+>
+> **Design**
+> 5. **Your company name** -- vendor name for the CTA page (+ logo URL if available)
+> 6. **Style** -- clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / "show me options"
+> 7. **Orientation** -- A4 portrait (default, 1200×1697) / landscape 4:3 (1200×900)
+>
+> **Output**
+> 8. **Anonymize?** -- Keep company name / replace with industry descriptor
+> 9. **Slug** -- filename slug (e.g. "acme-corp-2025"); I'll derive from customer name if skipped"
+
+**Defaults if skipped:**
+
+| Question | Default |
+|---|---|
+| Customer context | none |
+| Testimonial | none |
+| Page count | 2 |
+| Customer logo | none |
+| Your company name | derived from context |
+| Style | clean-slate |
+| Orientation | A4 portrait |
+| Anonymize | keep name |
+| Slug | kebab-case of customer name |
+
+**If style = "show me options":**
+Generate 3 single-page HTML previews (cover page only). Save to `.claude-design/previews/style-a.html`, `style-b.html`, `style-c.html`. Open each: `open .claude-design/previews/style-a.html` etc. Choose 3 style presets that match the case study context. Ask user to pick before Step 3.
+
+---
+
+## Step 2.5: Internal Page Architecture (not shown to user)
+
+Derive internally before Step 3. Never ask the user.
+
+**Hero metric identification:**
+Scan results for the single most impressive number (largest %, biggest $, greatest multiplier). This metric gets accent-color treatment and maximum visual weight on the results page.
+
+**Page count -> structure template:**
+
+| Count | Page sequence |
+|---|---|
+| 1-pager | 1 page: [cover-compact] -- all content condensed into one page |
+| 2-pager | Page 1: [cover] + [challenge-solution] stacked · Page 2: [results] + [testimonial-cta] stacked |
+| 4-pager | Page 1: [cover] · Page 2: [overview] + [challenge] · Page 3: [solution] + [results] · Page 4: [testimonial] + [closing-cta] |
+
+**Visual character** derived from style choice:
+- clean-slate → professional authority, generous whitespace, enterprise-safe
+- midnight-editorial → premium dark, editorial weight, tech/AI companies
+- matt-gray → trusted neutral, operational, board-safe
+- warm-earth → approachable warmth, consulting/agency/services
+- brutalist → bold standout, design-forward, attention-commanding
+- If not specified: default to clean-slate for B2B SaaS, midnight-editorial for technical companies.
+
+---
+
+## Step 3: Page Structure
+
+Read `references/page-library.md` before planning.
+
+Plan the full page sequence. Assign section types from the 7 in `references/page-library.md` to each page section. Multiple sections can stack within one page.
+
+Output as numbered list with `[section-type]` labels per page. Example for 2-pager:
+
+```
+Proposed structure (2 pages, clean-slate style):
+
+Page 1:
+  [cover] -- Acme Corp cut reporting time by 80%
+  [challenge-solution] -- manual process / DataPulse automation
+
+Page 2:
+  [results] -- 80% time saved, 95% error reduction, $200K saved
+  [closing-cta] -- Get in touch: hello@datapulse.io
+
+Does this structure work, or should I adjust anything?
+```
+
+Wait for confirmation before Step 4.
+
+---
+
+## Step 4: Content Draft
+
+Write per-page-section copy. Plain text only -- no HTML yet.
+
+**Copy rules per section:**
+
+- `cover`: company name + headline result (12 words max, MUST lead with the number: "Acme cut reporting time by 80%") + optional category label ("Customer Success Story")
+- `overview`: 4 facts only -- Industry / Company size / Location / Use case -- each value 4 words max
+- `challenge`: context paragraph (2-3 sentences) + 3 pain points (1 sentence each, no bullet filler)
+- `solution`: 2-3 feature callouts -- feature name (3 words max) + 1-sentence outcome description each
+- `results`: 3 metrics (number + short label + 1-line context). Optional: 2-sentence narrative. ZERO body copy at same weight as the numbers.
+- `testimonial`: exact quote (40 words max) + speaker name + title + company
+- `closing-cta`: headline (5 words max) + CTA action text (3 words) + email + URL (both required)
+
+**Forbidden words** (no exceptions): "powerful", "seamless", "game-changing", "leverage", "innovative", "revolutionary", "transform", "cutting-edge", "robust", "unlock", "scalable" (as filler adjective).
+
+**Copy philosophy:** Numbers beat adjectives. Lead every section with the outcome, not the feature. Fragments are fine.
+
+---
+
+## Step 5: HTML Generation
+
+Read ALL before generating any HTML:
+
+**This skill's references:**
+- `references/design-system.md`
+- `references/page-library.md`
+- `references/style-presets.md`
+
+**frontend-slides cross-references (read this exact file):**
+- `/Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css` -- include FULL contents verbatim inside `<style>` block
+
+**Generation rules:**
+
+1. Single self-contained HTML. All CSS inline. Font CDN `<link>` is the only external reference.
+2. Include the FULL verbatim contents of `viewport-base.css` inside the `<style>` block -- do not paraphrase or shorten it.
+3. After pasting viewport-base.css, add portrait A4 overrides:
+   ```css
+   /* A4 portrait overrides */
+   html { scroll-snap-type: none; scroll-behavior: auto; }
+   .slide {
+     width: 100vw;
+     height: 100vh;
+     height: 100dvh;
+     overflow: hidden;
+     display: flex;
+     flex-direction: column;
+     position: relative;
+     scroll-snap-align: none;
+   }
+   ```
+4. Every page section = `<section class="slide">` -- required for export-pdf.sh detection.
+5. Comment each page: `/* === PAGE N: SECTION-TYPES === */`
+6. Results stat numbers: `clamp(2.5rem, 7vw, 5rem)` minimum. Hero metric in accent color. Other metrics in secondary text color.
+7. No images provided -> CSS-generated visuals (geometric shapes, gradient backgrounds, icon-like CSS constructs). Never output visible placeholder boxes.
+8. No SlidePresentation JS. Include only a minimal IntersectionObserver for `.reveal` entrance animations (viewer experience; PDF export renders to final state automatically).
+9. For landscape 4:3 (if requested): use `clamp()` values from graphic-slide-deck proportions -- landscape 1200×900 means 1vw=12px, similar to portrait.
+
+**Typography discipline (all clamp-based, tuned for 1200px A4 portrait):**
+- Cover headline: `clamp(2rem, 5vw, 3.5rem)`
+- Section heading: `clamp(1.25rem, 2.5vw, 2rem)`
+- Body: `clamp(0.875rem, 1.25vw, 1.1rem)`
+- Stat number (hero): `clamp(3rem, 8vw, 5.5rem)` in accent color
+- Stat number (secondary): `clamp(2.5rem, 7vw, 5rem)` in secondary color
+- Quote: `clamp(1.1rem, 2vw, 1.5rem)` italic
+- Label/caption: `clamp(0.65rem, 0.9vw, 0.8rem)` uppercase
+
+---
+
+## Step 6: Self-QA
+
+Check every item. Fix every failure -- do not skip.
+
+**Layout and rendering:**
+- [ ] Every `.slide` has `height:100vh; height:100dvh; overflow:hidden`
+- [ ] ALL scalable font sizes use `clamp()`
+- [ ] No content overflows at 1200×1697 viewport -- check each page's density against `references/page-library.md` limits
+- [ ] CSS-generated visuals present for all image placeholder spots
+- [ ] No `-clamp()`, `-min()`, `-max()` in CSS -- wrap negatives in `calc(-1 * ...)`
+
+**Structure:**
+- [ ] Page count matches Step 3 plan
+- [ ] Every page uses `class="slide"`
+- [ ] All content sections from Step 3 are present
+- [ ] `class="slide"` only on `<section>` elements, not inner divs
+
+**Design quality:**
+- [ ] Hero metric visually dominant on results section -- accent color, largest size, no competing elements at equal weight
+- [ ] Style preset tokens applied consistently (colors, fonts from `references/style-presets.md`)
+- [ ] No slop patterns (check DO NOT USE list in `references/style-presets.md`)
+- [ ] Typography hierarchy clear: cover headline >> section heading >> body (at least 2:1 ratio)
+
+**Content:**
+- [ ] No forbidden words in any copy
+- [ ] Cover headline leads with a number or measurable result
+- [ ] Testimonial quote is 40 words or fewer
+- [ ] Closing CTA has headline + action + email + URL (all four)
+- [ ] All stats in results section have labels (no naked numbers)
+
+---
+
+## Step 7: Output
+
+**Save the main HTML:**
+
+```bash
+mkdir -p case-study/[slug]
+```
+
+Write to: `case-study/[slug]/index.html`
+
+Open it: `open case-study/[slug]/index.html`
+
+**Per-page HTML files (always generate these):**
+
+Extract each `<section class="slide">` from the main HTML. For each one, create a standalone file with:
+- The full `<style>` block from the main HTML (copied verbatim)
+- The individual `<section class="slide">` wrapped in a minimal HTML shell
+- No JS (static per-page viewing)
+
+Write to: `case-study/[slug]/page-01.html`, `page-02.html`, etc.
+
+**PDF export (always do this for A4 portrait):**
+
+```bash
+bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \
+  case-study/[slug]/index.html \
+  case-study/[slug].pdf --portrait
+```
+
+If landscape 4:3 was requested, omit `--portrait` and use `--compact` instead (1280×720).
+
+Note: first run installs Playwright automatically (~30-60 seconds). Inform the user.
+
+**Cleanup:** Delete `.claude-design/previews/` if style preview files were generated in Step 2.
+
+---
+
+## Step 8: Summary (no HTML in chat)
+
+Present in chat:
+
+```
+## Case Study: [customer name]
+Date: [today] | Style: [style] | Pages: [N] | Format: A4 portrait
+Vendor: [your company] | Customer: [customer name]
+
+---
+
+### Files
+Main:      case-study/[slug]/index.html
+Per-page:  case-study/[slug]/page-01.html -> page-0N.html
+PDF:       case-study/[slug].pdf
+
+---
+
+### Case Study Checklist
+- [ ] Replace [IMAGE: logo] placeholder with real logo file
+- [ ] Verify all stats are accurate (page [results page number])
+- [ ] Confirm customer has approved quote usage
+- [ ] Proof company name spelling, speaker title accuracy
+- [ ] Test PDF page count = [N] and no content clips
+- [ ] Share PDF at case-study/[slug].pdf
+```
+
+Do not print HTML in chat.
+
+---
+
+## Section Reference
+
+| Section | Purpose |
+|---|---|
+| cover | Opening page -- customer name, headline result, logos |
+| overview | At-a-glance profile -- industry, size, use case |
+| challenge | The problem -- context + pain points |
+| solution | How your product solved it -- feature callouts |
+| results | Key metrics + supporting narrative |
+| testimonial | Full-width pull quote from customer |
+| closing-cta | Vendor logo + contact info + next step |

package/skills/graphic-case-study/evals/evals.json

@@ -0,0 +1,35 @@
+{
+  "skill_name": "graphic-case-study",
+  "evals": [
+    {
+      "id": 1,
+      "prompt": "Create a 2-page case study for Acme Corp. They were spending 20 hours per week on manual reporting. We automated it. They saved 80% of that time and reduced reporting errors by 95%. Use midnight-editorial style.",
+      "expected_output": "All 4 required fields present -- skips Step 1. Asks 9 questions in Step 2. After answers: reads midnight-editorial tokens (Instrument Serif + Inter, #D8F90A accent, #111111 bg). Reads viewport-base.css verbatim, adds A4 portrait overrides. 2-page structure: Page 1 = [cover] + [challenge-solution]; Page 2 = [results] + [closing-cta]. Results page: hero stat '80%' in #D8F90A at clamp(3rem, 8vw, 5.5rem), '95%' as secondary stat at clamp(2.5rem, 7vw, 5rem) in secondary color. No forbidden words. IntersectionObserver for .reveal animations. Per-page HTML files written. PDF export called with --portrait flag. Summary shows file paths, page count, checklist.",
+      "files": []
+    },
+    {
+      "id": 2,
+      "prompt": "Make me some case study.",
+      "expected_output": "customer_name, challenge, solution, results all missing. Does NOT read any reference files. Does NOT generate any HTML, structure plan, or outline. Asks exactly: 'To create your case study, I need four things: 1. Customer name 2. Challenge 3. Solution 4. Results'. Stops and waits. After user provides all four, proceeds to Step 2 and asks all 9 grouped questions in one message.",
+      "files": []
+    },
+    {
+      "id": 3,
+      "prompt": "Create a 1-page case study summary card for Vertex IO. They had 3-day sales cycle delays due to manual qualification. DataPulse automated it. Result: 60% faster qualification, $1.2M additional pipeline closed in Q1. Style: clean-slate.",
+      "expected_output": "Skips Step 1. Asks 9 questions. 1-pager structure: single [cover-compact] page with all content condensed (headline + challenge 2 sentences + solution 2 sentences + 3 inline stats + CTA at bottom). clean-slate tokens: Plus Jakarta Sans 800, #0F172A accent, white bg, rounded cards 16px, badge pills (#E0F2FE). Hero stat '60%' in #0F172A at clamp(3rem, 8vw, 5.5rem). '$1.2M' as secondary stat. Viewport-base.css included verbatim. A4 portrait overrides applied. Per-page (just 1) HTML written. PDF export --portrait called. Summary shown with checklist.",
+      "files": []
+    },
+    {
+      "id": 4,
+      "prompt": "Build a 4-page detailed case study for Stride Labs. Industry: fintech. Challenge: manual compliance reporting took 40 hours/week. Solution: automated audit trail + real-time dashboards. Results: 40-hour reduction per week, 0 compliance failures in 18 months, 3x faster audits. Quote from their CFO: 'We went from dreading audits to sailing through them.' Style: warm-earth.",
+      "expected_output": "Skips Step 1. Asks 9 questions. Reads warm-earth preset tokens: Lora display font, Source Sans 3 body, #D4622A accent, #FDF6EF bg, #2C1A0E cover bg. 4-page structure: Page 1 [cover] | Page 2 [overview]+[challenge] | Page 3 [solution]+[results] | Page 4 [testimonial]+[closing-cta]. Challenge page has drop cap via ::first-letter on opening paragraph (Lora, clamp(3rem,7vw,5rem), #D4622A). Results: hero metric '40 hours/week' in #D4622A at hero stat size. '0 compliance failures' and '3x faster' as secondary stats. Testimonial: CFO quote quoted exactly, <=40 words. Closing CTA has email + URL. 4 per-page HTML files generated. PDF export --portrait called. Summary shown.",
+      "files": []
+    },
+    {
+      "id": 5,
+      "prompt": "Create a 2-page case study. Anonymize the customer -- just say 'Global Logistics Provider'. Challenge: supply chain visibility gaps causing $500K/month in delays. Solution: real-time tracking integration. Results: $400K/month savings, 87% reduction in delay incidents. Style: show me options.",
+      "expected_output": "Skips Step 1. Asks 9 questions. User answers style='show me options': generates 3 cover-page-only HTML previews saved to .claude-design/previews/style-a.html, style-b.html, style-c.html, opens each automatically, asks user to pick. After pick: reads chosen preset tokens from references/style-presets.md. Customer name used as 'Global Logistics Provider' throughout (anonymized per request). 2-page structure: Page 1 = [cover]+[challenge-solution]; Page 2 = [results]+[closing-cta] (no testimonial -- not provided). Hero metric '$400K/month' in accent color at hero stat size. '87%' as secondary stat. No testimonial section since not provided. .claude-design/previews/ deleted after generation. PDF export --portrait called. Summary shown.",
+      "files": []
+    }
+  ]
+}

package/skills/graphic-case-study/references/design-system.md

@@ -0,0 +1,104 @@
+# Design System — graphic-case-study
+
+Typography, spacing, and design rules for A4 portrait case study pages. All tokens tuned for 1200px viewport width (A4 portrait format via Playwright).
+
+---
+
+## Typography Scale
+
+All values use `clamp()`. At 1200px viewport: 1vw = 12px.
+
+```
+Cover headline:         clamp(2rem, 5vw, 3.5rem)       -- 60px at 1200px
+Section heading (h2):   clamp(1.25rem, 2.5vw, 2rem)    -- 30px at 1200px
+Body text:              clamp(0.875rem, 1.25vw, 1.1rem) -- 15px at 1200px
+Stat number (hero):     clamp(3rem, 8vw, 5.5rem)        -- 96px at 1200px | accent color
+Stat number (support):  clamp(2.5rem, 7vw, 5rem)        -- 84px at 1200px | secondary color
+Quote text:             clamp(1.1rem, 2vw, 1.5rem)      -- 24px at 1200px | italic, display font
+Stat label:             clamp(0.7rem, 1vw, 0.875rem)    -- 12px | uppercase, 0.1em tracking
+Caption / label:        clamp(0.65rem, 0.9vw, 0.8rem)   -- 10.8px | uppercase, 0.12em tracking
+```
+
+**Why these differ from graphic-slide-deck:**
+- Viewport is 1200px not 1920px -- vw values resolve smaller
+- A4 is a reading document, not a projector slide -- body text minimum is higher
+- Stat numbers cap at 5.5rem not 9rem -- A4 proportions, not stadium-screen scale
+- Generous minimum clamp values ensure readability in print PDF export
+
+**Letter spacing:**
+- Cover/display headlines: `-0.03em`
+- Section headings: `-0.02em`
+- Body: `0` (no letter spacing -- readability first)
+- Labels/captions: `+0.1em` to `+0.14em`
+
+---
+
+## Spacing Rhythm
+
+Valid values: 8 / 16 / 24 / 32 / 48 / 64 / 96px. No arbitrary values.
+
+```
+Page padding:         clamp(2.5rem, 6%, 4.5rem)        -- 40–72px
+Section gap:          clamp(1.5rem, 3%, 3rem)           -- 24–48px
+Content gap:          clamp(0.875rem, 1.5%, 1.75rem)    -- 14–28px
+Element gap:          clamp(0.5rem, 1%, 1rem)            -- 8–16px
+Column gap:           clamp(1.5rem, 4%, 3rem)            -- 24–48px
+```
+
+---
+
+## One Hero Metric Rule
+
+Every results section has exactly ONE metric that is visually dominant:
+- Hero metric: accent color, `clamp(3rem, 8vw, 5.5rem)`, full opacity
+- Supporting metrics: secondary text color, `clamp(2.5rem, 7vw, 5rem)`, full opacity
+- Context line below: body color, body size, max 12 words
+
+**This is the single thing the reader remembers.** If two metrics fight for dominance, neither wins.
+
+---
+
+## Page Density Guide
+
+Each page section has a natural density:
+
+| Section | Density | Key rule |
+|---|---|---|
+| cover | Very open | Headline + company name only. Breathe. |
+| overview | Moderate | 4 fact cells in a 2×2 grid. No paragraphs. |
+| challenge | Moderate-dense | Context paragraph + 3 pain points. |
+| solution | Moderate | 2-3 feature callouts. CSS icon shapes. |
+| results | Very open | Numbers need space. Nothing competes. |
+| testimonial | Very open | The quote fills the section. Nothing else. |
+| closing-cta | Open | One action. Contact info. Done. |
+
+**Stacking rule for 1-pager and 2-pager:** When multiple sections share a page, alternate dense sections with open ones. Never stack two dense sections. Never stack two open sections unless one is tiny (e.g., a 2-line testimonial after a big results block).
+
+---
+
+## Background Depth
+
+Use subtle background variation to create visual rhythm across pages:
+- Cover: style preset's primary background (often dark or richly styled)
+- Overview / Challenge: slightly lighter/alternate background from preset
+- Solution: main slide background
+- Results: main slide background (never alter -- numbers need neutral ground)
+- Testimonial: accent color at 5-8% opacity OR preset's alternate section bg
+- Closing CTA: dark or full-accent background (inversion for finality)
+
+---
+
+## Slop Patterns to Avoid
+
+| Pattern | Why it's wrong |
+|---|---|
+| Inter as display font | Generic -- no character at heading size |
+| Every section same background | No visual rhythm across pages |
+| Stat numbers at body text size | Defeats the results section entirely |
+| Bullet list format for testimonial | A quote is a quote, not a list |
+| "Thank You" as closing-cta headline | Wasted opportunity -- no action, no contact |
+| Gradient on every section | Cheap depth signal, fights the editorial feel |
+| Unstyled logo placeholder boxes | Looks unfinished -- use CSS initials or shape |
+| Purple-to-blue gradient on white | Overused AI aesthetic -- signals no design thinking |
+| Body text same color on every section | No hierarchy, no visual rhythm |
+| Results stats smaller than section headings | Hierarchy inverted -- misses the point |

package/skills/graphic-case-study/references/page-library.md

@@ -0,0 +1,333 @@
+# Page Library — graphic-case-study
+
+7 page section types for A4 portrait case studies. Each section is a content block placed within a `<section class="slide">`. Multiple sections can stack vertically within a single page.
+
+All dimensions assume: viewport 1200px wide × 1697px tall (A4 portrait).
+
+---
+
+## 1. cover
+
+**Purpose:** Opening page -- customer name, headline result, logos
+**Density:** Very open
+**Content limits:** Headline 12 words max (leads with number), customer name, optional category label, logo placeholders
+
+**HTML structure:**
+```html
+<section class="slide page--cover">
+  <div class="page-inner">
+    <div class="cover-top">
+      <span class="cover-label reveal">Customer Success Story</span>
+    </div>
+    <div class="cover-body">
+      <h1 class="cover-headline reveal">[Headline result — leads with number]</h1>
+      <p class="cover-company reveal">[Customer name]</p>
+    </div>
+    <div class="cover-bottom">
+      <div class="logo-group reveal">
+        <div class="logo-box logo-customer">[CSS initials or img]</div>
+        <span class="logo-sep">×</span>
+        <div class="logo-box logo-vendor">[CSS initials or img]</div>
+      </div>
+    </div>
+  </div>
+</section>
+```
+
+**CSS approach:**
+- `.page-inner`: `display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: var(--page-padding);`
+- `.cover-headline`: `font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.03em; line-height: 1.1; max-width: 20ch;`
+- `.cover-label`: uppercase, caption size, accent color or muted
+- `.logo-box`: `width: clamp(48px, 6vw, 80px); height: clamp(48px, 6vw, 80px); display: flex; align-items: center; justify-content: center;` -- use CSS-generated initials when no logo URL provided
+
+**Background:** Style preset's primary (often the most distinctive background of the preset -- dark, full-color, or richly styled). This is the first impression.
+
+**Do NOT:** Put challenge/solution text here. Cover = one idea only.
+
+---
+
+## 2. overview
+
+**Purpose:** At-a-glance customer profile
+**Density:** Moderate
+**Content limits:** 4 fact cells max (label + value each). No paragraph text.
+
+**HTML structure:**
+```html
+<div class="section--overview reveal">
+  <h2 class="section-label">At a Glance</h2>
+  <div class="overview-grid">
+    <div class="fact-cell">
+      <span class="fact-label">Industry</span>
+      <span class="fact-value">B2B SaaS</span>
+    </div>
+    <div class="fact-cell">
+      <span class="fact-label">Company size</span>
+      <span class="fact-value">200-500 employees</span>
+    </div>
+    <div class="fact-cell">
+      <span class="fact-label">Location</span>
+      <span class="fact-value">San Francisco, CA</span>
+    </div>
+    <div class="fact-cell">
+      <span class="fact-label">Use case</span>
+      <span class="fact-value">Revenue operations</span>
+    </div>
+  </div>
+</div>
+```
+
+**CSS approach:**
+- `.overview-grid`: `display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.75rem, 2%, 1.5rem);`
+- `.fact-cell`: preset card background + border, `border-radius: var(--card-radius); padding: clamp(0.75rem, 1.5%, 1.25rem);`
+- `.fact-label`: caption size, muted color, uppercase, 0.1em tracking
+- `.fact-value`: body size, primary text color, font-weight: 600
+
+---
+
+## 3. challenge
+
+**Purpose:** The customer's problem before your product
+**Density:** Moderate
+**Content limits:** Context paragraph (2-3 sentences) + 3 pain points (1 sentence each)
+
+**HTML structure:**
+```html
+<div class="section--challenge">
+  <h2 class="section-heading reveal">The Challenge</h2>
+  <div class="challenge-body">
+    <p class="challenge-context reveal">[Context paragraph]</p>
+    <ul class="pain-list">
+      <li class="pain-item reveal">[Pain point 1]</li>
+      <li class="pain-item reveal">[Pain point 2]</li>
+      <li class="pain-item reveal">[Pain point 3]</li>
+    </ul>
+  </div>
+</div>
+```
+
+**CSS approach:**
+- Two-column layout at full page: `display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4%, 3rem);` OR single-column if stacking with other sections
+- `.pain-list`: no browser bullets -- use `list-style: none; display: flex; flex-direction: column; gap: clamp(0.5rem, 1%, 1rem);`
+- `.pain-item::before`: `content: "—"; color: var(--accent); margin-right: 0.75em;`
+- `.section-heading`: `clamp(1.25rem, 2.5vw, 2rem)` weight 700
+
+**Signature element for warm-earth style:** Drop cap on opening paragraph:
+```css
+.challenge-context::first-letter {
+  font-family: var(--font-display);
+  font-size: clamp(3rem, 7vw, 5rem);
+  float: left;
+  margin: 0.05em 0.12em 0 0;
+  color: var(--accent);
+  line-height: 0.8;
+}
+```
+
+---
+
+## 4. solution
+
+**Purpose:** How your product addressed the challenge
+**Density:** Moderate
+**Content limits:** 2-3 feature callouts (name 3 words max + 1-sentence description each)
+
+**HTML structure:**
+```html
+<div class="section--solution">
+  <h2 class="section-heading reveal">The Solution</h2>
+  <div class="feature-grid">
+    <div class="feature-card reveal">
+      <div class="feature-icon">[CSS shape]</div>
+      <div class="feature-name">Feature Name</div>
+      <p class="feature-desc">One sentence describing the outcome this feature delivers.</p>
+    </div>
+    <!-- repeat for 2-3 features -->
+  </div>
+</div>
+```
+
+**CSS approach:**
+- `.feature-grid`: `display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(0.75rem, 2%, 1.5rem);`
+- `.feature-card`: preset card background + border + border-radius, `padding: clamp(1rem, 2%, 1.75rem);`
+- `.feature-icon`: CSS-generated shape (circle, square, hexagon outline) using `::before` or inline shape elements, 32–48px, accent color or accent-light fill
+- `.feature-name`: `font-size: clamp(0.875rem, 1.25vw, 1rem); font-weight: 700; margin-bottom: 0.5em;`
+- `.feature-desc`: body size, secondary color
+
+**CSS icon patterns (no images needed):**
+```css
+/* Circle icon */
+.feature-icon {
+  width: clamp(32px, 3vw, 48px);
+  height: clamp(32px, 3vw, 48px);
+  border-radius: 50%;
+  background: rgba(var(--accent-rgb), 0.12);
+  border: 2px solid var(--accent);
+  margin-bottom: 1rem;
+}
+/* Or: filled square with rounded corner */
+.feature-icon {
+  width: clamp(32px, 3vw, 48px);
+  height: clamp(32px, 3vw, 48px);
+  background: var(--accent);
+  border-radius: 6px;
+  margin-bottom: 1rem;
+}
+```
+
+---
+
+## 5. results
+
+**Purpose:** Measurable impact -- the most important section
+**Density:** Open (numbers need space)
+**Content limits:** 3 metrics (number + label + 1-line context each). Optional 2-sentence narrative.
+
+**HTML structure:**
+```html
+<div class="section--results">
+  <h2 class="section-heading reveal">The Results</h2>
+  <div class="stat-row">
+    <div class="stat-item stat-item--hero reveal" style="--i:0">
+      <div class="stat-number" data-count="80" data-suffix="%">0%</div>
+      <div class="stat-label">Time saved on reporting</div>
+      <div class="stat-context">Down from 20 hours per week</div>
+    </div>
+    <div class="stat-item reveal" style="--i:1">
+      <div class="stat-number" data-count="95" data-suffix="%">0%</div>
+      <div class="stat-label">Reduction in errors</div>
+      <div class="stat-context">Across all report types</div>
+    </div>
+    <div class="stat-item reveal" style="--i:2">
+      <div class="stat-number" data-prefix="$" data-count="200" data-suffix="K">$0K</div>
+      <div class="stat-label">Annual cost savings</div>
+      <div class="stat-context">Labor and tooling combined</div>
+    </div>
+  </div>
+  <!-- optional -->
+  <p class="results-narrative reveal">[2-sentence narrative]</p>
+</div>
+```
+
+**CSS approach:**
+- `.stat-row`: `display: flex; gap: clamp(1.5rem, 4%, 3rem); align-items: flex-start;` (horizontal, 3 stats)
+- `.stat-item`: `flex: 1; display: flex; flex-direction: column; gap: 0.5rem;`
+- `.stat-number`: `font-family: var(--font-display); font-size: clamp(2.5rem, 7vw, 5rem); font-weight: 400; letter-spacing: -0.04em; line-height: 0.9; color: var(--text-secondary);`
+- `.stat-item--hero .stat-number`: same but `color: var(--accent);` and `font-size: clamp(3rem, 8vw, 5.5rem);`
+- `.stat-label`: `font-size: clamp(0.7rem, 1vw, 0.875rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary);`
+- `.stat-context`: `font-size: clamp(0.65rem, 0.9vw, 0.8rem); color: var(--text-muted);`
+
+**Stagger animation:**
+```css
+.stat-item {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+  transition-delay: calc(var(--i) * 0.15s);
+}
+.slide.visible .stat-item { opacity: 1; transform: none; }
+```
+
+**ZERO body copy competing with the numbers.** The optional narrative goes BELOW the stat row in smaller body text, clearly subordinate.
+
+---
+
+## 6. testimonial
+
+**Purpose:** Customer voice -- builds trust
+**Density:** Very open
+**Content limits:** Quote 40 words max + name + title + company
+
+**HTML structure:**
+```html
+<div class="section--testimonial">
+  <blockquote class="testimonial-quote reveal">
+    <div class="quote-mark">"</div>
+    <p class="quote-text">[Customer quote, 40 words max]</p>
+    <footer class="quote-attribution">
+      <span class="attribution-name">[Name]</span>
+      <span class="attribution-role">[Title], [Company]</span>
+    </footer>
+  </blockquote>
+</div>
+```
+
+**CSS approach:**
+- `.section--testimonial`: `display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 5%, 4rem);`
+- `.quote-mark`: `position: absolute; font-family: var(--font-display); font-size: clamp(4rem, 12vw, 8rem); opacity: 0.08; top: -0.2em; left: -0.1em; color: var(--accent); line-height: 1; pointer-events: none; user-select: none;`
+- `.quote-text`: `font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.5; color: var(--text-primary);`
+- `.attribution-name`: `font-weight: 700; font-size: var(--label-size);`
+- `.attribution-role`: `color: var(--text-muted); font-size: var(--label-size);`
+- Testimonial section background: subtle accent tint (accent at 4-6% opacity) or preset's alt section bg
+
+**Do NOT:** Add bullet points, headings, or any other content inside a testimonial section.
+
+---
+
+## 7. closing-cta
+
+**Purpose:** Clear next step -- drives action
+**Density:** Open
+**Content limits:** Headline 5 words max + CTA action text 3 words + email + URL (both required)
+
+**HTML structure:**
+```html
+<div class="section--cta">
+  <div class="cta-inner reveal">
+    <div class="cta-logo">[Vendor logo or CSS initials]</div>
+    <h2 class="cta-headline">[Headline -- 5 words max]</h2>
+    <p class="cta-sub">[Optional 1-sentence context]</p>
+    <div class="cta-contacts">
+      <a href="mailto:[email]" class="cta-email">[email]</a>
+      <a href="[url]" class="cta-url">[url]</a>
+    </div>
+  </div>
+</div>
+```
+
+**CSS approach:**
+- `.section--cta`: preset's darkest or most distinctive background -- this is the closing statement
+- `.cta-headline`: `font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 3rem); font-weight: var(--display-weight); color: var(--cta-text); letter-spacing: -0.02em;`
+- `.cta-email`: `font-size: clamp(0.9rem, 1.5vw, 1.25rem); font-weight: 600;`
+- `.cta-url`: `font-size: clamp(0.8rem, 1.2vw, 1rem); opacity: 0.7;`
+- No bullet lists, no feature lists, no repetition of stats.
+
+**One action only.** Email + URL -- both mandatory (fails QA if either missing).
+
+---
+
+## Standard Page Assemblies
+
+### 1-pager (1 page)
+```
+<section class="slide page--cover-compact">
+  [cover section -- condensed version]
+  [challenge-inline -- 2 bullet lines max]
+  [solution-inline -- 1 sentence + 3 micro stats]
+  [results-inline -- 3 stats in smaller size]
+  [cta-inline -- email + url at bottom]
+</section>
+```
+1-pager is a summary card. Every section is abbreviated. Nothing is full-depth.
+
+### 2-pager (2 pages)
+```
+Page 1: <section class="slide">
+  [cover]
+  [challenge-solution stacked]
+</section>
+
+Page 2: <section class="slide">
+  [results]
+  [testimonial -- if available]
+  [closing-cta]
+</section>
+```
+
+### 4-pager (4 pages)
+```
+Page 1: <section class="slide">[cover]</section>
+Page 2: <section class="slide">[overview] + [challenge]</section>
+Page 3: <section class="slide">[solution] + [results]</section>
+Page 4: <section class="slide">[testimonial] + [closing-cta]</section>
+```

package/skills/graphic-case-study/references/style-presets.md

@@ -0,0 +1,346 @@
+# Style Presets — graphic-case-study
+
+9 business-oriented style presets. Each is fully self-contained -- complete CSS token set, no "derive from" chains.
+
+Choose based on the vendor's brand and audience. When in doubt: clean-slate for enterprise B2B, midnight-editorial for tech/AI companies, warm-earth for agencies and services.
+
+---
+
+## 1. clean-slate
+
+**Best for:** Enterprise B2B, sales teams, customer-facing materials, any audience that expects professionalism
+**Feeling:** Trustworthy, clear, confident, enterprise-safe
+
+```
+Background:       #FFFFFF outer / #FFFFFF page / #F8F8F8 alt sections / #F4F4F4 footer
+Text primary:     #111111
+Text secondary:   #555555
+Text muted:       #999999
+Accent:           #0F172A  (near-black navy)
+Accent light:     #E0F2FE  (light blue for pill/badge backgrounds)
+Accent text:      #FFFFFF
+Divider:          #E8E8E8
+Card border:      #E0E0E0
+Card radius:      16px
+Card shadow:      0 2px 8px rgba(0, 0, 0, 0.06)
+
+Display font:     'Plus Jakarta Sans', Arial, Helvetica, sans-serif
+Body font:        'Plus Jakarta Sans', Arial, Helvetica, sans-serif
+Google Fonts:     https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;800&display=swap
+
+Display weight:   800
+Body weight:      400 / 500
+```
+
+**Signature elements:**
+- Rounded card containers (`border-radius: 16px`) on all fact cells, feature cards, stat containers
+- Badge pills for category labels (`border-radius: 100px; background: #E0F2FE; color: #0F172A; padding: 0.2em 0.8em`)
+- Generous whitespace -- push toward maximum clamp values
+- Hero stat in dark `#0F172A` (high contrast, authoritative -- no color distraction)
+- Cover background: `#0F172A` full dark (inversion for premium feel)
+- Closing CTA: `#0F172A` full bg with white headline and white CTA
+
+---
+
+## 2. midnight-editorial
+
+**Best for:** Tech, AI, developer-focused companies, premium B2B, thought leadership
+**Feeling:** Editorial authority, premium, considered
+
+```
+Background:       #0A0A0A outer / #111111 page / #1A1A1A elevated cards / #080808 footer
+Text primary:     #F2F2F2
+Text secondary:   #AAAAAA
+Text muted:       #555555
+Accent:           #D8F90A  (yellow-green)
+Accent text:      #0A0A0A  (dark text on accent)
+Divider:          #2A2A2A
+Card border:      #222222
+
+Display font:     'Instrument Serif', Georgia, 'Times New Roman', serif
+Body font:        Inter, Arial, Helvetica, sans-serif
+Google Fonts:     https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&display=swap
+
+Display weight:   400
+Body weight:      400 / 600
+```
+
+**Signature elements:**
+- Thin `<hr>` separators (`border: none; border-top: 1px solid #2A2A2A; width: 40px; margin: 0`)
+- Oversized section numbers at `opacity: 0.06` as absolute background elements
+- Instrument Serif italic on testimonial quotes (literary weight)
+- Hero stat number in `#D8F90A` accent
+- Cover: `#D8F90A` full-bg inversion with `#0A0A0A` text (unmissable)
+- Closing CTA: `#D8F90A` full bg with `#0A0A0A` text
+
+---
+
+## 3. matt-gray
+
+**Best for:** Internal business reviews, board materials, professional presentations to mixed audiences
+**Feeling:** Safe, professional, accessible, clean
+
+```
+Background:       #F5F5F5 outer / #FFFFFF page / #EEEEEE section alt / #F8F8F8 footer
+Text primary:     #1A1A1A
+Text secondary:   #444444
+Text muted:       #888888
+Accent:           #2563EB  (blue)
+Accent text:      #FFFFFF
+Divider:          #E5E5E5
+Card border:      #DDDDDD
+Card shadow:      0 1px 3px rgba(0, 0, 0, 0.08)
+
+Display font:     'DM Sans', Arial, Helvetica, sans-serif
+Body font:        'DM Sans', Arial, Helvetica, sans-serif
+Google Fonts:     https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&display=swap
+
+Display weight:   700
+Body weight:      400 / 500
+```
+
+**Signature elements:**
+- 4px left border on section headings and fact cells (`border-left: 4px solid #2563EB; padding-left: 1rem`)
+- Subtle drop shadow on stat containers
+- Hero stat in accent blue `#2563EB`
+- Section headings use `#EEEEEE` alt background
+- Closing CTA: `#1A1A1A` full dark bg with white text and blue button
+
+---
+
+## 4. brutalist
+
+**Best for:** Standout sales materials, design-forward agencies, brands that want to be remembered
+**Feeling:** Direct, raw, confident, uncompromising
+
+```
+Background:       #FFFFFF outer / #FFFFFF page
+Text primary:     #000000
+Text secondary:   #333333
+Accent:           #FF3300  (red) or #FFE500 (yellow)
+Accent text:      #000000
+Divider:          #000000  (solid black)
+Border:           3px solid #000000  (heavy)
+Border-radius:    0  (zero everywhere -- absolute rule)
+
+Display font:     'Archivo Black', Arial Black, Arial, sans-serif
+Body font:        'Space Grotesk', Arial, sans-serif
+Google Fonts:     https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap
+
+Display weight:   900
+Body weight:      400 / 700
+```
+
+**Signature elements:**
+- Heavy borders everywhere: `border: 3px solid #000000` on ALL cards, tables, containers, page sections
+- Zero border-radius on every element -- this is a hard rule, never soften
+- Oversized section numbers fully visible (`opacity: 1`) in accent color
+- Cover: accent color full bg (`#FF3300` or `#FFE500`) with `#000000` text
+- Hero stat in accent color, extreme size
+- Closing CTA: `#000000` full bg with white text and accent-color button/border
+
+**DO NOT apply rounded corners, gradients, or drop shadows to brutalist case studies.**
+
+---
+
+## 5. mint-pixel-corporate
+
+**Best for:** SaaS sales, product-focused companies, tech startups, growth-stage B2B
+**Feeling:** Fresh, modern, startup-professional
+
+```
+Background:       #F0FAF7 outer / #FFFFFF page / #E8F5F0 alt sections / #F0FAF7 footer
+Text primary:     #1A2E2A
+Text secondary:   #4A6B62
+Text muted:       #7A9B92
+Accent:           #00B894  (mint)
+Accent text:      #1A2E2A
+Divider:          #D1E8E1
+Card border:      #C5DFD7
+Card radius:      10px
+
+Display font:     'Manrope', Arial, Helvetica, sans-serif
+Body font:        'Manrope', Arial, Helvetica, sans-serif
+Google Fonts:     https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap
+
+Display weight:   800
+Body weight:      400 / 500
+```
+
+**Signature elements:**
+- Mint accent pills for feature labels and category tags (`border-radius: 100px; background: #00B894; color: #1A2E2A`)
+- CSS `radial-gradient` dot pattern on cover background:
+  ```css
+  background-image: radial-gradient(circle, #00B894 1px, transparent 1px);
+  background-size: 24px 24px;
+  background-color: #1A2E2A;
+  ```
+- Hero stat in mint `#00B894`
+- Feature cards with mint border (`border: 2px solid #00B894`)
+- Closing CTA: `#1A2E2A` dark bg with dot pattern + mint text and white button
+
+---
+
+## 6. product-minimal
+
+**Best for:** Product companies, design-forward B2B, companies presenting to design-savvy buyers
+**Feeling:** Maximum whitespace, purposeful restraint, design system precision
+
+```
+Background:       #FAFAFA outer / #FAFAFA page / #F4F4F4 alt / #F0F0F0 footer
+Text primary:     #18181B
+Text secondary:   #71717A
+Text muted:       #A1A1AA
+Accent:           #8B5CF6  (violet)
+Accent text:      #FFFFFF
+Divider:          #E4E4E7
+Card shadow:      0 1px 3px rgba(0, 0, 0, 0.08)
+Card radius:      12px
+
+Display font:     'Syne', Arial, Helvetica, sans-serif
+Body font:        'IBM Plex Sans', Arial, Helvetica, sans-serif
+Google Fonts:     https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap
+
+Display weight:   700-800
+Body weight:      400 / 500
+```
+
+**Signature elements:**
+- Single accent element per section rule: violet appears in AT MOST ONE element per section
+- Subtle CSS drop shadow on cards (`box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08)`)
+- Very generous padding (use maximum clamp values everywhere)
+- Hero stat in violet `#8B5CF6` with thin violet top-border on stat container
+- Cover: `#18181B` full dark bg with Syne display font in white
+- Closing CTA: violet background (`#8B5CF6`) with white text
+
+---
+
+## 7. magazine-red
+
+**Best for:** Marketing agencies, bold companies, brand-forward case studies, attention-commanding materials
+**Feeling:** Authoritative, editorial, high energy
+
+```
+Background:       #1A1A1A outer / #111111 page / #1E1E1E alt / #0D0D0D footer
+Text primary:     #FFFFFF
+Text secondary:   #CCCCCC
+Text muted:       #888888
+Accent:           #E63329  (red)
+Divider:          #2A2A2A
+
+Display font:     'Fraunces', Georgia, 'Times New Roman', serif
+Body font:        'Work Sans', Arial, Helvetica, sans-serif
+Google Fonts:     https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,900;1,900&family=Work+Sans:wght@400;500;600&display=swap
+
+Display weight:   900
+Body weight:      400 / 500
+```
+
+**Signature elements:**
+- 8px full-width red band separator: `<div style="width:100%; height:8px; background:#E63329; margin: clamp(1rem, 2vw, 2rem) 0">`
+- Editorial section numbers at `opacity: 0.25` in red
+- Testimonial section inverted to white bg with dark text (only white section in the deck)
+- Fraunces italic for quote text (extreme editorial weight)
+- Hero stat in red `#E63329`, large
+- Closing CTA: full red background (`#E63329`) with white text
+
+---
+
+## 8. soft-cloud
+
+**Best for:** Onboarding materials, customer education, HR/people companies, approachable SaaS
+**Feeling:** Friendly, accessible, soft, welcoming
+
+```
+Background:       #EEF2FF outer / #FFFFFF page / #F5F3FF alt / #EEF2FF footer
+Text primary:     #1E1B4B
+Text secondary:   #4C4A7B
+Text muted:       #9896C0
+Accent:           #6366F1  (indigo)
+Accent light:     #E0E7FF  (light indigo for card backgrounds)
+Accent text:      #FFFFFF
+Divider:          #DDD6FE
+Card radius:      24px
+Card shadow:      0 4px 16px rgba(99, 102, 241, 0.08)
+
+Display font:     'Outfit', Arial, Helvetica, sans-serif
+Body font:        'Outfit', Arial, Helvetica, sans-serif
+Google Fonts:     https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap
+
+Display weight:   700
+Body weight:      400 / 500
+```
+
+**Signature elements:**
+- Generous border-radius (`border-radius: 24px`) on all cards, callout blocks, stat containers
+- Gradient section backgrounds: `linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 50%, #DDD6FE 100%)`
+- Badge pills on key points (`border-radius: 100px; background: #E0E7FF; color: #6366F1`)
+- Hero stat in indigo `#6366F1` on `#F5F3FF` elevated card bg
+- Closing CTA: indigo gradient (`linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%)`) with white text
+
+---
+
+## 9. warm-earth (case-study-exclusive)
+
+**Best for:** Agencies, consultancies, service businesses, health/education tech, companies that sell on trust
+**Feeling:** Trusted, grounded, human, warm authority
+
+```
+Background:       #FDF6EF outer / #FFFFFF page / #FAF0E4 alt sections / #F5EBD8 footer
+Text primary:     #2C1A0E
+Text secondary:   #6B4C30
+Text muted:       #A08060
+Accent:           #D4622A  (burnt orange)
+Accent light:     #FDE8D8  (peach -- for pill/badge backgrounds)
+Accent text:      #FFFFFF
+Divider:          #E8D5BF
+Card border:      #E0C9A8
+Card radius:      10px
+Card shadow:      0 2px 8px rgba(44, 26, 14, 0.06)
+
+Display font:     'Lora', Georgia, 'Times New Roman', serif
+Body font:        'Source Sans 3', Arial, Helvetica, sans-serif
+Google Fonts:     https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&family=Source+Sans+3:wght@400;600&display=swap
+
+Display weight:   700
+Body weight:      400 / 600
+```
+
+**Signature elements:**
+- Warm off-white background (`#FDF6EF`) -- not pure white, not gray. The warmth starts with the canvas.
+- Accent pills in peach (`background: #FDE8D8; color: #D4622A; border-radius: 100px`) for category labels
+- **Drop cap on challenge page opening paragraph:**
+  ```css
+  .challenge-context::first-letter {
+    font-family: 'Lora', Georgia, serif;
+    font-size: clamp(3rem, 7vw, 5rem);
+    float: left;
+    margin: 0.05em 0.12em 0 0;
+    color: var(--accent);
+    line-height: 0.8;
+  }
+  ```
+- Hero stat in burnt orange `#D4622A`
+- Section headings: `border-left: 4px solid #D4622A; padding-left: 1rem` (no full-background inversion -- subtle accent)
+- Cover: warm-dark background `#2C1A0E` with off-white text `#F5EBD8` and burnt-orange accent label
+- Closing CTA: `#2C1A0E` full dark bg with `#FDE8D8` peach headline, white CTA button with burnt orange border
+
+---
+
+## DO NOT USE -- Style Slop Checklist
+
+Before outputting any HTML, verify none of these are present:
+
+| Pattern | Why it's wrong |
+|---|---|
+| Inter as display font | Zero typographic character -- reads as default AI output |
+| Purple-to-blue gradient on white background | Most overused AI aesthetic -- immediately signals undesigned |
+| Every section same background color | No visual rhythm -- the PDF reads as one flat block |
+| Identical section layouts throughout | No typographic thinking -- copy-pasted template feel |
+| `box-shadow` on everything | Overused "depth" signal with no real depth |
+| `border-radius: 8px` on everything (especially brutalist) | Softening that fights the style's aesthetic intent |
+| Accent color on 5+ elements per section | Over-branded, destroys scarcity = destroys premium feel |
+| Helvetica Neue / Arial as display font | Generic -- no personality at display size |
+| Stat numbers at body text size | Breaks the entire purpose of the results section |
+| "Thank You" as closing-cta headline | No action, no contact info = completely wasted page |
+| Logo placeholder box with no styling | Unfinished -- use CSS initials at minimum |