Twenty design styles. Copy, paste, ship.

Build a task management dashboard with playful energy: - Bold, saturated color blocks (coral, electric blue, sunny yellow) - Rounded cards with generous padding - Bouncy hover states (scale-105 transforms) - Oversized, friendly buttons with shadow-lg - Cheerful empty states with illustrations - Mobile-first, responsive grid layout

Design a pricing page with luxury aesthetics: - Glassmorphism cards (bg-white/10, backdrop-blur-lg) - Soft gradient overlays (from-slate-50 to-white) - Generous spacing (py-24, px-12) - Inter font with tight letter spacing - Subtle hover lift effects (translate-y-1) - Premium gold or blue accent highlights - Shadow-2xl for depth - Responsive 3-column grid collapsing to 1 on mobile

Create a landing page with cinematic sci-fi aesthetics: - Deep dark background (bg-slate-950) - Cosmic gradient hero (from-purple-900 via-blue-900 to-slate-900) - Glowing neon accents (cyan-400, electric blue borders) - Smooth scroll-triggered animations - Grid overlay pattern with opacity-10 - Terminal-style code blocks with syntax highlighting - Floating cards with glow effects - Responsive, mobile-optimized

Design a meditation app with peaceful aesthetics: - Soft pastel gradient background (from-blue-50 via-purple-50 to-pink-50) - Muted color palette (sage green, soft lavender, warm beige) - Extra generous spacing (py-32, gap-16) - Slow, gentle fade-in animations (duration-700) - Large, comfortable touch targets (min-h-16) - Rounded-3xl containers - Minimal text, maximum whitespace - Single-column centered layout (max-w-2xl mx-auto)

Build a portfolio site with brutalist boldness: - Stark black and white palette - Massive headlines (text-7xl font-black) - Rigid grid system with visible borders (border-2 border-black) - Oversized buttons with sharp corners (rounded-none) - High contrast everywhere - Raw, unpolished aesthetic - Dense information architecture - Desktop-first with brutal mobile breakpoints - Monospace font for labels (font-mono)

Create a documentation site with developer-first design: - Dark mode default (bg-slate-900, text-slate-100) - JetBrains Mono or Fira Code monospace font - Terminal-inspired color scheme (green-400 for success, red-400 for errors) - Keyboard shortcuts overlay (Cmd+K to search) - Syntax-highlighted code blocks with copy button - Minimal sidebar navigation - Markdown-rendered content - Quick search with fuzzy matching - Mobile-responsive with collapsible nav

Design a note-taking app with radical minimalism: - Pure white background (bg-white) - Single column layout (max-w-3xl mx-auto) - Generous line height (leading-relaxed) - Neutral gray text (text-slate-700) - Hidden UI until hover (opacity-0 hover:opacity-100) - Subtle transitions (duration-200) - No borders, minimal shadows - Clean serif font for reading (font-serif) - Distraction-free writing mode

Build a creative agency landing page with artistic flair: - Asymmetric grid with overlapping sections - Mixed typography (display + serif + mono) - Scroll-triggered parallax effects - Layered imagery with z-index play - Unexpected color combinations - Rotated elements (-rotate-3, rotate-2) - Dynamic text sizing across breakpoints - Hover states that reveal hidden layers - Mobile: simplified to single column with maintained energy

Design a luxury jewelry website with sophisticated elegance: - Playfair Display or Cormorant serif font - Cream background (bg-stone-50) with gold accents (text-amber-600) - Dramatic shadows on cards (shadow-2xl) - Generous padding (py-20, px-16) - Subtle marble texture overlay - Slow, elegant transitions (duration-500 ease-in-out) - Large product imagery with zoom on hover - Minimal, refined navigation - Mobile: maintain elegance with adjusted spacing

Create a wellness platform with nature-inspired design: - Earth tone palette (greens, browns, terracotta) - Organic curved containers (rounded-3xl with irregular shapes) - Hand-drawn illustration accents - Warm, natural textures (subtle noise overlays) - Flowing animations (ease-in-out curves) - Botanical iconography - Comfortable, human-scale spacing - Natural material inspiration (wood, stone, leaf textures) - Mobile-first responsive design

Build a music streaming app with synthwave aesthetics: - Neon gradient background (from-pink-500 via-purple-500 to-blue-500) - Glowing neon text effects (text-shadow with pink/blue) - Pixelated or blocky fonts (Press Start 2P style) - VHS scan line effect overlay - Retro rounded buttons with thick borders - 80s color scheme (hot pink, electric blue, neon purple) - Animated gradient shifts - Grid backgrounds with perspective - Mobile-optimized retro interface

Design a financial dashboard with corporate professionalism: - Structured card-based layout - Muted blue palette (blue-600, slate-700) - Clear hierarchical typography (Inter font) - Organized data tables with alternating row colors - Conservative spacing and alignment - Professional charts (bar, line, pie with Recharts) - Subtle shadows (shadow-md) - Clear navigation breadcrumbs - Form validation with helpful errors - Fully responsive with tablet optimization

Create an art gallery site with experimental boldness: - Intentionally broken grid system - Clashing color combinations (complementary opposites) - Multiple conflicting typefaces - Chaotic but intentional layout - Unexpected scroll behaviors - Overlapping content with creative z-index - Animated typography on entrance - Interactive hover reveals - Asymmetric mobile layout preserving chaos

Build a community platform with welcoming warmth: - Warm color palette (orange-500, amber-400, yellow-300) - Generous rounded corners (rounded-2xl) - Soft drop shadows (shadow-lg) - Comfortable spacing (py-8, gap-6) - Friendly button copy ("Let's go!" instead of "Submit") - Approachable typography (Quicksand or Comfortaa) - Subtle hover lifts (hover:scale-102) - Warm gradient backgrounds - Mobile-optimized with comfortable touch targets

Design an analytics dashboard with data-first precision: - Cool gray palette (slate-50, slate-700, slate-900) - Systematic color coding (green for positive, red for negative) - Sharp-edged cards (rounded-lg, not rounded-3xl) - Dense information display - Multiple chart types (Recharts: line, bar, area, pie) - Precise alignment and spacing - Clear metric hierarchy (large numbers, small labels) - Filter panel with date range pickers - Export functionality (CSV, PDF) - Responsive with maintained data density

Create a habit tracking app with gamification: - Colorful achievement badges with icon variety - Animated progress rings (stroke-dashoffset transitions) - Streak counter with fire icon - Level-up animations with confetti effects - Point system displayed prominently - Leaderboard with friendly competition - Reward unlocks with modal celebrations - Progress bars with encouraging copy - Playful illustrations for milestones - Mobile-first with haptic feedback consideration

Build a portfolio with glassmorphism throughout: - Frosted glass cards (bg-white/10, backdrop-blur-md) - Layered depth with multiple z-index levels - Subtle borders (border border-white/20) - Gradient backgrounds behind glass elements - Drop shadows for elevation (shadow-2xl) - Translucent navigation bar - Hover states brighten glass (hover:bg-white/20) - Smooth transitions between layers - Works on dark backgrounds - Mobile: simplified glass effects for performance

Design a magazine-style blog with editorial polish: - Multi-column article layout (2-3 columns on desktop) - Featured image hero sections - Drop caps on first paragraph (first-letter text-6xl) - Pull quotes styled distinctively - Serif font for body (Merriweather or Lora) - Sans-serif for headlines (Inter) - Generous line spacing (leading-loose) - Image galleries with captions - Related articles sidebar - Reading time estimates - Mobile: single column with optimized reading width

Create a gaming platform with cyberpunk intensity: - Pure black background (bg-black) - Electric neon colors (cyan-400, magenta-500, yellow-300) - Glowing text effects with text-shadow - Neon border animations (animate-pulse on borders) - Holographic gradient buttons - RGB color shift effects on hover - Dark grid patterns with neon accents - Intense saturation throughout - Futuristic geometric shapes - Mobile: maintained intensity with optimized glows

Design a furniture store with Scandinavian simplicity: - Off-white background (bg-stone-50) - Muted Nordic palette (cool grays, soft blues, warm beiges) - Light wood texture accents - Abundant whitespace (py-24, gap-16) - Clean sans-serif typography (Inter or similar) - Minimal borders and shadows - Product photography with white backgrounds - Simple, functional navigation - Restrained hover effects - Mobile: maintained simplicity and breathing room