Design Token System

A shared design token system is the foundational investment that makes consistent, accessible UI possible across the entire application and across multiple development streams working in parallel. Without it, each feature team makes independent styling decisions leading to visual inconsistency and accessibility failures. The token system encodes WCAG 2.2 AA compliance requirements (contrast ratios, touch targets, font scaling) into the default widgets themselves, making accessibility the path of least resistance rather than an afterthought. This is especially critical given the diverse user needs across NHF, Blindeforbundet, and HLF.

Implemented as a Flutter ThemeExtension with typed token classes for colors, typography (using TextTheme), spacing, radii, and sizing. The token system is distributed via a top-level ThemeProvider (Riverpod) that the MaterialApp consumes, enabling runtime theme switching for high-contrast mode. The reusable widget library is a separate internal Dart package (or lib/shared/widgets) to enforce clean separation from feature code. All widgets expose semantic labels for screen reader support. The high-contrast theme overrides only the color tokens, inheriting all other design decisions. Tokens are validated against WCAG 2.2 AA contrast ratios via unit tests using the color_contrast package.