Skip to content

STYLE_PRESETS.md

Latest commit

 

History

History
418 lines (333 loc) · 12.6 KB

STYLE_PRESETS.md

File metadata and controls

418 lines (333 loc) · 12.6 KB

Style Presets

10 curated visual identities for interactive presentations. Each preset is a complete design system: colors, typography, layout character, and animation personality.

How to Use

  1. In discovery: Generate a style-preview.html file (see Phase 1 in SKILL.md) showing 3 presets side by side as mini swatches. Open it in the browser and let the user pick.
  2. In build: Copy the preset's CSS variables block into the :root {} of your HTML.
  3. In iteration: Switch presets or blend elements on request — the variable system makes this fast.

Reference presets by name: "use Neon Noir", "something like Swiss Grid but warmer", etc.

The 10 Presets

1. Neon Noir

Personality: Electric, futuristic, high-contrast. Feels like a cyberpunk dashboard. Best for: Tech launches, developer tools, gaming, anything that should feel cutting-edge. Animation style: Fast snaps, electric flickers, glitch-in reveals.

Fonts:

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">

CSS Variables:

:root {
  --bg:         #0a0a0f;
  --surface:    #12121a;
  --border:     #2a2a3a;
  --text-primary:   #f0f0ff;
  --text-secondary: #8888aa;
  --accent:     #00f5d4;
  --accent-2:   #7c3aed;
  --danger:     #ff2d55;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'JetBrains Mono', monospace;

  --radius:     4px;
  --shadow:     0 0 30px rgba(0, 245, 212, 0.15);
  --transition: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

2. Executive Dark

Personality: Premium, authoritative, restrained. Feels like a Bloomberg terminal met a luxury brand. Best for: Board presentations, investor decks, financial reports, enterprise pitches. Animation style: Slow, deliberate fades. Nothing flashy — confidence through stillness.

Fonts:

<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">

CSS Variables:

:root {
  --bg:         #0d0d0d;
  --surface:    #161616;
  --border:     #2a2a2a;
  --text-primary:   #f5f0e8;
  --text-secondary: #888880;
  --accent:     #c9a96e;
  --accent-2:   #4a4a4a;
  --danger:     #c0392b;

  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'DM Sans', sans-serif;

  --radius:     2px;
  --shadow:     0 4px 24px rgba(0, 0, 0, 0.6);
  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

3. Deep Cosmos

Personality: Vast, awe-inspiring, cinematic. Feels like a NASA briefing or TED talk. Best for: Science, research, ambitious vision decks, anything that needs to feel big. Animation style: Slow drifts, fade-ups from below, parallax depth.

Fonts:

<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Inter:wght@300;400&display=swap" rel="stylesheet">

CSS Variables:

:root {
  --bg:         #04050f;
  --surface:    #0a0d1f;
  --border:     #1a2040;
  --text-primary:   #e8eeff;
  --text-secondary: #6070a0;
  --accent:     #4f8ef7;
  --accent-2:   #9b59b6;
  --danger:     #e74c3c;

  --font-display: 'Syne', sans-serif;
  --font-body:    'Inter', sans-serif;

  --radius:     8px;
  --shadow:     0 8px 40px rgba(79, 142, 247, 0.12);
  --transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

4. Terminal

Personality: Raw, developer-native, no-nonsense. Feels like a CLI that became beautiful. Best for: Engineering all-hands, developer talks, DevOps/infrastructure, open source projects. Animation style: Typewriter reveals, line-by-line builds, blinking cursors.

Fonts:

<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@400;500&display=swap" rel="stylesheet">

CSS Variables:

:root {
  --bg:         #0c1a0c;
  --surface:    #111f11;
  --border:     #1e3a1e;
  --text-primary:   #a8ff78;
  --text-secondary: #558855;
  --accent:     #78ffa8;
  --accent-2:   #ffff78;
  --danger:     #ff6b6b;

  --font-display: 'IBM Plex Mono', monospace;
  --font-body:    'IBM Plex Mono', monospace;

  --radius:     0px;
  --shadow:     0 0 20px rgba(168, 255, 120, 0.1);
  --transition: 0.1s steps(4, end);
}

5. Editorial

Personality: Intellectual, refined, typographic. Feels like a well-designed book or long-read article. Best for: Research summaries, thought leadership, academic content, culture/media brands. Animation style: Page-turn feel, text that reveals word-by-word, ink-bleed transitions.

Fonts:

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Source+Serif+4:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">

CSS Variables:

:root {
  --bg:         #faf8f3;
  --surface:    #f2ede2;
  --border:     #d4c9b0;
  --text-primary:   #1a1208;
  --text-secondary: #6b5f4a;
  --accent:     #c0392b;
  --accent-2:   #2c3e50;
  --danger:     #e74c3c;

  --font-display: 'Playfair Display', serif;
  --font-body:    'Source Serif 4', serif;

  --radius:     0px;
  --shadow:     0 2px 12px rgba(26, 18, 8, 0.08);
  --transition: 0.3s ease;
}

6. Swiss Grid

Personality: Precise, systematic, intelligent. Feels like a Müller-Brockmann poster in motion. Best for: Product presentations, design reviews, anything that should feel considered and modern. Animation style: Grid-based reveals, elements sliding into alignment, mathematical precision.

Fonts:

<link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,700;0,900;1,400&family=Barlow+Condensed:wght@400;600&display=swap" rel="stylesheet">

CSS Variables:

:root {
  --bg:         #f5f5f2;
  --surface:    #ffffff;
  --border:     #d0d0cc;
  --text-primary:   #111110;
  --text-secondary: #777770;
  --accent:     #e63329;
  --accent-2:   #1a1a18;
  --danger:     #e63329;

  --font-display: 'Barlow', sans-serif;
  --font-body:    'Barlow Condensed', sans-serif;

  --radius:     0px;
  --shadow:     none;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

7. Studio Soft

Personality: Warm, creative, welcoming. Feels like a well-lit design studio or Dribbble shot. Best for: Creative pitches, agency work, product launches for consumer apps, HR/people teams. Animation style: Springy bounces, cards that float in, soft scale-ups.

Fonts:

<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;0,800;1,400&family=DM+Sans:wght@300;400&display=swap" rel="stylesheet">

CSS Variables:

:root {
  --bg:         #fef9f4;
  --surface:    #ffffff;
  --border:     #ead9c8;
  --text-primary:   #2d1f0f;
  --text-secondary: #8a6f58;
  --accent:     #f07d3a;
  --accent-2:   #7c4dff;
  --danger:     #e74c3c;

  --font-display: 'Nunito', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  --radius:     16px;
  --shadow:     0 4px 24px rgba(240, 125, 58, 0.12);
  --transition: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

8. Warm Magazine

Personality: Photo-forward, tactile, editorial warmth. Feels like a premium print magazine. Best for: Brand stories, portfolio showcases, culture decks, marketing reviews. Animation style: Full-bleed image reveals, text that overlays gracefully, parallax on hero images.

Fonts:

<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Lato:wght@300;400&display=swap" rel="stylesheet">

CSS Variables:

:root {
  --bg:         #f7f0e6;
  --surface:    #ede4d4;
  --border:     #c8b89a;
  --text-primary:   #1c1208;
  --text-secondary: #7a6448;
  --accent:     #b85c38;
  --accent-2:   #2d4a3e;
  --danger:     #b03a2e;

  --font-display: 'Libre Baskerville', serif;
  --font-body:    'Lato', sans-serif;

  --radius:     4px;
  --shadow:     0 2px 16px rgba(28, 18, 8, 0.1);
  --transition: 0.4s ease;
}

9. Brutalist

Personality: Unapologetic, raw, visceral. Breaks all the rules on purpose. Best for: Art/culture projects, provocative ideas, anything that should feel disruptive or anti-corporate. Animation style: Harsh slams, text that crashes into place, zero easing.

Fonts:

<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

CSS Variables:

:root {
  --bg:         #f5f500;
  --surface:    #ffffff;
  --border:     #000000;
  --text-primary:   #000000;
  --text-secondary: #333333;
  --accent:     #ff0000;
  --accent-2:   #0000ff;
  --danger:     #ff0000;

  --font-display: 'Space Mono', monospace;
  --font-body:    'Space Mono', monospace;

  --radius:     0px;
  --shadow:     4px 4px 0px #000000;
  --transition: 0.05s linear;
}

10. Aurora

Personality: Fluid, modern, optimistic. Feels like a polished SaaS product launch. Best for: Startup pitches, product announcements, consumer tech, anything targeting a general/broad audience. Animation style: Gradient morphs, smooth fades, elements that flow like water.

Fonts:

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,700;1,300&display=swap" rel="stylesheet">

CSS Variables:

:root {
  --bg:         #f8f6ff;
  --surface:    #ffffff;
  --border:     #e0d8ff;
  --text-primary:   #1a1030;
  --text-secondary: #6b5f8a;
  --accent:     #6c47ff;
  --accent-2:   #ff6584;
  --danger:     #e74c3c;

  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;

  --radius:     12px;
  --shadow:     0 8px 32px rgba(108, 71, 255, 0.15);
  --transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

Choosing the Right Preset

Situation Recommended
Investor / board meeting Executive Dark, Swiss Grid
Tech / developer audience Neon Noir, Terminal, Deep Cosmos
Creative / agency pitch Studio Soft, Warm Magazine, Brutalist
Startup product launch Aurora, Swiss Grid
Academic / research Editorial, Deep Cosmos
Async team share Any light theme (Editorial, Swiss Grid, Studio Soft, Warm Magazine, Aurora)
"Wow" factor needed Neon Noir, Deep Cosmos, Brutalist
Safe / conservative context Executive Dark, Swiss Grid, Editorial

Style Preview Template

Use this to generate a style-preview.html showing 3 presets side by side. Fill in the CSS variables and font links for each of the 3 chosen presets:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Preview</title>
<!-- Load fonts for all 3 presets here -->
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #1a1a1a; display: flex; gap: 24px; padding: 32px; min-height: 100vh; align-items: center; justify-content: center; }
.swatch { width: 360px; height: 240px; border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform 0.2s; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; position: relative; }
.swatch:hover { transform: scale(1.03); }
.swatch-label { color: #fff; font-family: sans-serif; font-size: 12px; opacity: 0.6; text-align: center; margin-top: 8px; }

/* Preset A */
.preset-a { /* paste --bg and --surface from chosen preset */ }
.preset-a h2 { /* paste --font-display, --text-primary */ }
.preset-a p  { /* paste --font-body, --text-secondary */ }
.preset-a .pill { /* paste --accent, contrasting text */ }
</style>
</head>
<body>
  <div>
    <div class="swatch preset-a" style="background: VAR_BG_A;">
      <div>
        <div style="font-family: FONT_DISPLAY_A; font-size: 22px; font-weight: 700; color: VAR_TEXT_A; margin-bottom: 8px;">Your Title Here</div>
        <div style="font-family: FONT_BODY_A; font-size: 13px; color: VAR_TEXT_SEC_A; line-height: 1.5;">Supporting idea or subtitle that shows how body text will look in this style.</div>
      </div>
      <div style="display:flex; gap:8px; align-items:center;">
        <div style="background: VAR_ACCENT_A; color: VAR_BG_A; padding: 6px 14px; border-radius: VAR_RADIUS_A; font-family: FONT_BODY_A; font-size: 12px; font-weight: 600;">CTA Button</div>
        <div style="font-family: FONT_BODY_A; font-size: 11px; color: VAR_TEXT_SEC_A;">1 / 8</div>
      </div>
    </div>
    <div class="swatch-label">PRESET NAME A</div>
  </div>

  <!-- Repeat for preset B and C -->
</body>
</html>

Note: After generating the preview file, tell the user: "Open style-preview.html in your browser — which one feels right?" Then proceed with their choice.