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.**

**Viewport CSS:** For mandatory base styles, see [viewport-base.css](viewport-base.css). Include in every presentation.

---

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:**