Extends 00-shared/04 with module components. Every widget → token → Flutter mapping.
| Screen | Primary widgets | M3 roles |
|---|
| S1 list | AppListTile, AppSearchBar, FilterChip, FAB | surface, primary, secondaryContainer chips |
| S1 cards (tablet) | AppCard (e-1) | surfaceContainerLow |
| S2 profile | AppCard tonal, AppInfoRow, AppTabs, AppBadge | primaryContainer header, secondaryContainer status |
| S3 assignments | AppDropdown, AssignmentCard, AppEmptyState | surfaceContainerLow, outline |
| S4 schedule | grid cards, AppSectionHeader | surfaceContainerLow, e-1 |
| S5/S6 forms | TextFormField (filled), AppDropdown, FilterChip multi, AppDatePicker, FilledButton | fill surfaceVariant, focus primary, error error |
| S7 editor | AppBottomSheet + pickers, FilledButton | surfaceContainerHigh, e-5 |
| S8 deactivate | AlertDialog, destructive FilledButton | surfaceContainerHigh, error/onError |
| S9/S10 self | AppStatTile, AppBanner, grid | secondaryContainer banner |
| EmploymentStatus | Token pair | Rationale |
|---|
active | successContainer/onSuccessContainer | success role (02 §1.1) |
inactive | surfaceVariant/onSurfaceVariant | neutral |
on_leave | warningContainer/onWarningContainer | warning role |
terminated | errorContainer/onErrorContainer | error role |
Always paired with icon + label (09 §9 color-blind rule).
| Use | Token | Widget |
|---|
| Screen title | headlineMedium | S1 AppBar |
| Teacher name (header) | titleLarge | S2 |
| Row titles / card titles | titleMedium | S1 rows, S3 cards |
| Employee number | mono (FontFeature.tabularFigures, 02 §2) | S1 subtitle, S2 |
| Metadata / timestamps | bodySmall | S2, S6 |
| Buttons, chips, tabs | labelLarge | everywhere |
| Status text | labelMedium | StatusChip |
| Token | Value | Use |
|---|
| Screen padding | 16 / 24 (tablet+) (04 §6) | all screens |
| Card padding | 16 | S2 header, S3 cards |
| Section gap | 24 | S2 sections |
| Field gap | 16 | S5/S6 forms |
| List row | 56 | S1 |
| Tab bar | standard M3 | S2 |
| Dialog corner | r-lg 12 | S8 |
| Sheet corner | r-xl 16 top | S7 |
| Component | Token |
|---|
| List rows / flat cards | e-0 / e-1 |
| S2 header card | e-1 |
| FAB | e-3 |
| S8 dialog | e-4 |
| S7 sheet | e-5 |
| Icon | Use |
|---|
person_add | FAB "Add teacher" |
groups | list empty state |
menu_book | assignments empty state |
edit, person_off | row menu |
delete | deactivate |
check_circle / pause_circle / beach_access / person_off | StatusChip states |
filter_list | filter chips toggle |
search | search |
All icons have tooltip or Semantics.label (09 §7).
- Status colors ONLY via
StatusChip (single source of truth).
- Employee numbers always
mono — consistent identity scanning.
- Destructive actions always
error token — never custom red.
- Assignment "added" confirmation =
secondaryContainer banner; duplicates = errorContainer.