code-ai-installer 4.0.0 → 4.0.1-b

package/domains/product/locales/en/.agents/skills/release-notes-reference/agents/skill.yaml

@@ -0,0 +1,21 @@
+version: 1
+name: release-notes-reference
+display_name: Release Notes (B2B) Reference
+description: B2B customer-facing release notes — what's new, why it matters,
+  breaking changes, migration steps — reference (code & worked-example library)
+default_prompt: Use $release-notes-reference when the task relates to the skill
+  "Release Notes (B2B) Reference".
+triggers:
+  - release-notes
+  - release notes
+  - changelog
+capabilities:
+  - release-notes-reference
+tools: []
+invocation:
+  explicit: true
+  implicit: true
+localization:
+  default_locale: en
+  available_locales:
+    - en

package/domains/product/locales/en/.agents/skills/report-design/SKILL.md

@@ -1,6 +1,23 @@
 ---
 name: report-design
 description: Designing the layout of a PRD or Product Review Deck — structure, navigation, visual hierarchy
+type: triggered
+domain: product
+owners:
+  - layouter
+gates:
+  - LAYOUTER
+tech: []
+topic: []
+triggers:
+  - "report-design"
+  - "report design"
+  - "PRD design"
+  - "deck design"
+related:
+  - report-design-reference
+budget_lines: 418
+schema_version: 1
 ---
 # Report Design — PRD / Product Review Deck Layout Design
 
@@ -399,310 +416,3 @@ Transfer format: Report Design Spec (structure + content inventory + visualizati
 |---------|:-------------:|---------|
 | [Section] | Hero / Key / Supporting / Background | [Which elements] |
 ```
-
-## Worked Example — TeamFlow Product Review Deck Design Spec
-
-**Context:** `/ship-right-thing` complete. Unified Strategy Brief (Mediator) + PRD + Metric Plan ready. Designer prepares design spec for Layouter — Product Review Deck (12 slides, executive audience).
-
-```markdown
-# Design Spec: TeamFlow AI Summarization Product Review Deck
-
-**Target Artifact:** Product Review Deck (executive sign-off presentation)
-**Audience Level:** Executive (CEO, CPO, VP Sales, VP Product)
-**Length:** 12 slide-like pages
-**Distribution:** PDF email + presented live in review meeting
-**Tone:** Sober, professional, data-forward (see GTM brief tone axes — 80% serious)
-
----
-
-## Artifact Type Decision
-
-**Why Deck, not PRD-as-document:**
-- Audience = execs (5-10 minute scan; live presentation 30 min)
-- Decision required = go/no-go sign-off (not reference material)
-- Mid-market + enterprise B2B SaaS expectation = exec-grade visuals
-
-**Secondary artifact:** Full PRD (40+ pages, document style) done separately for engineering/design team — via separate `$prd-template` skill. Deck references PRD in appendix.
-
----
-
-## Information Architecture (12 pages)
-
-| # | Page | Purpose | Emphasis | Key visual |
-|:-:|------|---------|:--------:|------------|
-| 1 | Cover | Anchor attention, set context | Hero | Large title, subtitle, date |
-| 2 | Executive Summary (TL;DR) | 30-sec read gives full picture | Hero | Pull quote + 3 KPI cards |
-| 3 | The Problem | Establish urgency with evidence | Key | 3 KPI cards «pain sizing» + callouts with verbatim quotes |
-| 4 | The Opportunity | Scope of prize | Key | Metric tree with business impact arrows |
-| 5 | Unified Strategy (Mediator synthesis) | Approach | Key | Vision statement + 4-principle list + tier architecture diagram |
-| 6 | Product Scope (MoSCoW) | What ships, what doesn't | Key | Must/Should/Could table with scope rationale |
-| 7 | User Experience | Feel of the product | Supporting | 3-4 wireframe thumbnails + flow arrows |
-| 8 | Metrics & NSM | Success definition | Key | Metric tree + 30/90-day targets |
-| 9 | Risks & Mitigations | Credibility | Key | Top 5 risks table with probability × impact matrix |
-| 10 | Rollout Plan | Execution | Supporting | T-weeks timeline + phased rollout diagram |
-| 11 | Investment & ROI | Business case | Key | 3-scenario forecast chart + cost breakdown |
-| 12 | Roadmap Now/Next/Later | Future direction | Supporting | 3-column roadmap |
-
----
-
-## Visual Hierarchy
-
-### Typography Scale
-
-| Level | Font | Size | Weight | Use |
-|-------|------|:----:|:------:|-----|
-| H1 (page title) | Inter | 32px | 700 | Page titles |
-| H2 (section) | Inter | 22px | 600 | Within-page sections |
-| H3 (subsection) | Inter | 16px | 600 | Subsections |
-| Lead (intro para) | Inter | 16px | 400 | First paragraph on page |
-| Body | Inter | 14px | 400 | Standard text |
-| Pull-quote | Source Serif Pro | 20px | 400 | Key quotes, vision statements |
-| KPI value | Inter | 32px | 700 | Large metric numbers |
-| KPI label | Inter | 11px | 500 | Metric context |
-| Caption | Inter | 10px | 400 | Page footers, source attributions |
-
-### Color Palette
-
-```css
---color-primary: #0A2540;     /* TeamFlow brand deep blue — headings, primary action color */
---color-accent: #F2A900;      /* TeamFlow amber — highlights, KPI borders, CTA */
---color-text: #1A1A1A;         /* Body text (near black) */
---color-text-muted: #6B6B6B;   /* Secondary text */
---color-bg: #FFFFFF;           /* Page background */
---color-bg-alt: #F7F9FB;       /* Callout background, alternate row */
---color-success: #22A06B;      /* Green metrics, positive signals */
---color-warning: #E67E22;      /* Amber warnings */
---color-danger: #C0392B;       /* Red alerts, pain-sizing metrics */
---color-border: #E1E4E8;       /* Subtle borders, table dividers */
-```
-
-**Rationale for sober palette:** B2B SaaS executive audiences respond to professional, data-forward. Too many colors → «consumer» feel. Use green / amber / red sparingly — only for sentiment-loaded metrics.
-
-### Spacing System (8pt grid)
-
-- `--space-1: 4px` (tight — between related items)
-- `--space-2: 8px` (list item padding)
-- `--space-3: 16px` (paragraph spacing)
-- `--space-4: 24px` (between sections in page)
-- `--space-5: 32px` (between major blocks)
-- `--space-6: 48px` (rare — page header / hero)
-
----
-
-## Key Visualizations (Detailed Specs)
-
-### 1. KPI Card (used pages 2, 3, 11)
-
-**Anatomy:**
-```
-┌─────────────────────────────────┐
-│ [amber 3px left border]          │
-│                                  │
-│    40               ← big number │
-│    ────              (32px 700)  │
-│    Target Team Tier  ← label     │
-│    Upgrades (Q2)     (11px 500)  │
-│                                  │
-└─────────────────────────────────┘
-```
-
-**Rules:**
-- Max 1 number per card
-- Label 1-2 lines max
-- Group in grids of 3 (rule of three)
-- Color number by sentiment: primary blue (default) / success green / danger red
-
-**TeamFlow-specific examples:**
-- Page 2: «40 Target Upgrades» / «+$8 Per-Seat Premium» / «3 hrs Weekly Time Saved»
-- Page 3 (pain): «3-4 hrs Admin/week» / «40% Action Items Dropped» / «0% VP Visibility» (all danger red)
-
-### 2. Pull Quote (pages 2, 3, 5)
-
-**Anatomy:**
-```
-┌──────────────────────────────────────────┐
-│▐ «Quote text in Source Serif Pro,        │
-│▐  20px, line-height 1.4. Draws attention │
-│▐  from scanner, not too large to read.»  │
-└──────────────────────────────────────────┘
-                        — Attribution (12px 400 muted)
-```
-
-**Rules:**
-- Use for key vision statement or verbatim customer quote
-- Max 1-2 per page
-- Attribution line aligned right, muted color
-- Left border 3px accent color; bg alt
-
-### 3. Callout Box (all pages)
-
-**Variants:**
-- Neutral (accent border)
-- Success (green border — positive signal)
-- Warning (amber border — consideration)
-- Danger (red border — risk / critical)
-
-**Anatomy:**
-```
-┌──────────────────────────────────────────┐
-│▐ Expected Outcome       ← title 600 weight
-│▐ Description text wrapping normally...
-└──────────────────────────────────────────┘
-```
-
-### 4. Metric Tree (page 4, 8)
-
-**Anatomy:**
-```
-         NSM: Sticky Manager Ratio (AI Tier)
-         ┌─────────────┼─────────────┐
-         ▼             ▼             ▼
-    Input:         Input:       Guardrails:
-  New tier         Activation    NPS, Churn,
-  conversions     rate           Support vol.
-```
-
-**Implementation:** SVG (for fidelity) or Mermaid (for authorability). TeamFlow prefers SVG produced from Figma.
-
-### 5. Roadmap Columns (page 12)
-
-**Anatomy:**
-```
-┌─────────────┐ ┌─────────────┐ ┌─────────────┐
-│ [accent top] │ │ [accent top] │ │ [accent top] │
-│ NOW          │ │ NEXT         │ │ LATER        │
-│ (Q2 2026)    │ │ (Q3 2026)    │ │ (Q4+)        │
-├─────────────┤ ├─────────────┤ ├─────────────┤
-│ ✨ AI Summary│ │ 📊 Dashboard │ │ 🌍 Multi-lang│
-│ ✨ Action items│ │ ⏱️ Real-time  │ │ 📱 Mobile app│
-│ 🔐 SSO/SCIM  │ │ 🎯 Health Sc.│ │ 🔍 AI Coach  │
-└─────────────┘ └─────────────┘ └─────────────┘
-```
-
-**Rules:**
-- 3-5 items per column (don't overload)
-- Emoji prefix for category hint (✨ feature / 🔐 security / 📊 analytics)
-- Vertical line between items for scannability
-- Accent top border maintains brand presence
-
-### 6. Risk Matrix (page 9)
-
-**Implementation:** 2×2 grid showing probability × impact:
-
-```
-           LOW IMPACT          HIGH IMPACT
-HIGH  ┌──────────────┬──────────────┐
- PROB │ monitor       │ ⚠️ TOP RISKS │
-      │               │ R1, R2, R3   │
-      ├──────────────┼──────────────┤
- LOW  │ acceptable    │ watch list   │
- PROB │               │ R4, R5       │
-      └──────────────┴──────────────┘
-```
-
-**Below matrix:** detailed Top 5 risks table with columns: #, Risk, Probability, Impact, Mitigation.
-
----
-
-## Component Library for Layouter
-
-**Files:** `components/` folder in design handoff
-
-| Component | File | Usage |
-|-----------|------|-------|
-| `kpi-card.html` | Snippet | Metric showcases |
-| `pull-quote.html` | Snippet | Vision statements, customer quotes |
-| `callout-[variant].html` | 4 snippets | Warnings, successes, info |
-| `roadmap-columns.html` | Snippet | Page 12 only |
-| `metric-tree.svg` | Asset | Pages 4 + 8 |
-| `risk-matrix.svg` | Asset | Page 9 |
-| `page-footer.html` | Snippet | All pages |
-| `meta-bar.html` | Snippet | All pages |
-
----
-
-## Design-to-Layout Handoff Specifications
-
-### CSS Tokens
-
-All styles defined as CSS custom properties (see layouter output). Ensures:
-- Easy re-skinning for white-label
-- Consistent spacing / sizing
-- Dark mode future-proof (tokens override easily)
-
-### Print-Specific
-
-- `@page { size: A4 portrait; margin: 2cm 1.8cm; }` — standard A4
-- `.page { page-break-after: always; }` — each major section on own page
-- `page-break-inside: avoid` on tables + callouts — prevent awkward splits
-- `print-color-adjust: exact` — preserve brand colors on printed output
-
-### Fonts Bundling
-
-- **Embedded fonts** in PDF generation for consistency:
-  - Inter (all weights): [Google Fonts CSS link — OK for web, but for PDF embed WOFF2 locally]
-  - Source Serif Pro: similar — embed for PDF
-- **Fallbacks** for missing fonts: `-apple-system, sans-serif` (Inter), `Georgia, serif` (Source Serif Pro)
-
-### Assets Bundle
-
-- TeamFlow logo (SVG + PNG 2×)
-- Partner logos (if case studies referenced): Lattice comparison etc.
-- Icons (lucide-react or similar — SVG inline)
-- Chart images (exported PNG 2× from Figma for complex charts)
-
----
-
-## Accessibility Requirements (WCAG AA)
-
-- **Color contrast:** All text ≥ 4.5:1 against bg (verified: primary blue on white = 11:1)
-- **Semantic HTML:** `<section>`, `<article>`, `<h1-h6>` hierarchy correct
-- **Alt text** on all images + SVGs
-- **Focus states** visible (if deck interactive) — not relevant for PDF, but matters if HTML shared online
-- **Screen reader** labels on status badges, icons
-
----
-
-## Deliverables for Layouter (handoff)
-
-- [x] This design spec document (markdown)
-- [x] CSS tokens file (`tokens.css`)
-- [x] HTML snippets folder (`components/`)
-- [x] SVG assets (`assets/`)
-- [x] Font files (WOFF2 embedded)
-- [x] Color / typography reference sheet (1-page PDF for quick reference)
-- [x] Figma file with all screen mockups (hi-fi, exported pages) [link]
-- [x] Asset export manifest (which images at which sizes)
-
----
-
-## Sign-off Required
-
-- [ ] PM (Alex K.) — content accuracy
-- [ ] Design Lead (Jordan M.) — visual standards
-- [ ] Brand team — consistency with TeamFlow identity
-- [ ] Eng Lead (Priya S.) — feasibility from layout perspective
-
-Target sign-off date: May 20, 2026. Layout production window: May 21 - June 10. Final deck ready for June 30 launch.
-
----
-
-### Emphasis Map Summary
-
-| Page | Emphasis | Elements |
-|:----:|:--------:|----------|
-| 1 Cover | Hero | Title 42px, subtitle, brand accent bar |
-| 2 TL;DR | Hero | Pull quote, 3 KPI cards, section breaks |
-| 3 Problem | Key | 3 danger KPIs, 2 verbatim callouts |
-| 4 Opportunity | Key | Metric tree, impact arrows |
-| 5 Strategy | Key | Vision quote, tier architecture |
-| 6 Scope | Key | MoSCoW table, rationale |
-| 7 UX | Supporting | 4 thumbnail wireframes, flow |
-| 8 Metrics | Key | Metric tree (2nd), target table |
-| 9 Risks | Key | 2×2 matrix + top 5 table |
-| 10 Rollout | Supporting | T-weeks timeline (dense but detailed) |
-| 11 Investment | Key | 3-scenario chart, cost breakdown |
-| 12 Roadmap | Supporting | 3-column Now/Next/Later |
-```
-
-> **report-design lesson:** Design spec = contract between Designer + Layouter. CSS tokens + component library turn ad-hoc page-by-page work into systematic assembly. **Emphasis map** prevents every page being equally loud = information noise. Executive audience = sober palette + dense-but-clean content. **Accessibility requirements** (WCAG AA) — required for mid-market + enterprise procurement. Component library reused for future decks (Q3 Product Review, etc.) — investment compounds.

package/domains/product/locales/en/.agents/skills/report-design-reference/SKILL.md

@@ -0,0 +1,331 @@
+---
+name: report-design-reference
+description: Designing the layout of a PRD or Product Review Deck — structure, navigation, visual hierarchy — reference (code & worked-example library)
+type: reference
+domain: product
+owners:
+  - layouter
+gates:
+  - LAYOUTER
+tech: []
+topic: []
+triggers:
+  - "report-design"
+  - "report design"
+  - "PRD design"
+  - "deck design"
+related:
+  - report-design
+budget_lines: 331
+schema_version: 1
+---
+# report-design — Reference (code & worked-example library)
+
+> Verbatim code blocks and the worked example extracted from `$report-design` (workflow). Copy-paste library; the procedure lives in the workflow skill.
+
+## Worked Example — TeamFlow Product Review Deck Design Spec
+
+**Context:** `/ship-right-thing` complete. Unified Strategy Brief (Mediator) + PRD + Metric Plan ready. Designer prepares design spec for Layouter — Product Review Deck (12 slides, executive audience).
+
+```markdown
+# Design Spec: TeamFlow AI Summarization Product Review Deck
+
+**Target Artifact:** Product Review Deck (executive sign-off presentation)
+**Audience Level:** Executive (CEO, CPO, VP Sales, VP Product)
+**Length:** 12 slide-like pages
+**Distribution:** PDF email + presented live in review meeting
+**Tone:** Sober, professional, data-forward (see GTM brief tone axes — 80% serious)
+
+---
+
+## Artifact Type Decision
+
+**Why Deck, not PRD-as-document:**
+- Audience = execs (5-10 minute scan; live presentation 30 min)
+- Decision required = go/no-go sign-off (not reference material)
+- Mid-market + enterprise B2B SaaS expectation = exec-grade visuals
+
+**Secondary artifact:** Full PRD (40+ pages, document style) done separately for engineering/design team — via separate `$prd-template` skill. Deck references PRD in appendix.
+
+---
+
+## Information Architecture (12 pages)
+
+| # | Page | Purpose | Emphasis | Key visual |
+|:-:|------|---------|:--------:|------------|
+| 1 | Cover | Anchor attention, set context | Hero | Large title, subtitle, date |
+| 2 | Executive Summary (TL;DR) | 30-sec read gives full picture | Hero | Pull quote + 3 KPI cards |
+| 3 | The Problem | Establish urgency with evidence | Key | 3 KPI cards «pain sizing» + callouts with verbatim quotes |
+| 4 | The Opportunity | Scope of prize | Key | Metric tree with business impact arrows |
+| 5 | Unified Strategy (Mediator synthesis) | Approach | Key | Vision statement + 4-principle list + tier architecture diagram |
+| 6 | Product Scope (MoSCoW) | What ships, what doesn't | Key | Must/Should/Could table with scope rationale |
+| 7 | User Experience | Feel of the product | Supporting | 3-4 wireframe thumbnails + flow arrows |
+| 8 | Metrics & NSM | Success definition | Key | Metric tree + 30/90-day targets |
+| 9 | Risks & Mitigations | Credibility | Key | Top 5 risks table with probability × impact matrix |
+| 10 | Rollout Plan | Execution | Supporting | T-weeks timeline + phased rollout diagram |
+| 11 | Investment & ROI | Business case | Key | 3-scenario forecast chart + cost breakdown |
+| 12 | Roadmap Now/Next/Later | Future direction | Supporting | 3-column roadmap |
+
+---
+
+## Visual Hierarchy
+
+### Typography Scale
+
+| Level | Font | Size | Weight | Use |
+|-------|------|:----:|:------:|-----|
+| H1 (page title) | Inter | 32px | 700 | Page titles |
+| H2 (section) | Inter | 22px | 600 | Within-page sections |
+| H3 (subsection) | Inter | 16px | 600 | Subsections |
+| Lead (intro para) | Inter | 16px | 400 | First paragraph on page |
+| Body | Inter | 14px | 400 | Standard text |
+| Pull-quote | Source Serif Pro | 20px | 400 | Key quotes, vision statements |
+| KPI value | Inter | 32px | 700 | Large metric numbers |
+| KPI label | Inter | 11px | 500 | Metric context |
+| Caption | Inter | 10px | 400 | Page footers, source attributions |
+
+### Color Palette
+
+```css
+--color-primary: #0A2540;     /* TeamFlow brand deep blue — headings, primary action color */
+--color-accent: #F2A900;      /* TeamFlow amber — highlights, KPI borders, CTA */
+--color-text: #1A1A1A;         /* Body text (near black) */
+--color-text-muted: #6B6B6B;   /* Secondary text */
+--color-bg: #FFFFFF;           /* Page background */
+--color-bg-alt: #F7F9FB;       /* Callout background, alternate row */
+--color-success: #22A06B;      /* Green metrics, positive signals */
+--color-warning: #E67E22;      /* Amber warnings */
+--color-danger: #C0392B;       /* Red alerts, pain-sizing metrics */
+--color-border: #E1E4E8;       /* Subtle borders, table dividers */
+```
+
+**Rationale for sober palette:** B2B SaaS executive audiences respond to professional, data-forward. Too many colors → «consumer» feel. Use green / amber / red sparingly — only for sentiment-loaded metrics.
+
+### Spacing System (8pt grid)
+
+- `--space-1: 4px` (tight — between related items)
+- `--space-2: 8px` (list item padding)
+- `--space-3: 16px` (paragraph spacing)
+- `--space-4: 24px` (between sections in page)
+- `--space-5: 32px` (between major blocks)
+- `--space-6: 48px` (rare — page header / hero)
+
+---
+
+## Key Visualizations (Detailed Specs)
+
+### 1. KPI Card (used pages 2, 3, 11)
+
+**Anatomy:**
+```
+┌─────────────────────────────────┐
+│ [amber 3px left border]          │
+│                                  │
+│    40               ← big number │
+│    ────              (32px 700)  │
+│    Target Team Tier  ← label     │
+│    Upgrades (Q2)     (11px 500)  │
+│                                  │
+└─────────────────────────────────┘
+```
+
+**Rules:**
+- Max 1 number per card
+- Label 1-2 lines max
+- Group in grids of 3 (rule of three)
+- Color number by sentiment: primary blue (default) / success green / danger red
+
+**TeamFlow-specific examples:**
+- Page 2: «40 Target Upgrades» / «+$8 Per-Seat Premium» / «3 hrs Weekly Time Saved»
+- Page 3 (pain): «3-4 hrs Admin/week» / «40% Action Items Dropped» / «0% VP Visibility» (all danger red)
+
+### 2. Pull Quote (pages 2, 3, 5)
+
+**Anatomy:**
+```
+┌──────────────────────────────────────────┐
+│▐ «Quote text in Source Serif Pro,        │
+│▐  20px, line-height 1.4. Draws attention │
+│▐  from scanner, not too large to read.»  │
+└──────────────────────────────────────────┘
+                        — Attribution (12px 400 muted)
+```
+
+**Rules:**
+- Use for key vision statement or verbatim customer quote
+- Max 1-2 per page
+- Attribution line aligned right, muted color
+- Left border 3px accent color; bg alt
+
+### 3. Callout Box (all pages)
+
+**Variants:**
+- Neutral (accent border)
+- Success (green border — positive signal)
+- Warning (amber border — consideration)
+- Danger (red border — risk / critical)
+
+**Anatomy:**
+```
+┌──────────────────────────────────────────┐
+│▐ Expected Outcome       ← title 600 weight
+│▐ Description text wrapping normally...
+└──────────────────────────────────────────┘
+```
+
+### 4. Metric Tree (page 4, 8)
+
+**Anatomy:**
+```
+         NSM: Sticky Manager Ratio (AI Tier)
+         ┌─────────────┼─────────────┐
+         ▼             ▼             ▼
+    Input:         Input:       Guardrails:
+  New tier         Activation    NPS, Churn,
+  conversions     rate           Support vol.
+```
+
+**Implementation:** SVG (for fidelity) or Mermaid (for authorability). TeamFlow prefers SVG produced from Figma.
+
+### 5. Roadmap Columns (page 12)
+
+**Anatomy:**
+```
+┌─────────────┐ ┌─────────────┐ ┌─────────────┐
+│ [accent top] │ │ [accent top] │ │ [accent top] │
+│ NOW          │ │ NEXT         │ │ LATER        │
+│ (Q2 2026)    │ │ (Q3 2026)    │ │ (Q4+)        │
+├─────────────┤ ├─────────────┤ ├─────────────┤
+│ ✨ AI Summary│ │ 📊 Dashboard │ │ 🌍 Multi-lang│
+│ ✨ Action items│ │ ⏱️ Real-time  │ │ 📱 Mobile app│
+│ 🔐 SSO/SCIM  │ │ 🎯 Health Sc.│ │ 🔍 AI Coach  │
+└─────────────┘ └─────────────┘ └─────────────┘
+```
+
+**Rules:**
+- 3-5 items per column (don't overload)
+- Emoji prefix for category hint (✨ feature / 🔐 security / 📊 analytics)
+- Vertical line between items for scannability
+- Accent top border maintains brand presence
+
+### 6. Risk Matrix (page 9)
+
+**Implementation:** 2×2 grid showing probability × impact:
+
+```
+           LOW IMPACT          HIGH IMPACT
+HIGH  ┌──────────────┬──────────────┐
+ PROB │ monitor       │ ⚠️ TOP RISKS │
+      │               │ R1, R2, R3   │
+      ├──────────────┼──────────────┤
+ LOW  │ acceptable    │ watch list   │
+ PROB │               │ R4, R5       │
+      └──────────────┴──────────────┘
+```
+
+**Below matrix:** detailed Top 5 risks table with columns: #, Risk, Probability, Impact, Mitigation.
+
+---
+
+## Component Library for Layouter
+
+**Files:** `components/` folder in design handoff
+
+| Component | File | Usage |
+|-----------|------|-------|
+| `kpi-card.html` | Snippet | Metric showcases |
+| `pull-quote.html` | Snippet | Vision statements, customer quotes |
+| `callout-[variant].html` | 4 snippets | Warnings, successes, info |
+| `roadmap-columns.html` | Snippet | Page 12 only |
+| `metric-tree.svg` | Asset | Pages 4 + 8 |
+| `risk-matrix.svg` | Asset | Page 9 |
+| `page-footer.html` | Snippet | All pages |
+| `meta-bar.html` | Snippet | All pages |
+
+---
+
+## Design-to-Layout Handoff Specifications
+
+### CSS Tokens
+
+All styles defined as CSS custom properties (see layouter output). Ensures:
+- Easy re-skinning for white-label
+- Consistent spacing / sizing
+- Dark mode future-proof (tokens override easily)
+
+### Print-Specific
+
+- `@page { size: A4 portrait; margin: 2cm 1.8cm; }` — standard A4
+- `.page { page-break-after: always; }` — each major section on own page
+- `page-break-inside: avoid` on tables + callouts — prevent awkward splits
+- `print-color-adjust: exact` — preserve brand colors on printed output
+
+### Fonts Bundling
+
+- **Embedded fonts** in PDF generation for consistency:
+  - Inter (all weights): [Google Fonts CSS link — OK for web, but for PDF embed WOFF2 locally]
+  - Source Serif Pro: similar — embed for PDF
+- **Fallbacks** for missing fonts: `-apple-system, sans-serif` (Inter), `Georgia, serif` (Source Serif Pro)
+
+### Assets Bundle
+
+- TeamFlow logo (SVG + PNG 2×)
+- Partner logos (if case studies referenced): Lattice comparison etc.
+- Icons (lucide-react or similar — SVG inline)
+- Chart images (exported PNG 2× from Figma for complex charts)
+
+---
+
+## Accessibility Requirements (WCAG AA)
+
+- **Color contrast:** All text ≥ 4.5:1 against bg (verified: primary blue on white = 11:1)
+- **Semantic HTML:** `<section>`, `<article>`, `<h1-h6>` hierarchy correct
+- **Alt text** on all images + SVGs
+- **Focus states** visible (if deck interactive) — not relevant for PDF, but matters if HTML shared online
+- **Screen reader** labels on status badges, icons
+
+---
+
+## Deliverables for Layouter (handoff)
+
+- [x] This design spec document (markdown)
+- [x] CSS tokens file (`tokens.css`)
+- [x] HTML snippets folder (`components/`)
+- [x] SVG assets (`assets/`)
+- [x] Font files (WOFF2 embedded)
+- [x] Color / typography reference sheet (1-page PDF for quick reference)
+- [x] Figma file with all screen mockups (hi-fi, exported pages) [link]
+- [x] Asset export manifest (which images at which sizes)
+
+---
+
+## Sign-off Required
+
+- [ ] PM (Alex K.) — content accuracy
+- [ ] Design Lead (Jordan M.) — visual standards
+- [ ] Brand team — consistency with TeamFlow identity
+- [ ] Eng Lead (Priya S.) — feasibility from layout perspective
+
+Target sign-off date: May 20, 2026. Layout production window: May 21 - June 10. Final deck ready for June 30 launch.
+
+---
+
+### Emphasis Map Summary
+
+| Page | Emphasis | Elements |
+|:----:|:--------:|----------|
+| 1 Cover | Hero | Title 42px, subtitle, brand accent bar |
+| 2 TL;DR | Hero | Pull quote, 3 KPI cards, section breaks |
+| 3 Problem | Key | 3 danger KPIs, 2 verbatim callouts |
+| 4 Opportunity | Key | Metric tree, impact arrows |
+| 5 Strategy | Key | Vision quote, tier architecture |
+| 6 Scope | Key | MoSCoW table, rationale |
+| 7 UX | Supporting | 4 thumbnail wireframes, flow |
+| 8 Metrics | Key | Metric tree (2nd), target table |
+| 9 Risks | Key | 2×2 matrix + top 5 table |
+| 10 Rollout | Supporting | T-weeks timeline (dense but detailed) |
+| 11 Investment | Key | 3-scenario chart, cost breakdown |
+| 12 Roadmap | Supporting | 3-column Now/Next/Later |
+```
+
+> **report-design lesson:** Design spec = contract between Designer + Layouter. CSS tokens + component library turn ad-hoc page-by-page work into systematic assembly. **Emphasis map** prevents every page being equally loud = information noise. Executive audience = sober palette + dense-but-clean content. **Accessibility requirements** (WCAG AA) — required for mid-market + enterprise procurement. Component library reused for future decks (Q3 Product Review, etc.) — investment compounds.