Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

11 — Design System Mapping (Students Module)

Module-specific extensions to the shared mapping (00-shared/04). Tokens from 00-shared/02; theming rules enforced (00-shared/04 §7): no literal colors, spacing, or durations in widget code.

1. Module colour usage

UseLight tokenDark tokenComponent
Status active badgesecondary/secondaryContainersame rolesStatusBadge
Status graduated badgetertiary/tertiaryContainersameStatusBadge
Status archived badgeonSurfaceVariant on surfaceVariant + error iconsameStatusBadge
Destructive actions (delete/graduate/unlink)errorerrorAppButton.destructive, dialogs
Primary guardian badgeprimaryContainer/onPrimaryContainersameGuardianLinkCard
Active timeline nodeprimary (pulse)primaryAcademicHistoryTimeline
Import partial-failure bannertertiaryContainersameImportReportCard
Filter chip selectedsecondaryContainersameRosterFilterBar
Admission number / roll number / IDsmono type tokensamelist tiles, headers, forms
Warning banner (enrollment deactivation)tertiaryContainersametransfer/enroll forms

Status is never color-only — always icon + text (00-shared/09 §9).

2. Typography mapping (module)

TokenWhere
headlineMediumRoster screen title (AppBar titleLarge on detail), empty-state headlines
titleLargeDetail header student name, import report headline
titleMediumList tile names, timeline year/class, section headers
bodyMediumForm labels, info rows, banner bodies
bodySmallTimestamps, file sizes, result-count line, helper texts
labelLargeTab labels, buttons, chips
labelMediumBadges, relationship chips
monoADM-…, roll numbers, metadata JSON

Numerals (priorities, counts, capacities) use tabularFigures() (00-shared/02 §2).

3. Spacing & layout tokens (module)

TokenValueUse
Screen padding16 / 24 (tablet+)all module screens
Card padding16header, guardian, document tiles
Card gap12tab content stacks
Section gap24profile tab sections
List row height≥ 56 (roster 72 with avatar+meta)tiles
Form field gap16all forms
Wizard step gap24AppStepper
Master-detail list width320–400 dpdesktop ≥ 1200

4. Radius & elevation

TokenUse
r-lg 12header card, guardian card, import report card
r-md 8inputs, buttons, attachment tiles
r-fullavatars, status dot
e-0roster rows (flat)
e-1header card, cards, sticky search bar
e-2sticky filter bar (desktop), FAB
e-4dialogs (graduate/archive/delete)
e-5sheets (enroll/upload/link)

5. Icons (Material Symbols, outlined; status = filled)

IconUse
group / person_addroster empty state / create
searchroster search
filter_altfilter bar
upload_file / description / picture_as_pdfdocuments
swap_horiztransfer
schoolgraduate badge
archive / unarchivearchive / restore
deletedelete
family_restroom / shieldparent link sheet
check_circle / cancelactive / blocked states

6. Motion mapping (module)

UseTokenFlutter
List → detailm-slowHero avatar + page transition
Tab contentm-slowAnimatedSwitcher/TabBarView default
Badge morphm-fastAnimatedSwitcher
List entrancem-entrance 40 ms staggerTweenAnimationBuilder
Skeleton → contentm-slowAnimatedOpacity cross-fade
Sheet/dialogm-baseplatform defaults

7. Widget → token additions (module)

WidgetToken mapping
StudentListTileListTile + surface + outlineVariant divider (desktop)
StatusBadgeBadge/custom Container role fills + filled icon
ClassSelectCascadeAppDropdowns, focus ring primary
ImportReportCardCard.filled + AppStatTile
AcademicHistoryTimelinecustom, outlineVariant connectors
DocumentUploadTilesurfaceContainerLow + LinearProgressIndicator primary

8. Dark-mode notes (module)

  • Roster rows: surface; dark elevation substitutes for borders (00-shared/02 §10).
  • Status badges re-read ColorScheme (no hardcoded green/red).
  • Timeline connectors outlineVariant (light) / #49454F (dark token).
  • Golden tests at light+dark for all module components (00-shared/10 §9).