Primary colors
The three colors that appear the most and make the brand recognizable. Click a color to copy its HEX.
Petrol
#226789
rgb(34, 103, 137)
--primary
Actions, links and highlights
Deep petrol
#1b4c64
rgb(27, 76, 100)
--backdrop
Color blocks and background glow
Black
#0c0c0c
rgb(12, 12, 12)
--background (dark)
Dark theme background
Supporting colors
Light petrol
#3a8fba
rgb(58, 143, 186)
--link (dark)
Links and icons on the dark theme
White
#ffffff
rgb(255, 255, 255)
--background (light)
Light theme background and text on petrol
Gray
#a0a0a0
rgb(160, 160, 160)
--muted-foreground (dark)
Secondary text on the dark theme
Emphasis red
#dc2626
rgb(220, 38, 38)
--destructive
Alerts and errors
Tokens in code
Colors live in brand/theme.css as HSL variables. Components never use a fixed color: changing a token changes the whole system.
| Token | Value | Description |
|---|---|---|
| --primary | 200 60% 34% | Petrol — buttons, focus and highlights (light theme) |
| --primary (dark) | 200 57% 38% | A slightly lighter petrol for the dark theme |
| --link | 200 60% 34% | Links and icons; on the dark theme it becomes 200 52% 48% |
| --background | 0 0% 100% | White — light theme background; dark uses 0 0% 5% |
| --foreground | 0 0% 9% | Light theme text; dark uses 0 0% 93% |
| --backdrop | 200 57% 25% | Deep petrol — radial glow of the dark theme |
| --destructive | 0 72% 51% | Red — errors and destructive actions |