Design Tokens¶
All brand tokens live in a single canonical file and are mirrored to platform-native formats.
| Path | Consumer | Format |
|---|---|---|
assets/brand/tokens/tokens.json |
Canonical source | JSON |
assets/brand/tokens/tokens.css |
Web / mkdocs | CSS custom properties |
assets/brand/tokens/tokens.xaml |
WPF app | ResourceDictionary |
Editing rule¶
Only tokens.json is source. Changes to tokens.css or tokens.xaml must be derived from JSON. Drift between mirrors is a bug.
Naming¶
- Colors:
<family>-<shade>(e.g.navy-900,amber-500) - In CSS: prefixed
--al-(e.g.--al-navy-900) - In XAML: PascalCase prefixed
Al(e.g.AlNavy900) - In JSON: nested by family (
color.navy.900.value)
Token families¶
| Family | Shades | Purpose |
|---|---|---|
navy |
700, 800, 900 | Dark surfaces |
paper |
100, 200 | Light surfaces |
cream |
50 | Primary text on dark, speed trace |
graphite |
500, 700, 900 | Light-theme muted / body / heading text |
steel |
500 | Muted text / reference trace |
amber |
400, 500, 600 | Brand primary with hover/pressed states |
signal |
red, green, blue | Status — never decorative |
telemetry |
speed, throttle, brake, steering, gear, reference | Chart channel aliases |