Design Token System
Component Detail
Infrastructure
medium complexity
Shared Component
mobile
0
Dependencies
6
Dependents
0
Entities
0
Integrations
Description
Single Dart constants file defining all visual design tokens for the application including colors, typography, spacing, border radii, shadow elevations, and touch target sizes. All tokens are WCAG 2.2 AA compliant by construction, with contrast-safe color pairs and minimum sizing enforced at the token level.
design-token-system
Responsibilities
- Define color palette with semantic naming (primary, surface, error, onPrimary) and verified contrast pairs
- Specify typography scale (display, heading, body, caption, label) with minimum sizes and weights avoiding thin/italic fonts
- Provide spacing scale (4px base grid) for consistent layout across all screens
- Define minimum touch target constants (24x24 logical pixels) referenced by all interactive widgets
- Export border radius, shadow elevation, and animation duration tokens for consistent motion design
Interfaces
AppColors.primary
AppColors.onPrimary
AppColors.surface
AppColors.error
AppColors.contrastPair(Color bg) → Color
AppTypography.headingLarge
AppTypography.bodyMedium
AppTypography.labelSmall
AppSpacing.xs / sm / md / lg / xl
AppSizing.minTouchTarget
AppRadius.card / button / chip
AppShadows.card / modal
AppDurations.short / medium / long
Relationships
Dependents (6)
Components that depend on this component