11 — Design System Mapping (Organizations Module)
- 1. Module component → M3/Flutter/tokens
- 2. Screen-level mapping (tokens)
- 3. Typography mapping (per element)
- 4. Spacing (4 dp grid, 00-shared/02 §3)
- 5. Color roles in module
- 6. Iconography
- 7. Motion mapping (module)
- 8. Layout tokens
- 9. Theming rules (enforced, D §7)
Module extension of 00-shared/04. Maps module components + screens to M3, tokens, spacing, type, elevation, radius, color, icon, motion.
1. Module component → M3/Flutter/tokens
| Component | M3 role | Flutter | Tokens (02) | Elevation | Radius |
|---|---|---|---|---|---|
| OrgHeader | Card | Card + Row | surface, onSurface | e-1 | r-lg 12 |
| StatusBadge | Badge/Chip | Badge/Chip | primaryContainer/tertiary/error + icon | e-0 | r-full |
| SettingFieldGroup | Grouped field | Column + AnimatedSwitcher | surfaceContainerLow, outlineVariant | e-0 | r-md 8 |
| ColorPickerField | Input + swatches | TextField + Wrap | surfaceVariant fill, outline border, primary focus | e-1 | r-md |
| DayChips | Filter chip | FilterChip | selected secondaryContainer / idle surfaceVariant | e-0 | r-sm 4 |
| FlagSwitchRow | List row | ListTile + Switch | surface, onSurfaceVariant trailing | e-0 | — |
| TenantRow | List row | ListTile 72 + MenuAnchor | surface, primary selected | e-0 | r-md |
| SlugPreview | Inline action | TextButton + Text | primary, mono | e-0 | — |
| OrgSettingsForm | Tabbed form | TabBar + TabBarView | indicator primary | — | — |
2. Screen-level mapping (tokens)
| Screen | Background | Cards | Primary CTA | Icons (Material Symbols outlined) |
|---|---|---|---|---|
| S1 Overview | surface | AppCard flat surfaceContainerLow | toolbar Edit IconButton | edit, palette, settings, flag, group, chevron_right |
| S2 Edit | surface | field groups surfaceContainerLow | FilledButton "Save changes" | arrow_back, schedule, calendar_month |
| S3 Branding | surface | preview AppCard e-2 | FilledButton "Save branding" | palette, upload_file, contrast |
| S4 Settings | surface | per-tab forms | FilledButton "Save all" | event_busy (attendance), school, format_paint |
| S5 Flags | surface | grouped rows | switches only | flag, expand_more, delete |
| S6 Members | surface | rows + invite page | FAB AppFAB.extended | person_add, more_vert |
| S7 Tenants | surface | TenantRow | (none; row menus) | search, filter_list, more_vert, business |
| S8 Detail/Create | surface | S1 cards + status card | "Create tenant"/"Save" | arrow_back, edit, block, delete, rocket_launch |
3. Typography mapping (per element)
| Element | Token | Widget |
|---|---|---|
| Screen titles | headlineMedium 28/400/36 | S1/S8 titles |
| Card/section headers | titleMedium 16/500/24 | AppSectionHeader |
| List row titles | titleMedium | TenantRow, member rows |
| Slug/domain/ids | mono 14/400/20 | slug chips, slug fields |
| Labels/helper | bodyMedium 14/400/20 | form labels, chip labels |
| Timestamps/captions | bodySmall 12/400/16 | "Created 2026-08-01" |
| Badges | labelMedium 12/500/16 | StatusBadge |
| Buttons/tabs | labelLarge 14/500/20 | CTAs, tabs |
| Empty state | displaySmall 36/400/44 | S5/S7 empty states |
4. Spacing (4 dp grid, 00-shared/02 §3)
Screen padding 16 (phone) / 24 (tablet+); card padding 16; card gap 12; section gap 24; form field gap 16; list rows ≥56 (S7 rows 72); toolbar 64; FAB 56.
5. Color roles in module
| Role | Usage |
|---|---|
primary | CTAs, focus, selected tab, links, selected nav |
secondary | success snackbars, "use this slug" |
tertiary | onboarding banner, warnings (working-day warnings) |
error | destructive (delete), validation, error states |
primaryContainer | active status badge, primaryContainer tonal CTA |
surfaceVariant | input fills, idle chips |
Tenant branding override: org branding.primaryColor/settings.theme.primaryColor → ColorScheme.fromSeed re-derivation (D §7.5); live preview in S3 (proposed wiring). |
6. Iconography
Material Symbols outlined 24 dp default; status icons filled (check_circle, pause_circle, block, rocket_launch); empty-state icons 32–40; every icon has tooltip + Semantics.label (D §4, A §7).
7. Motion mapping (module)
Page transition m-base (FadeUpwards Android / Cupertino iOS — D §5); dialog/sheet m-base; hero m-slow; ripple m-fast; stagger m-entrance; skeleton shimmer m-slow loop (reduced-motion static); snackbar m-base.
8. Layout tokens
Master-detail breakpoint 840 dp (S7↔S8); 2-col info grid ≥600 dp (S1); form max-width 720 on desktop (S2/S4); preview column ≥840 dp (S3).
9. Theming rules (enforced, D §7)
- No literal colors — tokens only.
- No literal spacing/durations —
AppSpacing/AppMotion. - Dark mode first-class:
surface#141414, cardssurfaceContainerLow#1D1B1B, parity QA per 10_QA_Baseline.md §6. - Branding override only touches
primaryseed; rest derives algorithmically (02 §1).