<!-- SPDX-License-Identifier: MIT -->
<!-- SPDX-FileCopyrightText: 2025-2026 Marcus Quinn -->

# Design System: Playful Vibrant — Do's and Don'ts

## Do's

1. **Do** use large border-radii consistently — 16px for interactive elements, 20px for cards
2. **Do** use the gradient primary (`#6366f1` → `#8b5cf6`) for hero CTAs and feature highlights
3. **Do** add micro-interactions: scale on hover, spring easing, success celebrations (confetti, checkmarks)
4. **Do** use coloured surface tints (`#eef2ff`, `#fff1f2`) to create visual sections without harsh borders
5. **Do** keep headings bold (700+) — the playful aesthetic needs confident typography
6. **Do** use the extended palette (amber, emerald, cyan, purple) for categories, tags, and status indicators
7. **Do** ensure every interactive element has visible, generous focus states (3px+ outline)
8. **Do** use illustration and iconography as first-class design elements

## Don'ts

1. **Don't** use sharp corners (0–4px radius) — they break the soft, approachable feel
2. **Don't** combine more than three palette colours in a single component
3. **Don't** use thin font weights (<400) for any visible text — the system needs visual weight
4. **Don't** use flat, borderless cards — always provide shadow or colour differentiation
5. **Don't** animate too many elements simultaneously — limit to one animation focal point per viewport
6. **Don't** use dark backgrounds as the default — this is a light-mode-first system
7. **Don't** skip success/celebration feedback — completing a task should feel rewarding
8. **Don't** use indigo (#6366f1) for body text on white — insufficient contrast (use #1e1b4b instead)
9. **Don't** place rose (#f43f5e) text on coloured backgrounds without verifying contrast
10. **Don't** overuse gradients — reserve them for primary CTAs and hero elements only
