Design Tokens

Design tokens are the named values that represent MetrePay's visual decisions. They are the bridge between the design system and implementation.

---

Sections

Section	Description
CSS Variables	Complete CSS custom property reference
Tailwind Config	Tailwind CSS theme extension
Bulma Overrides	Bulma CSS variable mappings

---

Philosophy

Tokens are defined once and used everywhere. When a value needs to change, it changes in one place.

Design Decision → Token Name → Token Value → Implementation
     ↓                ↓              ↓              ↓
  "Blue primary"  --mp-color-blue  #6E96FF    var(--mp-color-blue)

All tokens are prefixed with --mp- to avoid conflicts with other CSS variables.