11 — Design System Mapping (Feature Flags Module)

1. Theme recipes (module)
2. Widget → token
3. Typography mapping
4. Iconography
5. Motion tokens (values 00-shared/02 §6)
6. Contrast & dark parity
7. Breakpoint behaviour
8. Component mapping to shared library

Module → Material 3 / Flutter / token mapping, extending 00-shared/04. Every color, type, spacing, elevation, radius, icon, motion reference traces to 00-shared/02.

1. Theme recipes (module)

Screens	Theme	Exception
Flags list / detail / editor	standard shell `surface`	enabled switches `primary`; selected rows `primaryContainer`; danger `error`
Bulk sheet	`surfaceContainerHigh`	apply CTA `primary`; per-row failure `errorContainer`
Editor warning banner	`tertiaryContainer` (advisory, not error)	description/module-not-saved caveat
Affected-features card `(proposed)`	`surfaceContainerLow`	"hidden when off" badges `outline`

Component	M3 / Flutter	Tokens	Elev	Radius
Flag row	`AppListTile`	`surface`, switch `primary`	`e-0`	—
Flag row (selected)	`ListTile` tinted	`primaryContainer`/`onPrimaryContainer`	`e-0`	—
Key chip	`Material` chip	`surfaceVariant` fill, `mono` text	—	`r-sm`
Module badge	`Badge`/`AppBadge`	`secondaryContainer`	—	`r-full`
Enabled-only filter	`FilterChip`	selected `secondaryContainer`	—	`r-sm`
Detail card	`AppCard`	`surfaceContainerLow`	`e-1`	`r-lg`
Editor fields	`TextFormField`	fill `surfaceVariant`, focus `primary`	—	`r-md`
Save CTA	`FilledButton`	`primary`/`onPrimary`	—	`r-md`
Delete	`TextButton` destructive	`error`	—	—
Warning banner	`AppBanner`	`tertiaryContainer`	`e-1`	`r-md`
Bulk sheet	`AppBottomSheet`	`surfaceContainerHigh`	`e-5`	`r-xl`
Bulk progress	`LinearProgressIndicator`	`primary`	—	—
Dialog (delete)	`AppDialog`	`surfaceContainerHigh`	`e-4`	`r-lg`
FAB New flag	`FloatingActionButton.extended`	`primaryContainer`	`e-3`	`r-full`
Snackbar	`SnackBar`	`inverseSurface`	`e-5`	`r-md`
Switch (disabled-perm)	`Switch`	`onSurfaceVariant` 38%	—	—

3. Typography mapping

Token	Screen element
`headlineMedium`	screen titles
`titleMedium`	list rows, section headers (module groups)
`bodyMedium`	label/description values
`bodySmall`	created/updated timestamps, bulk result notes
`labelLarge`	buttons, segmented button
`labelMedium`	badge counts, "Saving…"
`mono`	flag `key`, key chip, bulk result keys

Timestamps use FontFeature.tabularFigures().

Material Symbols outlined: flag, toggle_on/toggle_off (row leading), tune (filters), add (FAB), edit, delete, content_copy, check_circle/cancel (bulk results), apps/category (module badge), bolt (affected-features). Status icons (enabled/disabled) use the filled variant.

5. Motion tokens (values 00-shared/02 §6)

Purpose	Token	Applied to
Route transitions	`m-base`	list↔detail, editor push
Switch state	`m-fast`	all toggles
Filter/list cross-fade	`m-slow`	chip changes
Row insert/removal	`m-entrance` (40 ms stagger)	post-bulk/post-delete
Sheet	`m-base`	bulk sheet
Hero list→detail	`m-slow`	optional

Reduced-motion: fades + instants only.

6. Contrast & dark parity

Text 4.5:1; chrome 3:1 (09_Accessibility_Baseline.md §2).
Enabled/disabled is never color-only: switch + icon + label on every row; bulk results pair ✓/✕ with success/error + text reason (09 §9).
Dark: chromatic roles TBD by designer (00-shared/02 §1.4); key mono on surfaceVariant keeps ≥ 4.5:1.

7. Breakpoint behaviour

Class	List	Detail/Editor
phone < 600	single pane, filter chips scroll horizontally	push navigation
600–839	chips + list	centered editor ≤ 560 px
≥ 840	master-detail (list 360 px left)	right pane detail; editor dialog-ish page
≥ 1200	master-detail + hover	keyboard shortcuts active

8. Component mapping to shared library

All components from 00-shared/03 (see 05 §Shared components used); module-only additions (AppFlagRow, AppFlagKeyChip, AppFlagGroupHeader, AppFlagEditorForm, AppBulkUpdateSheet, AppAffectedMapCard, AppFlagToggleBanner) defined in 07_Component_Library.md with token references above.

Keyboard shortcuts

StudyLyon — Design Docs

5. Motion tokens (values 00-shared/02 §6)