Colors
A cool neutral gray scale, one Corelith blue brand, four semantic tones. Saturated colour is reserved for action and state — never decoration.
Neutral scale
Cool gray from 50 (canvas) to 950 (deepest ink). Use direct steps when a generic surface or border is needed; prefer semantic aliases (canvas, surface, text-strong, …) everywhere else.
50
#F7F8FA
100
#F1F3F6
200
#E5E8EE
300
#D2D7E0
400
#A6AEBD
500
#767D8C
600
#565C69
700
#3D424D
800
#262A33
900
#16181D
950
#0C0D11
Brand · Corelith blue
Sampled from the logo. The shield wears 500 solid; primary buttons wear 500 solid; everywhere else use the soft tint.
50
#EEF3FE
100
#DCE5FD
200
#B8CBFB
300
#85A8F8
500
#0B5DF0
700
#0944C2
800
#08379C
900
#0A2862
Semantic tones
For alerts, badges, status. Always paired — a foreground and a soft background.
Info
--tone-info
Success
--tone-success
Warn
--tone-warn
Danger
--tone-danger
Neutral
--tone-neutral
Semantic aliases
Use these in components — never hard-code a hex.
| Token | Value | Used for |
|---|---|---|
| --canvas | --gray-50 | The page background |
| --surface | #FFFFFF | Cards, panels, inputs |
| --surface-muted | --gray-100 | Hover state, grouped areas |
| --text-strong | --gray-900 | Headings, key values |
| --text-body | --gray-800 | Running text |
| --text-muted | --gray-600 | Descriptions, helpers |
| --text-subtle | #8A91A0 | Metadata, timestamps |
| --border | --gray-200 | The default hairline |
| --border-strong | --gray-300 | Outline buttons, input border |
| --brand | #0B5DF0 | Primary buttons, focus ring |
| --brand-soft | #E8EFFE | Soft brand background, active nav |