jdsadminllc 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)