antigravity-skills-reference/skills/frontend-slides/STYLE_PRESETS.md

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

• 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

Preset	Display Font	Body Font	Source
Bold Signal	Archivo Black	Space Grotesk	Google
Electric Studio	Manrope	Manrope	Google
Creative Voltage	Syne	Space Mono	Google
Dark Botanical	Cormorant	IBM Plex Sans	Google
Notebook Tabs	Bodoni Moda	DM Sans	Google
Pastel Geometry	Plus Jakarta Sans	Plus Jakarta Sans	Google
Split Pastel	Outfit	Outfit	Google
Vintage Editorial	Fraunces	Work Sans	Google
Neon Cyber	Clash Display	Satoshi	Fontshare
Terminal Green	JetBrains Mono	JetBrains Mono	JetBrains

---

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

---

CSS Gotchas

Negating CSS Functions

WRONG — silently ignored by browsers (no console error):

right: -clamp(28px, 3.5vw, 44px);   /* Browser ignores this */
margin-left: -min(10vw, 100px);      /* Browser ignores this */

CORRECT — wrap in calc():

right: calc(-1 * clamp(28px, 3.5vw, 44px));  /* Works */
margin-left: calc(-1 * min(10vw, 100px));     /* Works */

CSS does not allow a leading - before function names. The browser silently discards the entire declaration — no error, the element just appears in the wrong position. Always use calc(-1 * ...) to negate CSS function values.