Skip to main content

🎨 Colors

Palette​

  • Brand palettes per brand (e.g., Betfair, Paddy Power).
  • Neutrals for surfaces and text.
  • Functional colors: success, warning, error, info.

Tokens​

  • Semantic examples:
    • color.text.primary, color.text.secondary
    • color.bg.surface, color.bg.brand
    • color.border.focus, color.icon.default
  • Avoid applying raw hex in UI layers; bind semantic tokens instead.

Accessibility​

  • Text: 4.5:1 (normal) / 3:1 (large).
  • Focus states must be clearly visible in all themes.

Usage guidelines​

  • Use semantic tokens for text, icons, borders, and surfaces.
  • Don’t override colors locally in components.

Do’s / Don’ts​

  • âś… Semantic tokens in designs
  • âś… Validate across light/dark & brands
  • ❌ Hard-coded hex values
  • ❌ Color-only states without non-color affordances