Maps every Exams surface to the shared design tokens (00-shared/02_Design_Tokens.md )
and components (00-shared/03 ). Nothing in the module introduces new tokens;
semantic color mapping is defined here.
Semantic Color role (light / dark) Used for
Exam draft surfaceVariant / onSurfaceVariantExamStatusBadge.draft, chip, filter selected-offExam active primary / primaryContainerExamStatusBadge.active, Coverage bar active stateExam completed secondary / secondaryContainerExamStatusBadge.completed, GradeChipExam published tertiary / tertiaryContainer + Icons.verifiedExamStatusBadge.published, publish success state, publishedAt chipsMarks saved tertiary checkrow save-state icon Marks failed / max violation error / errorContainerfailed row, inline errors, MarksTextField error outline Overlap / invalid config warning tertiary banner (passingMarks > maximumMarks, OQ-6)SlotHeaderCard warning, S4 conflict dialogGrade absent / not marked onSurfaceVariant mutedreport-card unmarked rows Coverage complete (100%) tertiaryMarksSummaryBar full stateCoverage partial primaryMarksSummaryBar progress
Status enum source: examination.schema.ts:28-33; type enum
examination.schema.ts:15-20.
Element Token
Screen titles (Exams, Results) titleLargeExam name (card/detail) titleMedium (card) / headlineMedium (detail)Slot subject, roster student name titleMedium / bodyLargeMeta lines (dates, class, counts) bodySmall / bodyMedium onSurfaceVariantMarks values, percentages, totals labelLarge–displaySmall mono tabular Badges/chips labelSmall / labelMediumForm labels labelLarge onSurfaceVariantEmpty/error titles titleMedium; body bodyMedium
Use Token
Screen padding (phone) Sp.16Screen padding (tablet+) Sp.24Card internal padding Sp.16 (large), Sp.12 (rows)Vertical rhythm between sections Sp.24 (detail), Sp.16 (forms)Row gaps (marks row) Sp.12; field-to-label Sp.8Badge/chip padding Sp.4/Sp.8, Sp.4/Sp.10
Surface Token
AppBar (S1/S2/S3) El-e1Cards (ExamCard, SlotHeaderCard, ReportCard) El-e1Publish dialog El-e3Floating sheets (grade sheet, conflict sheet) El-e3
Element Token
Cards (list/detail) r-lg (16)Rows, coverage tiles r-md (12)Inputs, marks field r-mdBadges/chips r-fullMarksSummaryBar r-full
Icon Use
Icons.assignment / fact_checklist empty state, module icon Icons.addFAB "New exam" / "Add subject" Icons.edit / Icons.deletedetail menu Icons.campaign / Icons.verifiedpublish button / published badge Icons.check_circle (tertiary)row saved Icons.error_outlinefailed row Icons.cloud_off / Icons.cloud_queueoffline queued row Icons.scheduleslot time Icons.sharereport card share (proposed) Icons.warning_amberpublish/conflict/overlap dialogs
Icons never carry meaning alone (paired with labels, 00-shared/09 ).
Token-only theming; no hardcoded colors. Status colors invert through the same
role tokens (primaryContainer ↔ primary handling per 00-shared/02 §7 ).
Published badge: tertiaryContainer (light) / tertiary-tinted container (dark).
Unmarked report-card rows: onSurfaceVariant at 60% opacity in dark.
Screenshots/QA: 14_QA_Checklist.md §dark includes badge contrast spot-checks.
Module component Built on Shared variants reused
ExamStatusBadge, ExamTypeChip, GradeChipAppBadge/AppChip— ExamCard, ExamSubjectCard, CoverageTile, SlotHeaderCard, ResultRowCardAppCardpressed/hover state layers MarksTextFieldAppTextField (compact numeric variant)error/disabled states PublishDialog, delete confirm, conflict sheetAppDialogbarrierDismissible lock while submittingMarksSummaryBarcustom progress primitive (shared) Semantics(liveRegion)Skeleton/empty/error/offline AppSkeleton, AppEmptyState, AppErrorState, AppOfflineBanneras-is
Icons.* decorative animation beyond Mo set; danger-only surfaces for
non-destructive actions; any elevation above El-e3 inside the module.