Foundations
Color
Brand scales are fixed. Everything else reads semantic tokens such as fg-2 and line, which the app theme and each tone redefine. Use the token utilities (text-fg-2, border-line) and a component looks right on every background.
Violet
Somnia Purple is violet-600, #771BE8.
50#f5effe
100#ebddfd
200#d6bcfb
300#b98cf7
400#9a5af2
500#8636ee
600#771be8
700#5f14c0
800#4a1096
900#2b0960
Ink
Cool near-blacks for dark surfaces.
300#b4b4bd
400#8a8a96
600#3b3b46
700#26262f
800#1a1a22
850#14141b
900#0f0f15
950#08080c
Paper
The warm neutral of the marketing site.
paper#fafaf8
paper-2#f3f2ee
paper-3#ebe9e3
Semantic tokens
Each column is the same markup inside a different context. Toggle the theme to see the app and ink columns switch.