Style Presets Reference

Style Presets Reference

Curated visual styles for Frontend Slides. Each preset is inspired by real design references—no generic "AI slop" aesthetics. Abstract shapes only—no illustrations.

⚠️ CRITICAL: Viewport Fitting (Non-Negotiable)

Every slide MUST fit exactly in the viewport. No scrolling within slides, ever.

Content Density Limits Per Slide

Too much content? → Split into multiple slides. Never scroll.

Required Base CSS (Include in ALL Presentations)

/* ===========================================
   VIEWPORT FITTING: MANDATORY
   Copy this entire block into every presentation
   =========================================== */

/* 1. Lock document to viewport */
html, body {
    height: 100%;
    overflow-x: hidden;
}

html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

/* 2. Each slide = exact viewport height */
.slide {
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport for mobile */
    overflow: hidden; /* CRITICAL: No overflow ever */
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 3. Content wrapper */
.slide-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 100%;
    overflow: hidden;
    padding: var(--slide-padding);
}

/* 4. ALL sizes use clamp() - scales with viewport */
:root {
    /* Typography */
    --title-size: clamp(1.5rem, 5vw, 4rem);
    --h2-size: clamp(1.25rem, 3.5vw, 2.5rem);
    --body-size: clamp(0.75rem, 1.5vw, 1.125rem);
    --small-size: clamp(0.65rem, 1vw, 0.875rem);

    /* Spacing */
    --slide-padding: clamp(1rem, 4vw, 4rem);
    --content-gap: clamp(0.5rem, 2vw, 2rem);
}

/* 5. Cards/containers use viewport-relative max sizes */
.card, .container {
    max-width: min(90vw, 1000px);
    max-height: min(80vh, 700px);
}

/* 6. Images constrained */
img {
    max-width: 100%;
    max-height: min(50vh, 400px);
    object-fit: contain;
}

/* 7. Grids adapt to space */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: clamp(0.5rem, 1.5vw, 1rem);
}

/* ===========================================
   RESPONSIVE BREAKPOINTS - Height-based
   =========================================== */

/* Short screens (< 700px height) */
@media (max-height: 700px) {
    :root {
        --slide-padding: clamp(0.75rem, 3vw, 2rem);
        --content-gap: clamp(0.4rem, 1.5vw, 1rem);
        --title-size: clamp(1.25rem, 4.5vw, 2.5rem);
    }
}

/* Very short (< 600px height) */
@media (max-height: 600px) {
    :root {
        --slide-padding: clamp(0.5rem, 2.5vw, 1.5rem);
        --title-size: clamp(1.1rem, 4vw, 2rem);
        --body-size: clamp(0.7rem, 1.2vw, 0.95rem);
    }

    .nav-dots, .keyboard-hint, .decorative {
        display: none;
    }
}

/* Extremely short - landscape phones (< 500px) */
@media (max-height: 500px) {
    :root {
        --slide-padding: clamp(0.4rem, 2vw, 1rem);
        --title-size: clamp(1rem, 3.5vw, 1.5rem);
        --body-size: clamp(0.65rem, 1vw, 0.85rem);
    }
}

/* Narrow screens */
@media (max-width: 600px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.2s !important;
    }
}

Viewport Fitting Checklist

Before finalizing any presentation, verify:

• Every .slide has height: 100vh; height: 100dvh; overflow: hidden;
• All font sizes use clamp(min, preferred, max)
• All spacing uses clamp() or viewport units
• Breakpoints exist for heights: 700px, 600px, 500px
• Content respects density limits (max 6 bullets, max 6 cards)
• No fixed pixel heights on content elements
• Images have max-height constraints

Dark Themes

1. Bold Signal

Vibe: Confident, bold, modern, high-impact

Layout: Colored card on dark gradient. Number top-left, navigation top-right, title bottom-left.

Typography:

• Display: Archivo Black (900)
• Body: Space Grotesk (400/500)

Colors:

:root {
    --bg-primary: #1a1a1a;
    --bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    --card-bg: #FF5722;
    --text-primary: #ffffff;
    --text-on-card: #1a1a1a;
}

Signature Elements:

• Bold colored card as focal point (orange, coral, or vibrant accent)
• Large section numbers (01, 02, etc.)
• Navigation breadcrumbs with active/inactive opacity states
• Grid-based layout for precise alignment

2. Electric Studio

Vibe: Bold, clean, professional, high contrast

Layout: Split panel—white top, blue bottom. Brand marks in corners.

Typography:

• Display: Manrope (800)
• Body: Manrope (400/500)

Colors:

:root {
    --bg-dark: #0a0a0a;
    --bg-white: #ffffff;
    --accent-blue: #4361ee;
    --text-dark: #0a0a0a;
    --text-light: #ffffff;
}

Signature Elements:

• Two-panel vertical split
• Accent bar on panel edge
• Quote typography as hero element
• Minimal, confident spacing

3. Creative Voltage

Vibe: Bold, creative, energetic, retro-modern

Layout: Split panels—electric blue left, dark right. Script accents.

Typography:

• Display: Syne (700/800)
• Mono: Space Mono (400/700)

Colors:

:root {
    --bg-primary: #0066ff;
    --bg-dark: #1a1a2e;
    --accent-neon: #d4ff00;
    --text-light: #ffffff;
}

Signature Elements:

• Electric blue + neon yellow contrast
• Halftone texture patterns
• Neon badges/callouts
• Script typography for creative flair

4. Dark Botanical

Vibe: Elegant, sophisticated, artistic, premium

Layout: Centered content on dark. Abstract soft shapes in corner.

Typography:

• Display: Cormorant (400/600) — elegant serif
• Body: IBM Plex Sans (300/400)

Colors:

:root {
    --bg-primary: #0f0f0f;
    --text-primary: #e8e4df;
    --text-secondary: #9a9590;
    --accent-warm: #d4a574;
    --accent-pink: #e8b4b8;
    --accent-gold: #c9b896;
}

Signature Elements:

• Abstract soft gradient circles (blurred, overlapping)
• Warm color accents (pink, gold, terracotta)
• Thin vertical accent lines
• Italic signature typography
• No illustrations—only abstract CSS shapes

Light Themes

5. Notebook Tabs

Vibe: Editorial, organized, elegant, tactile

Layout: Cream paper card on dark background. Colorful tabs on right edge.

Typography:

• Display: Bodoni Moda (400/700) — classic editorial
• Body: DM Sans (400/500)

Colors:

:root {
    --bg-outer: #2d2d2d;
    --bg-page: #f8f6f1;
    --text-primary: #1a1a1a;
    --tab-1: #98d4bb; /* Mint */
    --tab-2: #c7b8ea; /* Lavender */
    --tab-3: #f4b8c5; /* Pink */
    --tab-4: #a8d8ea; /* Sky */
    --tab-5: #ffe6a7; /* Cream */
}

Signature Elements:

• Paper container with subtle shadow
• Colorful section tabs on right edge (vertical text)
• Binder hole decorations on left
• Tab text must scale with viewport: font-size: clamp(0.5rem, 1vh, 0.7rem)

6. Pastel Geometry

Vibe: Friendly, organized, modern, approachable

Layout: White card on pastel background. Vertical pills on right edge.

Typography:

• Display: Plus Jakarta Sans (700/800)
• Body: Plus Jakarta Sans (400/500)

Colors:

:root {
    --bg-primary: #c8d9e6;
    --card-bg: #faf9f7;
    --pill-pink: #f0b4d4;
    --pill-mint: #a8d4c4;
    --pill-sage: #5a7c6a;
    --pill-lavender: #9b8dc4;
    --pill-violet: #7c6aad;
}

Signature Elements:

• Rounded card with soft shadow
• Vertical pills on right edge with varying heights (like tabs)
• Consistent pill width, heights: short → medium → tall → medium → short
• Download/action icon in corner

7. Split Pastel

Vibe: Playful, modern, friendly, creative

Layout: Two-color vertical split (peach left, lavender right).

Typography:

• Display: Outfit (700/800)
• Body: Outfit (400/500)

Colors:

:root {
    --bg-peach: #f5e6dc;
    --bg-lavender: #e4dff0;
    --text-dark: #1a1a1a;
    --badge-mint: #c8f0d8;
    --badge-yellow: #f0f0c8;
    --badge-pink: #f0d4e0;
}

Signature Elements:

• Split background colors
• Playful badge pills with icons
• Grid pattern overlay on right panel
• Rounded CTA buttons

8. Vintage Editorial

Vibe: Witty, confident, editorial, personality-driven

Layout: Centered content on cream. Abstract geometric shapes as accent.

Typography:

• Display: Fraunces (700/900) — distinctive serif
• Body: Work Sans (400/500)

Colors:

:root {
    --bg-cream: #f5f3ee;
    --text-primary: #1a1a1a;
    --text-secondary: #555;
    --accent-warm: #e8d4c0;
}

Signature Elements:

• Abstract geometric shapes (circle outline + line + dot)
• Bold bordered CTA boxes
• Witty, conversational copy style
• No illustrations—only geometric CSS shapes

Specialty Themes

9. Neon Cyber

Vibe: Futuristic, techy, confident

Typography: Clash Display + Satoshi (Fontshare)

Colors: Deep navy (#0a0f1c), cyan accent (#00ffcc), magenta (#ff00aa)

Signature: Particle backgrounds, neon glow, grid patterns

10. Terminal Green

Vibe: Developer-focused, hacker aesthetic

Typography: JetBrains Mono (monospace only)

Colors: GitHub dark (#0d1117), terminal green (#39d353)

Signature: Scan lines, blinking cursor, code syntax styling

11. Swiss Modern

Vibe: Clean, precise, Bauhaus-inspired

Typography: Archivo (800) + Nunito (400)

Colors: Pure white, pure black, red accent (#ff3300)

Signature: Visible grid, asymmetric layouts, geometric shapes

12. Paper & Ink

Vibe: Editorial, literary, thoughtful

Typography: Cormorant Garamond + Source Serif 4

Colors: Warm cream (#faf9f7), charcoal (#1a1a1a), crimson accent (#c41e3a)

Signature: Drop caps, pull quotes, elegant horizontal rules

Font Pairing Quick Reference

DO NOT USE (Generic AI Patterns)

Fonts: Inter, Roboto, Arial, system fonts as display

Colors: #6366f1 (generic indigo), purple gradients on white

Layouts: Everything centered, generic hero sections, identical card grids

Decorations: Realistic illustrations, gratuitous glassmorphism, drop shadows without purpose

Troubleshooting Viewport Issues

Content Overflows the Slide

Symptoms: Scrollbar appears, content cut off, elements outside viewport

Solutions:

1. Check slide has overflow: hidden (not overflow: auto or visible)
2. Reduce content — split into multiple slides
3. Ensure all fonts use clamp() not fixed px or rem
4. Add/fix height breakpoints for smaller screens
5. Check images have max-height: min(50vh, 400px)

Text Too Small on Mobile / Too Large on Desktop

Symptoms: Unreadable text on phones, oversized text on big screens

Solutions:

/* Use clamp with viewport-relative middle value */
font-size: clamp(1rem, 3vw, 2.5rem);
/*              ↑       ↑      ↑
            minimum  scales  maximum */

Content Doesn't Fill Short Screens

Symptoms: Excessive whitespace on landscape phones or short browser windows

Solutions:

1. Add @media (max-height: 600px) and (max-height: 500px) breakpoints
2. Reduce padding at smaller heights
3. Hide decorative elements (display: none)
4. Consider hiding nav dots and hints on short screens

Testing Recommendations

Test at these viewport sizes:

• Desktop: 1920×1080, 1440×900, 1280×720
• Tablet: 1024×768 (landscape), 768×1024 (portrait)
• Mobile: 375×667 (iPhone SE), 414×896 (iPhone 11)
• Landscape phone: 667×375, 896×414

Use browser DevTools responsive mode to quickly test multiple sizes.