# Colorful

> Vibrant rainbow palette with playful gradients and energetic feel

- Skill: `jdsadminllc/colorful` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/colorful`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/colorful/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jdsadminllc (https://skillmd.com/u/jdsadminllc)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jdsadminllc/colorful

---

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