presentation-design
Visual design guidance for bold, minimal presentations. Provides layout patterns, typography hierarchy, color specifications, and slide composition rules. Use when asking "how should this slide look?", "design guidance for...", "what layout for this slide?", or when translating content into visual s
By aaronvanston · 750 installs
npx skills add aaronvanston/skills-presentations --skill presentation-design
Source repository · Upstream listing
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.
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)
Big Statement (maximum impact)
Split Layout
Section Divider (with gradient)
Code Slide
Data/Metrics
People/Photos Grid
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