Token-to-component mapping for dashboard surfaces. All tokens authoritative
in 00-shared/02 (Sp = spacing §3, Ty = typography §2, El = elevation §5,
R = radius §4, Mo = motion §6); components in 00-shared/03 and
07_Component_Library.md ; a11y baseline 00-shared/09 .
Role Token Usage
Screen title Ty headlineSmall/titleLargeAppBar "Dashboard" KPI value Ty headlineMedium (tabs) / numeric styleKpiCard.valueKPI label Ty bodySmall onSurfaceVariantKpiCard.labelTrend Ty bodySmall (bold variant (planned))TrendIndicatorChart title Ty titleMediumChartCard.titleChart caption Ty bodySmall onSurfaceVariantChartCard.caption (a11y text)Banner Ty bodyMediumStaleBanner, AppOfflineBannerEmpty state Ty titleMedium + bodyMediumAppEmptyState
Role Token Use
Card surfaces surfaceContainerLowKpiCard, ChartCard (both themes)Value onSurfaceKPI numbers Trend up/down primary/error (semantic success/error), neutral onSurfaceVariantTrendIndicator (planned) — glyphs accompany colour (09_User_Behaviour.md B-rule)Charts primary, secondary, tertiaryAppCharts seriesOverdue/attention error + errorContainer chipdues overdue chip Zero hint onSurfaceVariantzero-state hints Stale banner info secondaryContainer StaleBannerOffline AppOfflineBanner shared tokensoffline
All pairs pass AA on light + dark (00-shared/09 §2 ); no module-specific
colours added.
Token Use
Sp 16 (phone) / 24 (tablet+)screen horizontal padding Sp 12between KPI cards (row), chart-card padding Sp 16chart-card inner padding Sp 24section gaps KPI row horizontal scroll phone; wrap grid tablet ≥840 dp; max 3 cols desktop ≤1200 width
Token Use
El-e1resting cards (KpiCard, ChartCard) El-e2desktop hover lift (06_Screen_Specifications.md §1.7) El-1AppBar R mdcards, banners, chips R fulltrend chips, period segmented control
Per 10_Interaction_Specification.md §10: Mo-m-base routes/charts,
Mo-m-fast shimmer/press/banners, 200 ms value swap. No custom curves.
Component Container Text Accent
KpiCardsurfaceContainerLow, El-e1, R-mdvalue headlineMedium onSurface; label bodySmall onSurfaceVariant trend primary/error ChartCardsame as card title titleMedium; caption bodySmall series primary/secondary/tertiary StaleBannersecondaryContainerbodyMedium onSecondaryContainerinfo WidgetPaletteTile (planned)surfaceContainerLowtitle bodyLarge switch primary KpiRow— — — (layout only)
Token-only theming; both schemes derive from the same roles — no hard-coded
hex anywhere (00-shared/02 §1 ).
Dynamic type 200%: KPI row falls back to vertical list; charts keep
aspect but caption reflows; tested in 14_QA_Checklist.md §5.
Requirement Mapping
Contrast AA tokens above; chart series differ by luminance + pattern (planned) Chart summaries ChartCard.caption text row + semanticsLabel (06_Screen_Specifications.md §1.5)Touch targets ≥ 48 all cards, handles, switches Colour independence trend glyphs + labels Live regions KPI value updates ≥ 1%