aaronvanston/presentation-design

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