Appearance
Colour
Colours are named for what they do: a surface, a border, text, the brand, a status.
Semantic colours
Each one is a utility with the usual prefix: bg-surface-page, border-border, text-text-muted. The components colour with nothing else, and an app should not either.
Each colour has a light and a dark value. The page follows the system's mode, or data-theme="light" or "dark" on any element, for that element and everything in it.
| Colour | Light | Dark |
|---|---|---|
surface-page | #F1F0ED | #13110E |
surface-raised | #FFFFFF | #22201C |
surface-selected | #FFFFFF | #3B3934 |
border | #E6E4E1 | #3B3934 |
border-strong | #D3D1CD | #55524D |
border-control | #888580 | #6E6B66 |
border-control-hover | #6E6B66 | #888580 |
text | #22201C | #FBFAF8 |
text-muted | #6E6B66 | #BDBAB5 |
text-subtle | #888580 | #A2A09B |
text-placeholder | #A2A09B | #888580 |
brand | #FFC200 | #FFC200 |
brand-ink | #8B6800 | #FFCC4C |
brand-subtle | #FFF8EA | #3B2B01 |
text-on-brand | #22201C | #22201C |
danger-strong | #A64C45 | #A64C45 |
text-on-danger | #FFFFFF | #FFFFFF |
danger | #C2685F | #DC857B |
danger-ink | #85362F | #F3A299 |
danger-subtle | #F9EDEB | #4C3832 |
warning | #BD6F40 | #D78B60 |
warning-ink | #813C09 | #EEA881 |
warning-subtle | #F8EDE8 | #4B392D |
success | #559858 | #73B275 |
success-ink | #226228 | #93CC94 |
success-subtle | #EAF2EA | #364131 |
info | #4A8AC9 | #69A5E2 |
info-ink | #16558D | #8AC0F7 |
info-subtle | #E9F1F9 | #343F48 |
backdrop | #13110E at 20% | #13110E at 50% |
Palette
The ramps the semantic colours are drawn from. They have no utilities, so that colour is always chosen by purpose.
ink- 50 #FBFAF8
- 100 #F1F0ED
- 200 #E6E4E1
- 300 #D3D1CD
- 400 #BDBAB5
- 500 #A2A09B
- 600 #888580
- 700 #6E6B66
- 800 #55524D
- 900 #3B3934
- 950 #22201C
- 975 #13110E
amber- 50 #FFF8EA
- 100 #FEEFCF
- 200 #FEE3A9
- 300 #FFD77B
- 400 #FFCC4C
- 500 #FFC200
- 600 #DDA804
- 700 #B78B01
- 800 #8B6800
- 900 #5B4400
- 950 #3B2B01
danger- 50 #FFF8F8
- 100 #FEEBE9
- 200 #FDDCD7
- 300 #FBC2BA
- 400 #F3A299
- 500 #DC857B
- 600 #C2685F
- 700 #A64C45
- 800 #85362F
- 900 #5E241F
- 950 #39120F
- 975 #220806
warning- 50 #FEF9F6
- 100 #FDECE4
- 200 #FBDECF
- 300 #F7C6AB
- 400 #EEA881
- 500 #D78B60
- 600 #BD6F40
- 700 #A15422
- 800 #813C09
- 900 #5C2904
- 950 #371601
- 975 #210A00
success- 50 #F7FBF7
- 100 #E8F4E8
- 200 #D6ECD5
- 300 #B7DEB7
- 400 #93CC94
- 500 #73B275
- 600 #559858
- 700 #387D3D
- 800 #226228
- 900 #15441A
- 950 #09280C
- 975 #031705
info- 50 #F7FBFF
- 100 #E6F2FE
- 200 #D2E7FE
- 300 #B1D6FD
- 400 #8AC0F7
- 500 #69A5E2
- 600 #4A8AC9
- 700 #2C6FAE
- 800 #16558D
- 900 #0C3B64
- 950 #04213D
- 975 #011225