Playful
Mission
Build interfaces that spark delight — every scroll bounces, every button wants to be pressed, and formality is left at the door.
Brand
Colors
#FFF9E6 — Background (warm sunshine)#FF6B6B — Primary (coral pop)#4ECDC4 — Secondary (teal bounce)#FFE66D — Accent (sunny yellow)#A18CD1 — Surface (soft purple)#2D3436 — Text (warm charcoal)
Typography
- Headings: Fredoka One (rounded, bouncy display)
- Body: Nunito (rounded sans-serif, warm)
- Scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.25rem / xl 1.5rem / 2xl 2rem / 3xl 2.5rem
Spacing
- 8px grid, but elements can break alignment for playful effect
- Section padding: 5rem vertical, 2rem horizontal
- Card gaps: 2rem
- Max content width: 65rem
Components
- Buttons: Fully rounded (50px), bouncy hover (scale 1.05 with cubic-bezier bounce), colorful fill, subtle shadow
- Cards: Rounded (20px), tilted slightly (-1deg to +1deg random at load), colorful top border, hover lifts and straightens
- Nav: Sticky, colorful bg, rounded pill-shaped links, logo with bounce animation
- Hero: Large playful illustration or emoji-scale typography, wavy divider, upbeat CTA
- Footer: Wavy top divider, colorful bg, social links as large rounded icons
Accessibility
- Contrast ratio >= 4.5:1 for body text (verify colorful combinations)
- Focus ring: 3px dashed #FF6B6B with 3px offset, fully rounded
- Reduced motion: disable all bounce, wobble, and scale animations
- Minimum font size: 0.875rem
- Fun display fonts only for headings >= 1.5rem
Writing Tone
Enthusiastic, casual, inviting. Emojis encouraged. Contractions everywhere. "Hey!" and "Wahoo!" energy. Never serious, never sarcastic.
Do / Don't
Do
- Use CSS keyframes with bounce steps (0%-50%-80%-100%) for elastic effects
- Rotate cards slightly with CSS transform:rotate(-1deg) for hand-made feel
- Add micro-interactions to every interactive element (hover, focus, active)
- Use wavy SVG or border-radius dividers between sections
- Make CTA buttons large, colorful, and impossible to miss
Don't
- Use sharp corners — minimum radius 12px everywhere
- Use dark mode (playfulness lives in light)
- Animate with linear timing functions — always use ease-out or cubic-bezier
- Use gray or muted hues — every color should feel saturated
- Make any interaction feel like a chore — forms, checkouts, and errors should still spark joy
Quality Gates
1---2name: playful3description: Bouncy animations, rounded everything, toy-like joy, and unapologetic fun.4---5# Playful6## Mission7Build interfaces that spark delight — every scroll bounces, every button wants to be pressed, and formality is left at the door.8## Brand9### Colors10- `#FFF9E6` — Background (warm sunshine)11- `#FF6B6B` — Primary (coral pop)12- `#4ECDC4` — Secondary (teal bounce)13- `#FFE66D` — Accent (sunny yellow)14- `#A18CD1` — Surface (soft purple)15- `#2D3436` — Text (warm charcoal)16### Typography17- Headings: **Fredoka One** (rounded, bouncy display)18- Body: **Nunito** (rounded sans-serif, warm)19- Scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.25rem / xl 1.5rem / 2xl 2rem / 3xl 2.5rem20### Spacing21- 8px grid, but elements can break alignment for playful effect22- Section padding: 5rem vertical, 2rem horizontal23- Card gaps: 2rem24- Max content width: 65rem25### Components26- **Buttons**: Fully rounded (50px), bouncy hover (scale 1.05 with cubic-bezier bounce), colorful fill, subtle shadow27- **Cards**: Rounded (20px), tilted slightly (-1deg to +1deg random at load), colorful top border, hover lifts and straightens28- **Nav**: Sticky, colorful bg, rounded pill-shaped links, logo with bounce animation29- **Hero**: Large playful illustration or emoji-scale typography, wavy divider, upbeat CTA30- **Footer**: Wavy top divider, colorful bg, social links as large rounded icons31### Accessibility32- Contrast ratio >= 4.5:1 for body text (verify colorful combinations)33- Focus ring: 3px dashed #FF6B6B with 3px offset, fully rounded34- Reduced motion: disable all bounce, wobble, and scale animations35- Minimum font size: 0.875rem36- Fun display fonts only for headings >= 1.5rem37### Writing Tone38Enthusiastic, casual, inviting. Emojis encouraged. Contractions everywhere. "Hey!" and "Wahoo!" energy. Never serious, never sarcastic.39## Do / Don't40### Do41- Use CSS keyframes with bounce steps (0%-50%-80%-100%) for elastic effects42- Rotate cards slightly with CSS transform:rotate(-1deg) for hand-made feel43- Add micro-interactions to every interactive element (hover, focus, active)44- Use wavy SVG or border-radius dividers between sections45- Make CTA buttons large, colorful, and impossible to miss46### Don't47- Use sharp corners — minimum radius 12px everywhere48- Use dark mode (playfulness lives in light)49- Animate with linear timing functions — always use ease-out or cubic-bezier50- Use gray or muted hues — every color should feel saturated51- Make any interaction feel like a chore — forms, checkouts, and errors should still spark joy52## Quality Gates53- [ ] All interactive elements have hover and focus animations54- [ ] At least 3 @keyframes animations defined55- [ ] No sharp corners — every component has border-radius56- [ ] No gray/muted colors in palette — all colors are saturated57- [ ] Focus states are visible, dashed, and fully rounded58- [ ] Page works at 320px with bouncing animations simplified
jdsadminllc