Foundations, semantic tokens, reusable components, and child-friendly navigation. One deliberate style across Welcome, Parent Area, My City, Playground, and Library.
Navy surfaces, legible text, 02C gradient Primary, violet/pink accents. Functional text is never baked into illustration assets.
Inter → system fallbacks. 8px spacing scale, 4px only for micro-adjustments; 12px captions are supplementary rather than essential action text.
One approved 02C Get Started gradient Primary per standard decision area; a protected multicolor Signature CTA for 06B Handoff only; secondary / tertiary and all interaction states.
The primary demo button shows a non-transactional confirmation; its visual state resets. Never use a disabled button to conceal missing form requirements.
Input labels, persistent help/error text, focus and disabled states. A parent can choose the free path without entering an email.
Filter chips / selections
Follow a short lesson, draw on paper, then capture your creation.
Your creations will appear here after you take a photo and save them.
| Dimension | Product rule | Implementation note |
|---|---|---|
| Tap targets | Target ≥56px preview | Verify ≥44pt on iPadOS; ≥48dp on Android in native UI. |
| Colour contrast | WCAG AA minimum, 4.5:1 regular text, 3:1 large text and UI boundaries | Evaluate against actual photo/scrim pixels, not only canvas token. |
| Motion | Brief, purposeful and cancellable | Honor Reduce Motion and Pause; never gate an action behind animation. |
| Child safety | No pricing or checkout in child paths | Adult gate before account/payment; don't make therapeutic claims. |
| Data claims | Free sample is real prototype content, not final catalog | Prices, unlock counts and purchase states are proposal only. |