Design Token System
Component Detail
Description
Centralized Dart constants and theme configuration defining every color, typography scale, spacing value, border radius, and sizing dimension used across the Meander Mobile App. All color pairs are pre-validated to meet WCAG 2.2 AA contrast thresholds (4.5:1 for normal text, 3:1 for large text and UI components), and the token set is the single source of truth consumed by the Accessible Widget Library and all screen generators. Updates to the token set automatically propagate contrast compliance to every screen.
design-token-system
Sources & reasoning
A centralized token system is the only architecture that guarantees contrast compliance propagates to all 59 features automatically. Without it, individual screens would hard-code colors leading to drift and violations. The token system enforces the constraint at the definition layer: every color pair is validated at design time, so consuming widgets inherit compliance without per-widget contrast checks. This is explicitly documented as part of the mobile app's core/shared architecture in the so
No source references — this artifact was included based on reasoning alone (see above).
Responsibilities
- Define all application colors as pre-validated WCAG-compliant token pairs (foreground/background)
- Define typography scale with minimum sizes and weight constraints to avoid thin/italic fonts
- Define spacing and sizing tokens ensuring 24x24px minimum touch target dimensions
- Expose ThemeData and AppTheme singleton consumed by all Flutter MaterialApp instances
- Serve as input to WCAG Audit Service contrast validation at CI time
Interfaces
AppColors.primary / AppColors.onPrimary (contrast-guaranteed pair)
AppColors.surface / AppColors.onSurface
AppTypography.bodyMedium / AppTypography.labelLarge
AppSpacing.minTouchTarget (= 24.0)
AppTheme.light() → ThemeData
Relationships
Dependents (3)
Components that depend on this component