Maps every screen surface to 02_Design_Tokens.md (tokens T-) and shared
components (03_Component_Library.md). Dark/light parity per 02_Design_Tokens.md §10.
Server bands (result.service.ts:130-138) map to semantic roles (light & dark both):
| Grade | Band | Role (light) | Role (dark) | Text |
|---|
| A+ | ≥ 90 | success container | success container | onSuccessContainer |
| A | ≥ 80 | success container | success container | onSuccessContainer |
| B+ | ≥ 70 | primary container | primary container | onPrimaryContainer |
| B | ≥ 60 | primary container | primary container | onPrimaryContainer |
| C | ≥ 50 | tertiary container | tertiary container | onTertiaryContainer |
| D | ≥ 40 | tertiary container | tertiary container | onTertiaryContainer |
| F | < 40 | error container | error container | onErrorContainer |
| unknown string | stored verbatim | surfaceVariant | surfaceVariant | onSurfaceVariant |
All chip text labelMedium (≥ 4.5:1, 09_Accessibility_Baseline.md §2).
| Surface | Token (light / dark) | Used on |
|---|
| Page background | surface | all screens |
| Card / hero | surfaceContainerLow | S2 hero, S4 card |
| Table header | surfaceContainerHigh | S1-T, S4-T |
| Table zebra | surface / surfaceContainerLow | S1-T rows |
| Table gridlines | outlineVariant | S1-T, S4-T |
| Field error fill | errorContainer | S1 over-max cells |
| Empty/disabled | surfaceVariant | ungraded bucket, unknown grade |
| Element | Type style (02_Design_Tokens.md §2) |
|---|
| Screen title | headlineSmall |
| S4 grade hero | displaySmall |
| S4 totals | headlineMedium mono, tabularFigures() |
| S1 table numerals | mono 14/400/20, tabularFigures() |
| Labels | labelMedium onSurfaceVariant |
| Missing-row text | bodyMedium onSurfaceVariant italic |
| Group headers (S3) | titleSmall |
- 4 dp grid per 02_Design_Tokens.md §3: table cell padding 8 dp vertical / 12 dp horizontal; card padding 16 dp; screen margins 16 dp.
- Radius: cards & chips
radius-medium (12), table cells 0 (straight grid), dialogs radius-large.
- Elevation: cards
elevation-1 (resting), publish panel elevation-2, save bar elevation-2 (fixed bottom), dialog elevation-3.
- Touch targets ≥ 48×48 dp for all interactive cells (09_Accessibility_Baseline.md §3).
| Icon | Where |
|---|
edit | S1 rows, S2 "Enter marks" |
check_circle / schedule | saved / draft status chips |
lock | published-locked rows |
cloud_off | offline banner |
bar_chart | S5 distribution |
campaign | publish action |
download / share | S4 actions ((planned) PDF) |
| Width | S1 | S4 | S5 |
|---|
| < 600 px | cards layout, save bar fixed | stacked, table → labelled rows | bars stack vertical |
| 600–719 px | cards layout, save bar inline | two-column totals | stacked bars |
| ≥ 720 px | full table | two-column card + table | side-by-side chart grid |
- Identical structure both modes; only role pairs swap (02_Design_Tokens.md §1).
- Gridlines
outlineVariant differ per mode (#C4C7C5 light / #444746 dark) — never hardcode.
- Grade chips use the same role mapping in both modes (verified contrast per mode).