Creative Chaos
Style Guide

Technical implementation guide for the Creative Chaos design system. Copy, paste, and create joyful interfaces that break conventions.

Color Gradients

Warm Sunset

Primary backgrounds, hero sections

Neural Depth

Interactive elements, cards

Organic Flow

Success states, nature themes

Ocean Depths

Info states, tech themes

Mystic Purple

Premium features, luxury themes

Forest Canopy

Success states, nature themes

Electric Storm

Interactive highlights, CTAs

Crimson Fire

Error states, urgent actions

Golden Hour

Warning states, highlights

Typography Scale

Display Large

Hero titles, main headings

The quick brown fox jumps over the lazy dog
text-6xl font-bold

Display Medium

Section headers

The quick brown fox jumps over the lazy dog
text-4xl font-semibold

Body Large

Primary content, descriptions

The quick brown fox jumps over the lazy dog
text-lg leading-relaxed

Body Small

Captions, metadata

The quick brown fox jumps over the lazy dog
text-sm opacity-80

Motion Patterns

Breathing

Subtle pulsing for backgrounds

Floating

Gentle floating motion for particles

Organic Hover

Interactive element responses

Spacing System

Micro

0.25rem (4px)

p-1, m-1, gap-1

Small

0.5rem (8px)

p-2, m-2, gap-2

Medium

1rem (16px)

p-4, m-4, gap-4

Large

1.5rem (24px)

p-6, m-6, gap-6

XLarge

2rem (32px)

p-8, m-8, gap-8

Implementation Rules

✅ Do This

  • • Use asymmetrical layouts for visual interest
  • • Layer gradients with breathing animations
  • • Break conventional grid systems
  • • Add subtle floating particles
  • • Use organic, flowing shapes
  • • Implement gentle hover interactions

❌ Avoid This

  • • Rigid, corporate layouts
  • • Static, lifeless backgrounds
  • • Perfect symmetry everywhere
  • • Harsh, jarring animations
  • • Sharp, angular designs only
  • • Overwhelming motion effects

Quick Start Template

<div className="min-h-screen bg-gradient-to-br from-orange-600 via-red-700 to-amber-800">
  {/* Floating particles */}
  <div className="absolute inset-0 overflow-hidden pointer-events-none">
    {[...Array(20)].map((_, i) => (
      <div
        key={i}
        className="absolute w-2 h-2 bg-white/40 rounded-full animate-bounce"
        style={{
          left: `${Math.random() * 100}%`,
          top: `${Math.random() * 100}%`,
          animationDelay: `${Math.random() * 2}s`,
          animationDuration: `${2 + Math.random() * 2}s`
        }}
      />
    ))}
  </div>
  
  <div className="relative z-10 container mx-auto px-6 py-12">
    <h1 className="text-6xl font-bold text-white mb-6">
      Your Creative Title
    </h1>
    {/* Your content here */}
  </div>
</div>