---

name: colorful description: Vibrant rainbow palette with playful gradients and energetic feel

Colorful

Mission

Maximum visual energy through bold color combinations, fluid gradients, and an unapologetically playful spirit.

Brand

🎨 Colors

• #FF6B6B — Primary (warm coral red)
• #4ECDC4 — Secondary (teal)
• #FFE66D — Accent (sunny yellow)
• #A78BFA — Accent (soft violet)
• #FF85A1 — Accent (hot pink)
• #1A1A2E — Dark background (for light text)

🔤 Typography

• Heading font: Fredoka One (Google Fonts)
• Body font: Nunito (Google Fonts)
• Type scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.25rem / xl 1.75rem / 2xl 2.25rem / 3xl 3rem

📐 Spacing

• Grid: 12-column, fluid gaps using clamp(1rem, 2vw, 2rem)
• Section padding: 5rem top/bottom
• Card gap: 2rem

🧩 Components

• Buttons: Full-rounded (999px), bright gradient fill, white text, scale-transform on hover to 1.05
• Cards: White or light backgrounds, multi-color top border (3px gradient stripe), soft shadow
• Nav: Sticky, translucent with backdrop-blur, colorful logo, pill-shaped nav items
• Hero: Large playful heading, animated gradient background, floating decorative shapes
• Footer: Split into colorful columns, large CTA button, confetti-like background pattern

♿ Accessibility

• All gradient-over-text must pass 4.5:1 contrast at every gradient point
• Focus rings: 3px dashed outline in accent color
• Reduced motion: disable all floating/confetti/scale animations
• Minimum font size 0.75rem

✍️ Writing Tone

• Cheerful, energetic, and encouraging — use exclamation marks freely
• Short, punchy sentences; emoji-friendly (🎨 ✨ 🚀)
• Labels use friendly language: "Let's go!" not "Submit"

Do / Don't

✅ Do

• Use gradients liberally — backgrounds, borders, buttons, text
• Mix bright colors boldly; high saturation is the point
• Add playful micro-interactions: bounces, wiggles, spins on hover
• Layer decorative shapes (circles, squiggles, stars) behind content
• Use animated gradient backgrounds for hero and CTA sections

❌ Don't

• Use muted or desaturated colors — if it's not vibrant, it's wrong
• Stick to a single accent color — this style demands 3+
• Use rigid grid layouts — organic, flowing layouts work better
• Let interactions feel static — everything should respond playfully
• Mix in corporate or formal elements — stay irreverent

Quality Gates

• At least 4 distinct accent colors used across the page
• All gradient-text combinations pass contrast check
• Animations disabled or reduced under prefers-reduced-motion
• No font smaller than 0.75rem
• All interactive elements have hover animations
• Page feels energetic without being overwhelming (no more than 2 animations visible at once)