Digital
Colour ramps
Every colour in the system resolves to a step on one of these ramps. They are the raw material, not the vocabulary.
Build with the semantic tokens on Design tokens rather than reaching for a step directly. A step is a fixed value; a semantic token knows which sub-brand and which theme it is sitting in, and resolves to the right step on its own.
brand
blue
50#EDF7FF
100#D9EEFF
200#C6E6FF
300#7DC1FF
400#67ACF7
500#498FEC
600#2A71E0
700#094FD2
800#0016C1
900#000D8C
950#000766
subbrand
eat
50#FFE7E1
100#FFD5CC
200#FFB5AB
300#FF9086
400#FF6962
500#F54544
600#E11A2C
700#AF101C
800#850913
900#5A060B
950#400406
work
50#FFEFDD
100#FFE1C6
200#FFC9A2
300#FAAB79
400#E98E51
500#D1732D
600#B45A0A
700#994B03
800#6E3200
900#4B2000
950#341500
culture
50#E6FCEE
100#D3F5E0
200#B4E6C7
300#90D2AB
400#6DBB8F
500#4FA375
600#34885D
700#236D48
800#185235
900#0E3622
950#082516
skylawn
50#DCFBFF
100#C3F3FF
200#9BE3FF
300#6BCDFE
400#2DB2EB
500#009CD8
600#0082BB
700#006799
800#004D73
900#00334E
950#002336
shop
50#FFE4FF
100#FFD0FF
200#FFAEFF
300#FF85FD
400#FB5BED
500#EA3ADD
600#C400B9
700#A00097
800#790072
900#52004D
950#390036
neutral
neutral
0#FFFFFF
50#F2F2F2
100#EBEBEB
200#D2D2D2
300#C0C0C0
400#A0A0A0
500#8F8F8F
600#767676
700#676767
800#454545
900#2E2E2E
950#1F1F1F
1000#000000
utility
clay
50#FCF5EA
100#FAEFDE
200#E9D3C9
300#E3CBC2
400#BBA199
500#A4887F
600#8E6D64
700#795348
800#64382C
900#4E1C10
950#3E0900
functional
red
50#FFE7E4
100#FFD4D0
200#FFB5B0
300#FF8F8D
400#FF696C
500#F54550
600#C8102E
700#AE0F28
800#84081B
900#5A0610
950#3F0409
amber
50#FFF3EE
100#FFE4DA
200#FFB89E
300#FF8C64
400#F7825A
500#DF653C
600#C2410C
700#983E11
800#7A3B12
900#492107
950#331503
green
50#F0F8F3
100#C5E4CF
200#C2E1CC
300#A5CCAE
400#88B58F
500#6A9E71
600#3C7C43
700#2E6D3A
800#13532A
900#0B4D26
950#032610
Anchor steps
A marked step is an anchor — the one a semantic token is pinned to, and the one chosen for contrast. Retuning a ramp means keeping its anchors where they are.
| Step | Why it is anchored |
|---|---|
| brand/blue / 200 | live link-hover |
| brand/blue / 300 | live hover-darker |
| brand/blue / 800 | brand/base (post) #0016C1 · 11.14:1 on white |
| subbrand/eat / 600 | brand/base · 4.79:1 on white |
| subbrand/work / 700 | brand/base · 6.25:1 on white |
| subbrand/culture / 700 | brand/base · 6.26:1 on white |
| subbrand/skylawn / 500 | brand/base · 3.11:1 — large text only |
| subbrand/shop / 600 | brand/base · 5.19:1 on white |
| neutral / 0 | white |
| neutral / 700 | brand/base (music) · 5.66:1 on white |
| neutral / 1000 | black |
| utility/clay / 100 | foundation beige #FAEFDE |
| utility/clay / 950 | sidebar brown #3E0900 |
| functional/red / 600 | error base |
| functional/amber / 300 | highlight-orange accent #FF8C64 |
| functional/amber / 600 | caution base |
| functional/green / 600 | success base #3C7C43 (note: near culture green) |