Colour

The palette

Five Tailwind-derived ramps stay pure; a small bespoke ink group carries the warm dark-mode UI tones taken from the approved specimens. Semantics map intent onto these per theme.

Primitive scales

Theme-agnostic colour scales (50–950). They never change between light and dark.

emerald

#ecfdf5

100

#d1fae5

200

#a7f3d0

300

#6ee7b7

400

#34d399

500

#10b981

600

#059669

700

#047857

800

#065f46

900

#064e3b

950

#022c22

amber

#fffbeb

100

#fef3c7

200

#fde68a

300

#fcd34d

400

#fbbf24

500

#f59e0b

600

#d97706

700

#b45309

800

#92400e

900

#78350f

950

#451a03

stone

#fafaf9

100

#f5f5f4

200

#e7e5e4

300

#d6d3d1

400

#a8a29e

500

#78716c

600

#57534e

700

#44403c

800

#292524

900

#1c1917

950

#0c0a09

red

#fef2f2

100

#fee2e2

200

#fecaca

300

#fca5a5

400

#f87171

500

#ef4444

600

#dc2626

700

#b91c1c

800

#991b1b

900

#7f1d1d

950

#450a0a

sky

#f0f9ff

100

#e0f2fe

200

#bae6fd

300

#7dd3fc

400

#38bdf8

500

#0ea5e9

600

#0284c7

700

#0369a1

800

#075985

900

#0c4a6e

950

#082f49

functional & bespoke

navy

#1e3a5f

white

#ffffff

ink.surface

#262220

ink.subtle

#211e1c

ink.border

#403b37

ink.on-accent

#06291f

Semantic tokens

The same intent names resolve to a dark scale-step in light mode and a light step in dark mode. Toggle the theme — every chip below repaints live.

text.heading

--od-text-heading

text.body

--od-text-body

text.muted

--od-text-muted

surface.base

--od-surface-base

surface.raised

--od-surface-raised

surface.sunken

--od-surface-sunken

border.default

--od-border-default

accent.default

--od-accent-default

brand.self

--od-brand-self

action.primary.bg

--od-action-primary-bg

link.default

--od-link-default

hero.surface

--od-hero-surface

footer.surface

--od-footer-surface

feedback.success.accent

--od-feedback-success-accent

feedback.warning.accent

--od-feedback-warning-accent

feedback.error.accent

--od-feedback-error-accent

feedback.info.accent

--od-feedback-info-accent