Parents module → Material 3 / Flutter / token mapping, extending 00-shared/04.
Every color, type, spacing, elevation, radius, icon, motion reference traces to
00-shared/02_Design_Tokens.md.
| Screens | Theme | Exception |
|---|
| Admin workspace (list/detail/forms) | standard shell | primary accent for FAB + primary-guardian badge |
| Link sheet / unlink dialog | modal (surfaceContainerHigh) | warning states warning/error containers |
Parent self-service (my children/profile) (forward-looking) | standard shell | switcher selected state primaryContainer |
| Flags & badges | icon+label always (09 §9) | never color-only |
| Component | M3 / Flutter | Tokens | Elev | Radius |
|---|
| Parents list rows | ListTile | surface, onSurface/onSurfaceVariant | e-0 | r-md |
| Parent header card | AppCard | surfaceContainerLow | e-1 | r-lg |
| LinkedChildCard | AppCard | surfaceContainerLow | e-1 | r-lg |
| Primary badge | custom Badge | primaryContainer/onPrimaryContainer | — | r-sm |
| Relationship chip | Chip (disabled) | surfaceVariant/onSurfaceVariant | — | r-sm |
| FAB "Add guardian" | FloatingActionButton.extended | primaryContainer, icon primary | e-3 | r-full |
| Form fields | TextFormField | fill surfaceVariant, border outline, focus primary | — | r-md |
| Switches (pickup/primary) | SwitchListTile | primary selected | — | — |
| Link sheet | AppBottomSheet | surfaceContainerHigh | e-5 | r-xl top |
| Unlink dialog | AppDialog | surfaceContainerHigh; destructive CTA error | e-4 | r-lg |
| Warning banners | AppBanner | tertiaryContainer (duplicate/primary) | e-1 | — |
| Snackbar | SnackBar | inverseSurface | e-5 | r-md |
| Offline banner | AppOfflineBanner | tertiaryContainer | e-1 | — |
| Child switcher chips | FilterChip-style | selected primaryContainer, else surfaceVariant | — | r-full |
| Token | Screen element |
|---|
headlineMedium | screen titles (Guardians, My children) |
titleLarge | header card names, dialog titles |
titleMedium | list titles, section headers, child names |
bodyMedium | labels, meta lines |
bodySmall | flags line, timestamps, hint "end of list" |
labelLarge | buttons, tabs |
labelMedium | badges, chips |
mono | admission numbers, IDs |
Numerals (priority, income, counts) use FontFeature.tabularFigures() (02 §2).
Material Symbols outlined; module map: groups (empty list), person_add (FAB),
family_restroom, elderly, female, male, verified_user, home_work
(relationship icons), star (primary badge), directions_walk (pickup), payments
(financial), priority_high (emergency), link/link_off (link/unlink),
swap_horiz (switch primary), search (pickers), edit (edit).
| Purpose | Token | Applied to |
|---|
| Route transitions | m-base | list↔detail, forms |
| Hero avatar | m-slow | list→detail |
| Sheet/dialog | m-base | link sheet, unlink dialog |
| Row removal (unlink) | m-base fade | children list |
| Warning expand | m-base AnimatedSize | duplicate/primary banners |
| Switcher fade | m-fast | child switch |
| Badge pop | m-fast | children-count change |
| Skeleton→content | m-slow cross-fade | all loads |
Rules: reduced-motion substitutes fades/instants (08 §4).
- All text ≥ 4.5:1; interactive chrome ≥ 3:1; focus ring
primary 3:1 vs adjacent.
- Dark: chromatic roles TBD by designer (00-shared/02 §1.4).
- Flags (pickup/financial/priority) always icon + label — colorblind-safe (09 §9).
- Warning banners readable in both modes (
tertiaryContainer/onTertiaryContainer).
| Class | Admin workspace | Parent self-service |
|---|
| phone <600 | single column; sheets full-height on keyboard | switcher + single child |
| 600–839 | list + detail panes (2-column) | switcher + detail |
| ≥1200 | master-detail 320–360 dp list; hover + keyboard shortcuts | centered child dashboard ≤ 720 dp |
- No literal colors —
context.colorScheme.* only (00-shared/04 §7).
- No literal spacing/durations.
- Tenant branding override affects
primary only (badge/CTA adapt automatically).