微信扫一扫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 used
Text 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