Design Tokens

Design tokens are the atomic values of the design system. UI elements MUST use tokens — never raw values.

Colors

✅ Use AppColors.primary, AppColors.secondary, AppColors.error, AppColors.success, AppColors.warning, AppColors.surface, AppColors.textPrimary, AppColors.textSecondary
❌ NEVER use Color(0xFF...), Colors.blue, or inline hex values
Map semantic tokens to Material 3 ColorScheme for platform consistency
Each color token MUST document its use case and ensure WCAG AA contrast ratio
Support light and dark mode via ThemeData — never branch on Brightness manually in widgets

✅ Use AppSpacing.xxs (2), AppSpacing.xs (4), AppSpacing.sm (8), AppSpacing.md (16), AppSpacing.lg (24), AppSpacing.xl (32), AppSpacing.xxl (48)
✅ Use AppSpacing.screenHorizontal (24), AppSpacing.screenVertical (16) for consistent screen padding
❌ NEVER use EdgeInsets.all(16.0), SizedBox(height: 8), or hardcoded padding values
Use SizedBox(height: AppSpacing.sm) for gaps — not Container or Padding with empty child