# Pitch Deck Design System The complete CSS design system for generating professional HTML pitch decks. Every deck generated by this skill MUST use this system — no inline ad-hoc styles. ## Color Philosophy — NO Purple, NO Gradient Backgrounds **The rules:** - NEVER default to purple, violet, or any "AI-ish" colors - NEVER use gradient backgrounds on slides (flat colors only) - The palette MUST come from the user's brand, or be selected intentionally during the interview - Use 2-3 colors maximum plus neutrals. One accent for emphasis, not three. - Let typography and whitespace do the visual work — not color tricks - Gradients are allowed ONLY for small accents (a progress bar fill, a divider line) — never as slide backgrounds **Recommended palettes (choose based on product vibe):** | Palette | Primary | Accent | Background | Best For | |---------|---------|--------|------------|----------| | **Navy + White** | `#1a2744` | `#3b82f6` | `#0f1729` | DeFi, infrastructure, enterprise | | **White + Charcoal** | `#1c1c1e` | `#3b82f6` | `#ffffff` | Clean, any stage (Airbnb approach) | | **Teal + Ivory** | `#0d9488` | `#f59e0b` | `#0f1d1b` | Consumer crypto, payments | | **Black + White** | `#ffffff` | `#e2e8f0` | `#0a0a0a` | Premium, bold, hardware | | **Navy + Orange** | `#1e3a5f` | `#f97316` | `#0c1825` | Consumer apps, marketplaces | | **Green + Grey** | `#16a34a` | `#64748b` | `#0f1512` | DePIN, climate, sustainability | **If the user has brand colors:** Use those. Override the CSS variables below. **If they don't:** Ask during the interview. Pick based on their product type and vibe. --- ## Base HTML Shell Every deck starts with this shell. Self-contained, zero dependencies, works offline: ```html {{PROJECT_NAME}} — Pitch Deck
1 /
``` --- ## Design Rules (Enforced) 1. **One idea per slide** — Never combine two concepts 2. **30pt minimum** — Nothing smaller than `var(--f-body)` (28px). Labels/captions at 18px are the absolute floor. 3. **Max 6 words per bullet** — If it's a sentence, it's too long 4. **Max 6 bullets per slide** — If you need more, split into two slides 5. **Visuals beat text** — Use metric cards, comparison tables, charts, before/after instead of paragraphs 6. **Consistent hierarchy** — Every slide uses the same heading/body/caption structure 7. **Whitespace is a feature** — Don't fill every pixel. Sparse slides feel confident. 8. **Dark theme only** — Projectors in dark rooms. Black backgrounds with bright accents. 9. **No decorative elements** — No random shapes, gradients-for-the-sake-of-gradients, or stock photos 10. **Animate entrance only** — Elements fade up once on slide enter. No continuous animation, no auto-play effects. --- ## Slide Anatomy Every slide follows this structure: ``` ┌──────────────────────────────────────┐ │ │ │ [CAPTION — section label] │ ← Optional: "PROBLEM", "TRACTION", etc. │ │ │ [HEADLINE — one strong line] │ ← Required: The main point │ │ │ [DIVIDER] │ ← Optional: gradient line separator │ │ │ [CONTENT — visual or bullets] │ ← Required: Supporting evidence │ │ │ [NOTES — presenter speaking notes] │ ← Hidden by default, press N │ │ └──────────────────────────────────────┘ ``` ```html
PROBLEM

AI agents can't pay each other
without a human co-signer.

Supporting evidence or visual component goes here.
Speaker notes: Explain the manual process, mention 3 specific pain points, transition to solution on next slide.
``` --- ## Color Usage Guide | Element | Color | When | |---------|-------|------| | Headlines | `var(--c-text)` | Default for all headings | | Key metric values | `var(--c-accent)` | Numbers that prove traction | | Emphasis words | `var(--c-primary)` | One word per slide, max. Use `.text-emphasis` | | Body text | `var(--c-text-secondary)` | All explanatory text | | Labels, captions | `var(--c-text-muted)` | Section labels, chart labels | | Positive signals | `var(--c-accent)` | Checkmarks, growth, your product | | Negative signals | `var(--c-danger)` | Competitor weaknesses, problems | | Card backgrounds | `var(--c-bg-card)` | Contained content blocks | | Card with glow | `.card-glow` | Featured/highlighted content | | Slide backgrounds | `var(--c-bg)` or `var(--c-bg-alt)` | Alternate between slides for rhythm. NEVER use gradients. | ### What NOT to Do - No purple as a default. Ever. - No gradient slide backgrounds. Flat colors only. - No more than 2-3 colors on any single slide. - No neon accents. Keep colors muted and professional. - No rainbow palettes. Focused > colorful. - The design should feel like a consulting firm's deck, not an AI template.