# Design System v1 · Child Screen Pilot (07B, 13B, 14B)

**Branch:** `feature/design-system-pilot-child-screens`, based on `feature/design-system-v1`. **Status: review candidate, not visual/device approved.**

This is the first controlled migration from the [INOOWA Design System v1](../README.md) into existing, user-reviewed child screens. It is deliberately limited to **07B Dashboard**, **13B Playground**, and **14B Library**. All approved art, actual photo saving, creative prompts, world cards, routes and official Owii remain unchanged.

## What changed

| Contract | 07B Dashboard | 13B Playground | 14B Library |
|---|---|---|---|
| Shared child rail | 144px + six original 3D WebP icons | Same | Same |
| Page gutters | 32px | 32px | 32px |
| Main CTA | 02C cyan → blue → lavender gradient, dark label, 56px min | Same | Same |
| Secondary CTA | Navy surface, white label, 48px in compact cards | 56px in hero | Library filters use selected interactive surface |
| Page typography | 32px greeting, 24px section heading | 40px page heading, 24px section heading | 40px page heading |
| Search | 56px height, semantic surface/border/focus | Same | Same |
| Cards | Canonical 24px radius | Same | Same |
| Motion & focus | 120/200ms token, reduce-motion support, cyan focus ring | Same | Same |

**Source of truth:** `design-system/tokens/tokens.json`, generated `design-system/tokens/tokens.css`.

**Compatibility:** Existing CSS and old button markup are preserved. A single [pilot adapter](child-screens.css) maps the existing class names to shared design tokens and UI Kit states. This is an intermediate layer; later component refactoring can replace legacy names with reusable React Native components. Avoid adding yet another screen-specific button theme.

## Navigation + intentional exception

This pilot migrates the persistent rail to **144px** on the three chosen screens only. Other active/legacy pages using the rail still have **138px** until their own migration. This small temporary difference is explicit, not a hidden product-wide rollout; apply the rail standard across the rest of the child flow after first acceptance.

The six approved assets already committed in `assets/navigation/` are reused directly; files are not copied/re-rendered. The protected Parent Area action stays behind `parent-gate`.

Focused drawing/capture/placement screens deliberately retain contextual Back/Close instead of receiving a sidebar.

## Explicit non-changes

- Splash, current Welcome 02B and alternative 02C are not redesigned.
- Parent Setup 03B, Verify 04B, Membership 05C are not restyled here.
- 07B still uses first-visit help vs actual returning progress; three large worlds remain visible with All Worlds access to the full prototype catalogue.
- 13B still suggests blank-paper, open-ended drawing questions, never a completed example to trace.
- 14B still keeps real drawings separate from clearly labeled sample previews and IndexedDB local save path.
- No StoreKit, cloud account, AI evaluation, premium unlock, or real customer data is introduced.

## How to review locally

```bash
git fetch origin
git switch feature/design-system-pilot-child-screens
git pull --ff-only origin feature/design-system-pilot-child-screens
python3 -m http.server 8000
```

Routes:
- `http://localhost:8000/index.html#dashboard-v2`
- `http://localhost:8000/index.html#playground-v2`
- `http://localhost:8000/index.html#library-v2`

Hard refresh: Cmd + Shift + R. To compare the previous look, switch to the base `feature/design-system-v1` branch and refresh. The comparison keeps the same underlying imagery/JS.

## Checks

```bash
npm run ds:check
npm run ds:pilot:check
npm run ds:pilot:test
```

`ds:pilot:test` needs a running HTTP server and local Playwright Chromium; it produces screenshots in `artifacts/design-system/pilot/` and checks nav geometry, actual 3D assets, primary action colors, focus/selected-state and current-route navigation. **The GitHub connector can check source but cannot substitute for rendering these screens in the user's iPad/Safari.** Do not mark this PR approved until the three screenshot comparisons are reviewed.

## Acceptance criteria

1. Header, hero, primary action, and cards remain legible and well-spaced at 1366×1024.
2. No clipping in Dashboard's 161px illustration cards after 48px compact secondary buttons.
3. All six 3D icons display on the same 144px rail on all three screens, with consistent labels and active states.
4. 02C gradient Primary buttons use dark `#08284B` text; do not use white text on light cyan/lavender.
5. Playground open-ended idea selection and Library local photo save flow still work.
6. Native iPadOS minimum 44pt and Android minimum 48dp touch targets are validated separately.
7. Smaller landscape, longer localized copy, reduced motion and screen reader navigation are checked before merge.

**Next proposed phase after approval:** Bring Learn/Worlds and supporting routes onto the same rail without changing actual drawings or monetization choices.