Color
Two ramps, one accent, semantic aliases. Every text-on-surface pairing is verified for WCAG 2.2.
Palette
ink
50 #F8FAFC
100 #F1F5F9
200 #E2E8F0
300 #CBD5E1
400 #94A3B8
500 #64748B
600 #475569
700 #334155
800 #1E293B
900 #0F172A
accent
50 #EAF2FB
100 #CCDFF5
200 #99BFEB
300 #5C99DA
400 #2E78C5
500 #0050A6
600 #00428A
700 #00366F
800 #002954
900 #001D3B
signal
success #1A7F4F
warning #A8650B
danger #B42318
info #175CD3
surface
pure #FFFFFF
paper #FBFBFC
sunken #F2F3F6
Semantic tokens
Use these in product code. They are the only contract product surfaces should depend on.
| Token | Value | Contrast on canvas |
|---|---|---|
color-fg-primary | #0F172A | 17.85 : 1 — AAA |
color-fg-secondary | #334155 | 10.35 : 1 — AAA |
color-fg-muted | #64748B | 4.76 : 1 — AAA |
color-fg-accent | #0050A6 | 7.78 : 1 — AA body |
color-fg-danger | #B42318 | 6.57 : 1 — AA body |