Color System

A monochrome field with one warm accent. Roles, scales and contrast guarantees.

v1.0.0·Updated Jul 9, 2026 · 12:00

Three tiers

Colour is layered so it can move without breaking. Core is the raw material: every hue as a 50-to-900 scale, plus a single black and white. Nothing uses it directly. Semantic is what components consume, in two tiers: intensity ramps (weakest to strongest) that alias a core ramp, then role tokens (background, text, action) that reference those ramps by name. A theme is that semantic layer resolved to real colour. Optimistic stays dark-first and monochrome: neutral carbon carries almost every screen, and the one warm accent (ember #FF7A00) lives in the brand ramp, so a re-skin never loses it.

How a token resolves

A component never names a hex. It asks for a role, the role points at an intensity ramp, and the ramp points at one core step. Follow the chain for a primary button on the dark theme.

The value #FF8A24 passes through every layer unchanged. Re-point brand at another core ramp and every button, tint and border that reads action.primary re-skins at once, with no component edits.

The three tiers

Core is the raw material, kept broad on purpose so new hues are already on hand without editing anything downstream. The functional ramps (brand, red, green, amber, blue) and the neutral carbon scale do the real work; black and white are single values; the rest are spare hues. Each ramp runs 50 to 900, read straight from tokens/primitive/color.json.

brandWarm brand accent, Optimistic ember

#FFF3E950

#FFE1C6100

#FFC593200

#FFA455300

#FF8A24400

#FF7A00500

#E96E00600

#C05B00700

#7C3C02800

#40230A900

redError red

#FFF2F250

#FFE4E3100

#FFC8C7200

#FFA5A5300

#FF787D400

#EA525E500

#CA3A48600

#A02634700

#761B25800

#4F0F16900

greenSuccess green

#EDFCEA50

#DAF7D3100

#B9ECAD200

#95DC84300

#71C75C400

#51AD38500

#3A921F600

#26720C700

#1B530A800

#0F3704900

amberWarning amber

#FFF5EE50

#FFEAD9100

#FFD4B0200

#FFB877300

#F79730400

#D97D00500

#B76800600

#8E5000700

#693A00800

#462400900

blueInfo blue

#F1F6FF50

#E2EBFF100

#C6D8FF200

#A5C1FF300

#7FA5FF400

#6189ED500

#4B70CD600

#3755A3700

#273E78800

#172850900

neutralCool-gray ramp (light). Optimistic carbon

#F4F5F650

#E7E9EE100

#CFD3DA200

#9AA0A8300

#767B87400

#565A62500

#33343C600

#24252B700

#1C1C1E800

#0E0F12900

skyLight blue, focus ring and accent

#F0F6FF50

#DFECFF100

#C0DAFF200

#99C4FF300

#6BAAFF400

#4A8FEA500

#3576CB600

#235AA1700

#194176800

#0D2A4F900

black1 step

#000000black

white1 step

#FFFFFFwhite

orangeOrange

#FFF3F050

#FFE5DF100

#FFCCBF200

#FFAA97300

#FF7F64400

#FF3E0D500

#D72F00600

#A82200700

#7D1600800

#540B00900

sapphire10 steps

#F1F6FD50

#E2ECFA100

#C9DAF2200

#ACC3E5300

#8FAAD1400

#7490B8500

#5E789D600

#465C7B700

#33435A800

#202B3B900

yellowChartreuse, current semantic warning ref

#F9FAE650

#F2F3CB100

#E4E69E200

#D2D46B300

#BCBC32400

#A3A300500

#898800600

#6A6A00700

#4D4D00800

#323200900

grey10 steps

#F3F6FA50

#E7EBF4100

#D0D9E7200

#B7C2D5300

#9CA9BF400

#818FA6500

#6A778C600

#515B6D700

#3A4250800

#252B34900

tealBlue10 steps

#F1F6FF50

#E1ECFF100

#C4D9FF200

#A0C2FF300

#77A7FF400

#558BF1500

#4072D1600

#2D57A7700

#203F7A800

#122852900

cyan10 steps

#E3FCFB50

#C3F7F6100

#8BEBEB200

#39DBDB300

#00C0C1400

#00A3A3500

#008788600

#006969700

#004C4C800

#003232900

rose10 steps

#FFF2F650

#FFE3EB100

#FFC6D8200

#F4A8C2300

#E189A9400

#C96D8F500

#AB5676600

#87405B700

#632E42800

#421C2A900

pink10 steps

#F8F5F750

#EFE9ED100

#DFD5DB200

#CABDC6300

#B3A3AD400

#998994500

#80717B600

#63565F700

#483F45800

#2F282D900

indigo10 steps

#F3F5FF50

#E6EAFF100

#CED5FF200

#B2BCFF300

#949EFF400

#7880F3500

#6267D3600

#4A4EA9700

#35387C800

#212453900

cobaltCobalt blue

#F2F6FF50

#E3EBFF100

#C8D7FF200

#A8C0FF300

#84A3FF400

#6486F4500

#4F6DD4600

#3A53A9700

#2A3C7C800

#192653900

berry10 steps

#F0F6FF50

#DFECFF100

#C2DAFC200

#A3C4F2300

#85AAE0400

#6990C8500

#5378AB600

#3D5C87700

#2C4363800

#1B2B42900

maroon10 steps

#FFF2F550

#FFE3E9100

#FFC6D5200

#F5A8BD300

#E28AA3400

#C96D89500

#AC5771600

#884056700

#632E3F800

#421C28900

purple10 steps

#F7F4FF50

#EFE6FF100

#DFCEFF200

#CEB1FF300

#BB8CFF400

#A36DEB500

#8A56CC600

#6B3FA2700

#4E2D77800

#331C50900

moss10 steps

#F1F7F850

#E1EEEF100

#C6DDDE200

#A8C9CA300

#8AB1B2400

#6E9799500

#587E80600

#416163700

#2F4748800

#1D2E2F900

lime10 steps

#F0FAEE50

#E0F4DB100

#C4E8BD200

#A5D69B300

#86C07A400

#69A75C500

#528D47600

#3C6D32700

#2B5024800

#1A3415900

cherry10 steps

#FFF2F250

#FFE4E3100

#FFC8C7200

#FFA5A5300

#FB7B7F400

#E35B63500

#C3444E600

#9A2F39700

#712228800

#4C1418900

tangerine10 steps

#FFF4EF50

#FFE8DC100

#FFD1B7200

#FFB287300

#FB8D47400

#E36F15500

#C15A00600

#964500700

#6F3100800

#4A1E00900

iris10 steps

#F3F5FF50

#E6EAFF100

#CED5FF200

#B2BCFF300

#949EFF400

#7880F3500

#6267D3600

#4A4EA9700

#35387C800

#212453900

sangria10 steps

#FFF2F150

#FFE4E1100

#FFC9C4200

#FFA6A0300

#F4827C400

#DB6460500

#BC4D4A600

#953736700

#6D2827800

#491817900

azure10 steps

#F3F5FF50

#E6EAFF100

#CFD5FF200

#B3BCFF300

#959EFF400

#787CFF500

#6263DF600

#4B4AB2700

#363583800

#222258900

magenta10 steps

#FFF2F750

#FFE2EE100

#FFC5DE200

#FF9FCB300

#F477B5400

#DB579C500

#BC4082600

#952C65700

#6D2049800

#491230900

lapis10 steps

#F4F5FF50

#E7E9FF100

#D1D4FF200

#B6BBFF300

#9A9CFF400

#7F79FF500

#6860E1600

#5047B4700

#393384800

#242059900

teal10 steps

#EAF9FA50

#D4F2F4100

#AEE4E7200

#83D1D5300

#57BABF400

#2CA1A6500

#06878C600

#00686C700

#004C4F800

#003134900

saffron10 steps

#FFF6EC50

#FFECD5100

#FFD7A8200

#FFBC66300

#F19F1B400

#D18700500

#B07100600

#895700700

#653F00800

#432800900

spruce10 steps

#EFF7FD50

#DDEEFA100

#BFDDF1200

#9EC8E3300

#7DB0CF400

#6096B7500

#4A7D9C600

#35607A700

#264659800

#172D3B900

heather10 steps

#F5F4FF50

#EAE8FF100

#D6D3FB200

#BFBAF0300

#A5A0DE400

#8C85C7500

#746DAA600

#595386700

#403C62800

#292641900

navyBlue10 steps

#F1F6FF50

#E1ECFF100

#C6D9FA200

#A8C3EF300

#8BA9DD400

#6F8FC5500

#5976A9600

#425B85700

#304261800

#1E2A40900

cloud10 steps

#F5F6F650

#EBEBEC100

#D7D8D9200

#C1C1C3300

#A7A8AA400

#8E8E90500

#757678600

#5A5B5C700

#414243800

#2A2A2B900

pastelBlue10 steps

#F4F6F950

#E8EBF1100

#D2D9E3200

#B9C2D0300

#9FA9B9400

#848FA0500

#6D7786600

#535B68700

#3C424C800

#262B31900

pastelSkyBlue10 steps

#F1F7FA50

#E2EDF4100

#C9DBE7200

#ADC6D6300

#90ADC0400

#7493A8500

#5E7B8D600

#465E6E700

#334450800

#202C34900

pastelRose10 steps

#F9F4F650

#F2E8ED100

#E4D2DB200

#D2BAC5300

#BB9FAC400

#A28593500

#886D7A600

#6A535E700

#4D3C44800

#32262C900

pastelPurple10 steps

#F9F4F650

#F2E8ED100

#E4D2DB200

#D2BAC5300

#BB9FAC400

#A28593500

#886D7A600

#6A535E700

#4D3C44800

#32262C900

pastelCyan10 steps

#EFF8F850

#DDEFF0100

#BFE0E0200

#9ECCCD300

#7DB4B6400

#609A9C500

#498183600

#356466700

#26494A800

#162F30900

charcoalGrey10 steps

#F5F6F750

#E9EBED100

#D5D8DC200

#BDC2C7300

#A3A9AF400

#8A8F95500

#72777C600

#575B60700

#3F4246800

#282B2D900

tealsGrey10 steps

#F4F6F950

#E8EBF1100

#D3D8E3200

#BBC2D0300

#A1A8B9400

#878FA0500

#6F7686600

#555B68700

#3D424C800

#272A31900

royalBlue10 steps

#F2F6FF50

#E3EBFF100

#C8D8FF200

#A8C0FF300

#88A5F5400

#6D8ADE500

#5771BF600

#415698700

#2F3F6F800

#1D284A900

tealsBlue10 steps

#F2F6FE50

#E4EBFB100

#CCD8F3200

#B1C1E6300

#95A8D3400

#7A8EBB500

#63759F600

#4B5A7D700

#36415B800

#222A3C900

lightNavyBlue10 steps

#F1F6FF50

#E1ECFF100

#C7D9FA200

#AAC2EF300

#8DA9DD400

#728EC5500

#5B76A9600

#445A85700

#314261800

#1F2A40900

greyishBlue10 steps

#F1F6FD50

#E2ECFA100

#C9DAF2200

#ACC3E5300

#8FAAD1400

#7490B8500

#5E789D600

#465C7B700

#33435A800

#202B3B900

fadedBlue10 steps

#F2F6FC50

#E4ECF7100

#CBD9ED200

#B0C3DE300

#94AAC9400

#7990B0500

#627895600

#4A5C75700

#354355800

#222B38900

coralBlue10 steps

#F3F6FA50

#E6ECF4100

#CFD9E7200

#B6C3D6300

#9AAAC0400

#8090A7500

#69778D600

#4F5C6E700

#394250800

#242B34900

forestGreenBright green

#E7FDEB50

#CEFAD5100

#A1F0B1200

#6CE18A300

#27CC65400

#00AF50500

#009242600

#007131700

#005322800

#003614900

goldBright warm gold accent

#FEF8E650

#FDF0CC100

#F6E1A0200

#FCD34D300

#D9B436400

#BF9A00500

#A18100600

#7D6400700

#5C4900800

#3D2F00900

chartreuseVivid yellow-green accent

#F2FBE750

#E4F6CD100

#BEF264200

#B1DA72300

#95C33F400

#7BAA00500

#678E00600

#4F6E00700

#385000800

#243500900

violetTrue violet accent (covers #8A5CFF too)

#F6F4FF50

#EBE8FF100

#D9D1FF200

#C3B5FF300

#AC94FF400

#966DFF500

#8B5CF6600

#633BB6700

#472B86800

#2E1A5A900

aquaBright sky-cyan accent

#ECF8FF50

#D5F0FF100

#AAE1FF200

#74CEFC300

#38BDF8400

#009BD2500

#0081AF600

#006388700

#004864800

#002F43900

Element for data & graphics

Charts and illustrations are the one place more colour earns its keep, since series must be told apart. A categorical set of ten, dark-tuned and ordered so element-1 is the warm brand. Use them in order; stop at the count you need.

Ember #FF7A00Cobalt #5B8CFFEmerald #3FC98AAmber #FFC457Violet #A78BFATeal #34D3C0Rose #F2777BPink #EF8FD0Lime #A9D96BSlate #9AA0A8

For heatmaps and gradients, don't mix hues. Run a single core ramp as a sequential scale (here, Cobalt 900 → 200).

Shadow for depth

On a dark field, depth is mostly a hairline job, so shadows are used sparingly. When they are, the tint is near-black; focus rings are the one warm exception.

shadow-1

0 1px 2px rgba(0,0,0,.35)

shadow-2

0 8px 24px rgba(0,0,0,.42)

shadow-3

0 16px 40px rgba(0,0,0,.5)

shadow-focus

0 0 0 3px rgba(255,122,0,.28)

The one warm rule

Even with a full token system, restraint is the point. Neutral carbon fills almost every screen; the feedback ramps (red, green, amber, blue) show up only as state: an icon tint, a subtle *-surface wash, a *-solid fill. The brand accent spends its warmth once per view. #FF7A00 never shifts, and its label stays near-black #1A0E04 (7.25:1 contrast), never white (2.61:1, which fails).

Contrast guarantees

Pairing	Ratio	Rule
text-secondary on surface	7.0:1	Passes AA for all text
text-muted on surface	4.6:1	AA for meta / secondary
on-accent on accent	7.25:1	Dark label on warm fills
white on accent	2.61:1	Never; use on-accent

Related Components

IntroductionWhat Optimistic is, why it exists, and what's inside.● documented How to UseWhere to start, how the system fits together, and the rules that keep it coherent.● documented TypographyInter for reading, Inter Display for headlines, mono for the machine's voice.● documented