# Figma Sandbox — Index

Source file: `v77XDN80b9rOZoI1GiXTun` (Dopple design system)

## Sitemap & Routes

| Route | File | Figma node | User goal |
|-------|------|------------|-----------|
| `/mocks/homepage` | `public/mocks/homepage.html` | `2699:143` Homepage | Choose role → scroll to funnel section |
| `/mocks/family/landing` | `public/mocks/family/landing.html` | `2649:94` / `2665:102` Landing (pilot intro) | New-user parents entry; signed-in → dashboard |
| `/mocks/family/auth` | `public/mocks/family/auth.html` | `2396:1740` Sign in/Sign up | Auth into registry |
| `/mocks/family/cart` | `public/mocks/family/cart.html` | `2451:128` Cart/wishlist | Review & checkout gifts |
| `/mocks/family/dashboard` | `public/mocks/family/dashboard.html` | `2790:1513` / `2544:86` Dashboard | Signed-in family dashboard |
| `/mocks/family/budget` | `public/mocks/family/budget.html` | `2689:1419` Calculator | Estimate family costs |
| `/mocks/donors` | `public/mocks/donors/index.html` | `2476:1966` Auth | Donor signup/login |
| `/mocks/donors/criteria` | `public/mocks/donors/criteria.html` | `2482:534` Criteria | Set allocation preferences |
| `/mocks/donors/dashboard` | `public/mocks/donors/dashboard.html` | `2486:1420` Impact | View donor impact |
| `/mocks/providers` | `public/mocks/providers/index.html` | — | Service provider entry |
| `/mocks/investors` | `public/mocks/investors/index.html` | — | Investor entry |

## Flow Paths

```
/mocks/homepage
├── Role cards → in-page funnel anchors (#funnel-*)
│   ├── Parents → #funnel-parents → /mocks/family/landing
│   ├── Donor → #funnel-donors → /mocks/donors
│   ├── Service Providers → #funnel-providers → /mocks/providers
│   └── Investors → #funnel-investors → /mocks/investors
└── Budget CTA → /mocks/family/budget

/mocks/family/landing → (signed in?) → /mocks/family/dashboard
/mocks/family/landing → /mocks/family/auth → /mocks/family/dashboard ↔ /mocks/family/cart
/mocks/family/budget → /mocks/family/auth, /mocks/family/landing
/mocks/donors → /mocks/donors/criteria → /mocks/donors/dashboard
```

## Sandbox Map Drawer

Persistent **Sandbox map** button (right-middle, fixed) opens a right-side drawer on all sandbox pages via `public/assets/sandbox-drawer.js`. The drawer lists pages grouped by flow:

- **Homepage** — role selector
- **Parents** — landing (pilot intro), auth, dashboard, cart, budget
- **Donors** — auth, criteria, impact dashboard
- **Service Providers** — partner landing
- **Investors** — invest landing

**Cheats:** Reset session (clears `localStorage`/`sessionStorage`, returns to homepage).

## Shared Tokens (`public/assets/dopple-theme.css`)

- **Colors:** `--dopple-green` (#355f48), `--dopple-gold` (#c69d48), `--dopple-surface` (#f9fafb)
- **Components:** `.btn-pill`, `.btn-primary`, `.btn-gold`, `.sandbox-drawer`, `.sandbox-feature-split`, `.sandbox-funnel-section`, `.dashboard-card`, `.sandbox-auth-page`
- **Layout:** `.page-shell` (max 1440px), `.sandbox-home-hero`, `.sandbox-parents-header`

## Hub Wiring

- **M1 GTM Prep** primary card → `/mocks/homepage`
- **M4 Donor Portal** → `/mocks/donors`
- Archived/proposal mocks stay separate from the Figma sandbox

## QA Checklist

- [ ] No `#preview-chrome` or tab nav on sandbox pages
- [ ] Homepage role cards scroll to funnel anchors (`#funnel-*`)
- [ ] Sandbox map drawer opens/closes on all sandbox pages
- [ ] Each funnel section has one primary start-flow CTA
- [ ] Donor flow: auth → criteria → dashboard (page links, not tabs)
- [ ] Parent flow: landing → auth → dashboard → cart
- [ ] All grouped `/mocks/family/*` paths resolve
- [ ] Hub quick links point to `/mocks/homepage` and `/mocks/donors`

## Page Specs

- [homepage.md](./homepage.md)
- [donors.md](./donors.md)
- [parents.md](./parents.md)
- [registry-flow.md](./registry-flow.md)
- [cart-checkout.md](./cart-checkout.md)
- [dashboard.md](./dashboard.md)
- [family-budget.md](./family-budget.md)