Style Presets Reference

Curated visual styles for Frontend Slides. Each preset includes specific font choices, color palettes, and animation approaches to ensure distinctive, non-generic designs.

Dark Themes

1. Neon Cyber

Vibe: Futuristic, techy, confident, cutting-edge

Typography:

Display: Clash Display (700) — Bold, geometric, modern
Body: Satoshi (400/500) — Clean, technical, readable

Colors:

:root {
    --bg-primary: #0a0f1c;
    --bg-secondary: #111827;
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --accent: #00ffcc;
    --accent-secondary: #ff00aa;
    --glow: rgba(0, 255, 204, 0.4);
}

Signature Elements:

Particle system background (canvas)
Neon glow on accent elements
Custom cursor with trail
Grid pattern overlay
Glitch text effect on titles

Animation Style:

Medium speed (0.5-0.8s)
Slide up + fade entrances
Staggered reveals

2. Midnight Executive

Vibe: Premium, trustworthy, sophisticated, corporate

Typography:

Display: Libre Baskerville (700) — Classic, authoritative
Body: Source Sans 3 (400/600) — Professional, highly readable

Colors:

:root {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --accent: #3b82f6;
    --accent-secondary: #818cf8;
    --gold: #fbbf24;
}

Signature Elements:

Subtle gradient backgrounds
Thin gold accent lines
Data visualizations
Minimal decorative elements
Focus on whitespace

Animation Style:

Fast, subtle (0.3-0.5s)
Fade only, minimal movement
Professional restraint

3. Deep Space

Vibe: Inspiring, vast, contemplative, visionary

Typography:

Display: Space Grotesk (700) — Geometric, space-age
Body: DM Sans (400/500) — Modern, friendly

Colors:

:root {
    --bg-primary: #030712;
    --bg-secondary: #111827;
    --text-primary: #f9fafb;
    --text-secondary: #6b7280;
    --accent: #818cf8;
    --accent-secondary: #c084fc;
    --stars: rgba(255, 255, 255, 0.1);
}

Signature Elements:

Starfield background (CSS or canvas)
Radial gradient "spotlight" effects
Floating elements
Large, impactful typography
Generous vertical spacing

Animation Style:

Slow, cinematic (0.8-1.2s)
Scale + fade entrances
Parallax scrolling

4. Terminal Green

Vibe: Developer-focused, hacker aesthetic, retro-tech

Typography:

Display: JetBrains Mono (700) — Monospace, code-like
Body: JetBrains Mono (400) — Consistent monospace

Colors:

:root {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --accent: #39d353;
    --accent-dim: rgba(57, 211, 83, 0.2);
    --border: #30363d;
}

Signature Elements:

Scan line overlay effect
Blinking cursor
Code blocks and syntax highlighting
ASCII art decorations
Terminal-style borders

Animation Style:

Typewriter text reveals
Quick, snappy transitions (0.2-0.3s)
Character-by-character reveals

Light Themes

5. Paper & Ink

Vibe: Editorial, literary, thoughtful, refined

Typography:

Display: Cormorant Garamond (700) — Elegant, editorial
Body: Source Serif 4 (400) — Classic, readable

Colors:

:root {
    --bg-primary: #faf9f7;
    --bg-secondary: #f5f3ef;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --accent: #c41e3a;
    --border: #e5e2db;
}

Signature Elements:

Drop caps on opening paragraphs
Pull quotes
Subtle paper texture
Elegant horizontal rules
Classic column layouts

Animation Style:

Gentle fades (0.4-0.6s)
No dramatic movements
Refined, understated

6. Swiss Modern

Vibe: Clean, precise, Bauhaus-inspired, geometric

Typography:

Display: Archivo (800) — Strong, geometric
Body: Nunito (400/600) — Friendly, rounded

Colors:

:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f7f7f7;
    --text-primary: #000000;
    --text-secondary: #555555;
    --accent: #ff3300;
    --grid: rgba(0, 0, 0, 0.05);
}

Signature Elements:

Visible grid system
Asymmetric layouts
Red accent sparingly
Bold black typography
Geometric shapes

Animation Style:

Precise, mechanical (0.3-0.4s)
Linear or ease-out easing
Grid-aligned movements

7. Soft Pastel

Vibe: Friendly, approachable, creative, playful

Typography:

Display: Nunito (800) — Rounded, warm
Body: Nunito (400/500) — Consistent warmth

Colors:

:root {
    --bg-primary: #fef3f2;
    --bg-secondary: #fef9f5;
    --text-primary: #374151;
    --text-secondary: #6b7280;
    --accent: #f472b6;
    --accent-secondary: #a78bfa;
    --accent-tertiary: #34d399;
}

Signature Elements:

Rounded corners everywhere
Blob shapes in background
Multiple pastel accents
Soft shadows
Illustrated icons

Animation Style:

Bouncy spring physics
Playful overshoots
Floating/bobbing elements

8. Warm Editorial

Vibe: Human, storytelling, photographic, magazine

Typography:

Display: Playfair Display (700) — Elegant, serif headlines
Body: Work Sans (400) — Modern, readable

Colors:

:root {
    --bg-primary: #fffbf5;
    --bg-secondary: #f5efe6;
    --text-primary: #2d2a24;
    --text-secondary: #78716c;
    --accent: #b45309;
    --accent-secondary: #0369a1;
}

Signature Elements:

Large hero images
Image overlays with text
Warm photography
Pull quotes in accent color
Handwritten accent fonts

Animation Style:

Cinematic crossfades
Ken Burns effect on images
Slow, emotional transitions (0.8-1s)

Specialty Themes

9. Brutalist

Vibe: Raw, bold, unconventional, attention-grabbing

Typography:

Display: Anton or Bebas Neue (900) — Massive, compressed
Body: IBM Plex Mono (400) — Industrial

Colors:

:root {
    --bg-primary: #ffffff;
    --text-primary: #000000;
    --accent: #ff0000;
    --border: #000000;
}

Signature Elements:

Thick black borders
Asymmetric, chaotic layouts
Oversized typography
Raw, unpolished look
High contrast

Animation Style:

Instant or very fast
Hard cuts, no easing
Jarring transitions

10. Gradient Wave

Vibe: Modern SaaS, energetic, approachable tech

Typography:

Display: Cabinet Grotesk (800) — Modern, confident
Body: Inter (400/500) — Only allowed for this style

Colors:

:root {
    --bg-primary: #0f0f1a;
    --gradient-1: #667eea;
    --gradient-2: #764ba2;
    --gradient-3: #f472b6;
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
}

Signature Elements:

Animated gradient meshes
Blob shapes with blur
Glass-morphism cards
Floating orbs
Smooth curves

Animation Style:

Smooth, flowing (0.5-0.7s)
Continuous subtle animations
Hover reveals

Font Pairing Quick Reference

Vibe	Display Font	Body Font	Source
Techy/Modern	Clash Display	Satoshi	Fontshare
Professional	Libre Baskerville	Source Sans 3	Google
Space/Future	Space Grotesk	DM Sans	Google
Developer	JetBrains Mono	JetBrains Mono	JetBrains
Editorial	Cormorant Garamond	Source Serif 4	Google
Swiss/Minimal	Archivo	Nunito	Google
Playful	Nunito	Nunito	Google
Magazine	Playfair Display	Work Sans	Google
Brutalist	Anton	IBM Plex Mono	Google
SaaS Modern	Cabinet Grotesk	Inter	Fontshare/Google

Animation Easing Reference

:root {
    /* Standard curves */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);

    /* Bouncy */
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Smooth */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* Snappy */
    --ease-snappy: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

Background Effect Snippets

Particle Field (Canvas)

class ParticleSystem {
    constructor(canvas) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.particles = [];
        this.init();
    }

    init() {
        this.resize();
        for (let i = 0; i < 50; i++) {
            this.particles.push({
                x: Math.random() * this.canvas.width,
                y: Math.random() * this.canvas.height,
                vx: (Math.random() - 0.5) * 0.5,
                vy: (Math.random() - 0.5) * 0.5,
                radius: Math.random() * 2 + 1
            });
        }
        this.animate();
    }

    animate() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.particles.forEach(p => {
            p.x += p.vx;
            p.y += p.vy;
            // Wrap around edges
            if (p.x < 0) p.x = this.canvas.width;
            if (p.x > this.canvas.width) p.x = 0;
            if (p.y < 0) p.y = this.canvas.height;
            if (p.y > this.canvas.height) p.y = 0;
            // Draw
            this.ctx.beginPath();
            this.ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
            this.ctx.fillStyle = 'rgba(0, 255, 204, 0.5)';
            this.ctx.fill();
        });
        requestAnimationFrame(() => this.animate());
    }
}

Gradient Mesh (CSS)

.gradient-mesh {
    background:
        radial-gradient(at 40% 20%, hsla(280, 100%, 70%, 0.3) 0px, transparent 50%),
        radial-gradient(at 80% 0%, hsla(200, 100%, 60%, 0.3) 0px, transparent 50%),
        radial-gradient(at 0% 50%, hsla(340, 100%, 70%, 0.3) 0px, transparent 50%),
        radial-gradient(at 80% 50%, hsla(180, 100%, 50%, 0.2) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(250, 100%, 60%, 0.3) 0px, transparent 50%),
        radial-gradient(at 80% 100%, hsla(20, 100%, 60%, 0.2) 0px, transparent 50%),
        var(--bg-primary);
}

Animated Starfield (CSS)

.starfield {
    background-image:
        radial-gradient(2px 2px at 20% 30%, white 0%, transparent 50%),
        radial-gradient(2px 2px at 40% 70%, white 0%, transparent 50%),
        radial-gradient(1px 1px at 50% 40%, white 0%, transparent 50%),
        radial-gradient(1px 1px at 60% 60%, white 0%, transparent 50%),
        radial-gradient(2px 2px at 90% 10%, white 0%, transparent 50%);
    background-size: 200% 200%;
    animation: twinkle 15s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

Noise Texture (SVG Data URI)

.noise {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.05;
}

DO NOT USE (Generic AI Patterns)

Avoid these overused patterns that create "AI slop":

Fonts:

Inter (except in Gradient Wave style)
Roboto
Arial / Helvetica
System font stacks as display fonts

Colors:

#6366f1 (generic indigo)
Purple/violet gradients on white
Generic blue primary buttons
Equal distribution of accent colors

Layouts:

Centered everything
Generic hero with text left, image right
Standard 3-column features grid
Rounded rectangle cards with shadows

Animations:

Identical timing on all elements
No stagger on children
Linear easing everywhere
Excessive bounce

Effects:

Drop shadows without intention
Gratuitous glassmorphism
Blurs that don't add meaning
Gradients for no reason

STYLE_PRESETS.md 12 KB Түүх Анхны өгөгдөл

Style Presets Reference

Dark Themes

1. Neon Cyber

2. Midnight Executive

3. Deep Space

4. Terminal Green

Light Themes

5. Paper & Ink

6. Swiss Modern

7. Soft Pastel

8. Warm Editorial

Specialty Themes

9. Brutalist

10. Gradient Wave

Font Pairing Quick Reference

Animation Easing Reference

Background Effect Snippets

Particle Field (Canvas)

Gradient Mesh (CSS)

Animated Starfield (CSS)

Noise Texture (SVG Data URI)

DO NOT USE (Generic AI Patterns)

STYLE_PRESETS.md 12 KB

Түүх Анхны өгөгдөл