UI Colour Palette¶
The canonical OpenFlight interface palette. Use these tokens when adding or changing UI, rather than introducing new values.
Referenced from
CONTRIBUTING.md.
Backgrounds¶
| Name | Hex | CSS variable | |
|---|---|---|---|
| Deep Background | #0A0A0F |
--color-bg-deep |
|
| Card Background | #12121A |
--color-bg-card |
|
| Elevated | #1A1A24 |
--color-bg-elevated |
|
| Hover State | #222230 |
--color-bg-hover |
Gold (Primary)¶
| Name | Hex | CSS variable | |
|---|---|---|---|
| Gold | #D4AF37 |
--color-gold |
|
| Gold Bright | #F4CF47 |
--color-gold-bright |
|
| Gold Dim | #A68B2A |
--color-gold-dim |
Cream (Text)¶
| Name | Hex | CSS variable | |
|---|---|---|---|
| Cream | #F5F0E6 |
--color-cream |
|
| Cream Dim | rgba(245, 240, 230, 0.7) |
--color-cream-dim |
|
| Cream Muted | rgba(245, 240, 230, 0.5) |
--color-cream-muted |
Accents¶
| Name | Hex | CSS variable | |
|---|---|---|---|
| Success | #4ADE80 |
--color-success |
|
| Info | #60A5FA |
--color-info |
|
| Warning | #FBBF24 |
--color-warning |
|
| Danger | #F87171 |
--color-danger |
Using these¶
The same palette drives the docs site — see
docs/stylesheets/extra.css, where the gold, cream, and near-black values
are mapped onto the theme's tokens.
When adding UI, prefer an existing token over a new hex value. If a genuinely new colour is needed, add it here in the same commit so this page stays the single reference.