foundations
Tokens
Every color, shadow, and radius the system exposes. Switch themes with the contrast toggle in the header — the same swatches below will redraw.
brand anchor
TTI palette
tti-maroon
#5C0025
tti-maroon-deep
#500000
tti-gold
#DDAC37
tti-navy
#15457E
tti-teal
#4A8892
tti-sage
#66814F
tti-charcoal
#221F1F
semantic roles
Surfaces & text
| swatch | token | role |
|---|---|---|
| --brand-primary | Primary action + identity (maroon) | |
| --brand-accent | Gold bars + warning accent | |
| --brand-secondary | Inline text links (navy) | |
| --surface-page | Page background | |
| --surface-raised | Cards, header, raised panels | |
| --surface-sunken | Footer, subtle fill | |
| --surface-border | Dividers + input borders | |
| --text-primary | Body copy | |
| --text-secondary | Labels, meta | |
| --text-muted | Captions, timestamps | |
| --text-inverse | Text on dark fills | |
| --text-brand | Hover + active nav |
status
State colors
--color-success
--color-warning
--color-danger
--color-error
--color-info
primary palette
Maroon ramp
Nuxt UI resolves color="primary" against these — anchored at #5C0025 = 500.
50
100
200
300
400
500
600
700
800
900
950
elevation
Shadows
shadow-sm
--shadow-sm
shadow-md
--shadow-md
shadow-lg
--shadow-lg
shadow-focus
--shadow-focus
shape
Radii
radius-sm
--radius-sm
radius-md
--radius-md
radius-lg
--radius-lg
radius-xl
--radius-xl