|
|
@@ -0,0 +1,347 @@
|
|
|
+# 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:**
|
|
|
+```css
|
|
|
+: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:**
|
|
|
+```css
|
|
|
+: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:**
|
|
|
+```css
|
|
|
+: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:**
|
|
|
+```css
|
|
|
+: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:**
|
|
|
+```css
|
|
|
+: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:**
|
|
|
+```css
|
|
|
+: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:**
|
|
|
+```css
|
|
|
+: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:**
|
|
|
+```css
|
|
|
+: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):**
|
|
|
+```css
|
|
|
+right: -clamp(28px, 3.5vw, 44px); /* Browser ignores this */
|
|
|
+margin-left: -min(10vw, 100px); /* Browser ignores this */
|
|
|
+```
|
|
|
+
|
|
|
+**CORRECT — wrap in `calc()`:**
|
|
|
+```css
|
|
|
+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.**
|
|
|
+
|
MageByte-Zero