# Playful

> Bouncy animations, rounded everything, toy-like joy, and unapologetic fun.

- Skill: `jdsadminllc/playful` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/playful`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/playful/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/playful

---

# 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
- [ ] All interactive elements have hover and focus animations
- [ ] At least 3 @keyframes animations defined
- [ ] No sharp corners — every component has border-radius
- [ ] No gray/muted colors in palette — all colors are saturated
- [ ] Focus states are visible, dashed, and fully rounded
- [ ] Page works at 320px with bouncing animations simplified