Primitives
Layer 1 — raw values with no context. A component never reads one of these for colour · 84 colour tokens
ink.25#FAFBFCink.50#F4F5F7ink.75#E7EAEEink.100#D5D9DFink.200#B8BDC5ink.300#9CA3ACink.400#808897ink.500#676F7Eink.600#4D5768ink.700#354051ink.800#1F293Bink.900#0A1526steel.50#E4ECF4steel.100#CBD5E1steel.200#B3C0CEsteel.300#90ABC9steel.400#7B96B5steel.500#6682A1steel.600#3A6EA5steel.700#305A88steel.800#23476Esteel.900#1C3451navy.400#3D4D6Enavy.500#32415Fnavy.600#273652navy.700#1E2A43navy.800#141F36navy.900#0A1528status.ok#2C7653status.warn#896316status.crit#C43232status.info#396CA3status.ok-dark#5BC290status.warn-dark#E2B048status.crit-dark#E28C8Cstatus.info-dark#7EA7D1status.ok-tint#D6E2DEstatus.warn-tint#E4DFD4status.crit-tint#EDDADCstatus.info-tint#D8E0EAstatus.ok-on-tint#286B4Bstatus.warn-on-tint#7B5914status.crit-on-tint#B02D2Dstatus.info-on-tint#336193status.ok-tint-dark#193427status.warn-tint-dark#392D16status.crit-tint-dark#511F1Fstatus.info-tint-dark#1F3042status.ok-on-tint-dark#5BC290status.warn-on-tint-dark#E2B048status.crit-on-tint-dark#DF8080status.info-on-tint-dark#729ECDviz.1#0072B2viz.2#009E73viz.3#E69F00viz.4#56B4E9viz.5#CC79A7viz.6#D55E00viz.7#F0E442viz.8#000000viz.8-dark#F4F5F7seq.1#E1EAF4seq.2#ACC6E2seq.3#709DCDseq.4#3D74AEseq.5#2A5179seq.6#1B324Bdiv.1#7A1F1Fdiv.2#BB2F2Fdiv.3#DC7575div.4#EDEEF0div.5#81D0AAdiv.6#40AB77div.7#2A6F4Eproduct.nexus#2B54B6product.helm#21503Aproduct.citadel#C23ECCproduct.prism#8A711Eproduct.docs#5B7E8Fproduct.nexus-dark#6790FCproduct.helm-dark#46AA7Bproduct.citadel-dark#DB70E4product.prism-dark#B89628product.docs-dark#7F9EADui lane roles — light
Layer 2 — what a value means here · 3 colour tokens
surface.overlay#FFFFFFscrimcolor-mix(in srgb, #0A1526 55%, transparent)status.crit-on#FFFFFFui lane roles — dark
The same roles, re-solved · 2 colour tokens
scrimcolor-mix(in srgb, #0A1528 72%, transparent)action.hover#FFFFFF