Design Token System
Component Detail
User Interface
medium complexity
Shared Component
mobilefrontend
0
Dependencies
5
Dependents
0
Entities
0
Integrations
Description
A Flutter-native design token system that encodes WCAG 2.2 AA contrast ratios, minimum touch target sizes, spacing scales, and scalable typography directly into the token layer. All colors, typography styles, radii, and sizing values are defined as tokens so compliance is inherited by every widget that consumes them rather than enforced per-widget.
design-token-system
Responsibilities
- Define and export color tokens with contrast ratios of at least 4.5:1 for body text and 3:1 for large text and UI components
- Enforce minimum touch target sizing of 24x24 CSS pixels across all interactive element tokens
- Provide scalable typography tokens that support text scaling up to 200% without layout breakage
- Expose spacing and radius tokens that keep visual relationships intact at all font scales
Interfaces
MeanderColors (static color palette with contrast-safe semantic aliases)
MeanderTypography (TextStyle definitions with relative font sizes)
MeanderSpacing (spacing scale constants)
MeanderSizing (minimum tap target dimensions)
MeanderRadii (border radius tokens)
MeanderTheme.light() / MeanderTheme.dark()
Relationships
Dependents (5)
Components that depend on this component