Semantic · Neutrals

Neutrals

Drawn from Tailwind slate. Brand guideline stops (#FFFFFF · #FAFAFA · #F5F5F5 · #717680) fall on the slate/neutral ramp — no parallel brand-gray required.

Surface & ink

Full ramp from page surface down to ink.

surface#FFFFFF

subtle · 50#F8FAFC

muted · 100#F1F5F9

border · 200#E2E8F0

border+ · 300#CBD5E1

placeholder · 400#94A3B8

ink-subtle · 500#64748B

ink-muted · 600#475569

ink · 900#0F172A

Role map

Which alias each stop fills. Components reference aliases; the ramp is the source of truth.

--color-surface#ffffff

--color-surface-subtleslate-50

--color-surface-mutedslate-100

--color-borderslate-200

--color-border-strongslate-300

--color-ink-placeholderslate-400

--color-ink-subtleslate-500

--color-ink-mutedslate-600

--color-inkslate-900

Aliases

Components consume these — never raw slate classes.

--color-surface:         #ffffff;
--color-surface-subtle:  #F8FAFC;
--color-surface-muted:   #F1F5F9;
--color-border:          #E2E8F0;
--color-border-strong:   #CBD5E1;
--color-ink:             #0F172A;
--color-ink-muted:       #475569;
--color-ink-subtle:      #64748B;
--color-ink-placeholder: #94A3B8;