Presentation Design
Visual design guidance for bold, minimal presentations optimized for live presenting.
Core Style
Theme: Dark-first, high contrast, minimal (light mode supported) Feel: Modern, confident, tech-forward
| Element | Specification |
|---|---|
| Background | Black (#000000) or near-black; light mode: #fafafa |
| Primary text | White (#FFFFFF); light mode: #09090b |
| Secondary text | Gray (#9CA3AF) |
| Accents | Section-specific colors (see below) |
| Typography | Sans-serif (e.g. Geist Sans), light weights at large sizes |
| Letter spacing | Tight (-0.035em to -0.015em) |
Typography Hierarchy
Impact comes from scale, not weight. Use light/regular weights (400-600) at massive sizes.
SECTION LABEL Small caps, section color, tracked wide
Example: "THE PROBLEM" | "WHAT WORKS"
Headline Massive, primary color, light weight (400-500)
Fluid sizing via container queries
1-5 words per line typical
Subtitle Smaller, secondary/muted color, regular weight
1-2 lines maximum
Body/Bullets Medium size, primary or secondary color
Bold lead-ins (600 weight) when usedText Contrast Hierarchy
Use 4 levels of contrast to create depth:
| Level | Purpose | Example |
|---|---|---|
| Primary | Headlines, key content | White / #FFFFFF |
| Secondary | Subtitles, supporting text | Light gray |
| Muted | Labels, metadata | Medium gray |
| Faint | Background elements | Dark gray |
Section Colors
Each major section of a presentation gets its own accent color. This reinforces structure and helps the audience track where they are.
| Color | Hex (dark) | Typical use |
|---|---|---|
| Teal | #14b8a6 | Opening, framing, recap |
| Red | #f87171 | Problems, challenges, tension |
| Purple | #a78bfa | Solutions, features, tools |
| Amber | #fbbf24 | Data, reality checks, caveats |
| Green | #34d399 | Best practices, what works |
| Blue | #60a5fa | Technical, implementation |
| Pink | #f472b6 | Highlights, special callouts |
Section colors appear in: section labels, gradient backgrounds, progress bars, and accent elements.
Layout Patterns
Full Statement (most common)
┌─────────────────────────────────────────┐
│ SECTION LABEL │
│ │
│ Massive │
│ Headline │
│ Here │
│ │
│ Subtitle text in muted color │
│ [ref] ↗ │
└─────────────────────────────────────────┘Big Statement (maximum impact)
┌─────────────────────────────────────────┐
│ SECTION LABEL │
│ │
│ │
│ Even Bigger │
│ Statement │
│ │
│ │
└─────────────────────────────────────────┘Split Layout
┌─────────────────────────────────────────┐
│ SECTION LABEL │
│ │
│ Headline │ • Point one │
│ Here │ • Point two │
│ │ • Point three │
│ Subtitle │ • Point four │
└─────────────────────────────────────────┘Section Divider (with gradient)
┌────────────────────┬────────────────────┐
│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
│ Section │▓▓▓ Gradient ▓▓▓▓▓▓▓│
│ Title │▓▓▓ Background ▓▓▓▓▓│
│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
│ Subtitle │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
└────────────────────┴────────────────────┘Code Slide
┌─────────────────────────────────────────┐
│ SECTION LABEL │
│ Headline │
│ Subtitle │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ // syntax-highlighted code block │ │
│ │ const result = await generate() │ │
│ │ │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────┘Data/Metrics
┌─────────────────────────────────────────┐
│ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ $10M │ │ ~10% │ │ NPS │ │
│ │ ARR │ │ GROWTH │ │ 90 │ │
│ └────────┘ └────────┘ └────────┘ │
│ SECTION LABEL │
│ Headline │
│ Subtitle │
└─────────────────────────────────────────┘People/Photos Grid
┌─────────────────────────────────────────┐
│ Headline │
│ Subtitle │
│ │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │photo│ │photo│ │photo│ │photo│ │
│ │Name │ │Name │ │Name │ │Name │ │
│ │TITLE│ │TITLE│ │TITLE│ │TITLE│ │
│ └─────┘ └─────┘ └─────┘ └─────┘ │
│ │
│ Photo style: Rounded, B&W or consistent │
└─────────────────────────────────────────┘Slide Type → Layout Mapping
| Slide Type | Layout |
|---|---|
| Title | Full statement, centered |
| Section divider | Split with gradient, section color |
| Statement | Full statement, left-aligned |
| Big statement | Big statement, maximum scale |
| Question | Full statement, centered |
| Goals/Agenda | Split layout, bullets right |
| Data | Metrics boxes top |
| Code | Headline + syntax-highlighted block |
| Quote | Centered, large quotation marks |
| People | Photos grid |
| Recap | Split layout, labeled bullets |
| Resources | Grouped reference links by section |
| Next steps | Timeline or labeled bullets |
Embedded Content
Slides can embed rich media alongside headlines:
- Code blocks — syntax-highlighted, dark surface background
- Terminal output — monospace with ANSI color support
- Tweet cards — styled quote cards with avatar and attribution
- Video previews — thumbnail with play button
- Article previews — link cards with title and description
Visual Elements
- Section labels: Top-left, uppercase, section color
- Progress bar: Bottom edge, section color, thin (3px)
- References: Bottom footer with clickable URLs
- Gradients: Aurora-style background effects using section color
- Icons: Simple line icons, white or accent color, used sparingly
Things to Avoid
- Dense paragraphs of text
- More than 4-5 bullet points
- Clip art or stock imagery
- Heavy font weights for headlines (use scale instead)
- Multiple competing focal points
- Animation for animation's sake