DESIGN.md@.agents/tools/design/library/styles/playful-vibrant git:20260403.ee8f3efA

Immutable. This exact content is served forever at /api/v1/blob/f1a58faf0e41dcc2.

# Design System: Playful Vibrant

Energetic, joyful design system for children's education apps, gaming platforms, social communities, and creative tools. Bold indigo primary (`#6366f1`), rose accent (`#f43f5e`), rounded shapes (16–20px radii), bouncy spring animations.

## Chapters

| File | Contents |
|------|----------|
| [01-overview.md](01-overview.md) | Visual theme, atmosphere, key characteristics |
| [02-colour-palette.md](02-colour-palette.md) | Primary, accent, extended palette, text, surface colours, CSS variables |
| [03-typography.md](03-typography.md) | Font families, type hierarchy, principles, mobile adjustments |
| [04-components.md](04-components.md) | Buttons, inputs, links, cards, navigation, badges & tags |
| [05-layout.md](05-layout.md) | Spacing scale, grid, container widths, whitespace, border-radius scale |
| [06-depth-elevation.md](06-depth-elevation.md) | Elevation scale, coloured shadows, elevation principles |
| [07-dos-and-donts.md](07-dos-and-donts.md) | Design rules — what to do and avoid |
| [08-responsive.md](08-responsive.md) | Breakpoints, touch targets, mobile-specific rules |
| [09-agent-prompts.md](09-agent-prompts.md) | Ready-to-use prompts for education, social, and gamified UIs |

## Quick Reference

**Colours:** Primary `#6366f1` · Accent `#f43f5e` · Background `#FAFAFA` · Heading text `#1e1b4b`

**Shapes:** Buttons/inputs `border-radius: 16px` · Cards `border-radius: 20px` · Pills `border-radius: 9999px`

**Animation:** Spring easing `cubic-bezier(0.34, 1.56, 0.64, 1)` · Transition `200ms`

**Typography:** Nunito (rounded sans-serif) · Headings weight 700 · Display weight 800

<!--
Style archetype by AI DevOps (https://aidevops.sh)
DESIGN.md format: https://stitch.withgoogle.com/docs/design-md/overview
Not based on any specific brand. Use as a starting point for your project.
-->