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