Colors

Light-mode-first, slate-on-white. Brand neutral is a cool slate ramp; gray is warm and used for backgrounds and borders. Stat-card hues are domain-locked — never swap them.

Brand — slate

#fcfcfd

#f8fafc

100

#eef2f6

200

#e3e8ef

300

#cdd5df

400

#9aa4b2

500

#697586

600

#4b5565

700

#364152

800

#202939

900

#121926

Gray

#fcfcfd

#f9fafb

100

#f2f4f7

200

#e4e7ec

300

#d0d5dd

400

#98a2b3

500

#667085

600

#475467

700

#344054

800

#182230

900

#101828

Blue — primary accent (charts, links, focus)

#f5faff

#eff8ff

100

#d1e9ff

200

#b2ddff

300

#84caff

400

#53b1fd

500

#2e90fa

600

#1570ef

700

#175cd3

800

#1849a9

900

#194185

Semantic — error

#fffbfa

#fef3f2

100

#fee4e2

200

#fecdca

300

#fda29b

400

#f97066

500

#f04438

600

#d92d20

700

#b42318

Semantic — warning

#fffcf5

#fffaeb

100

#fef0c7

200

#fedf89

300

#fec84b

400

#fdb022

500

#f79009

600

#dc6803

700

#b54708

Semantic — success

#f6fef9

#ecfdf3

100

#dcfae6

200

#abefc6

300

#75e0a7

400

#47cd89

500

#17b26a

600

#079455

700

#067647

Domain-paired stat-card hues

Programs

Assessments

560

Modules

780

Actions

320

Semantic surface tokens

Backgrounds

Primary

#ffffff

Secondary

#f9fafb

Tertiary

#f2f4f7

Brand solid

#354152

Borders

Primary

#d0d5dd

Secondary

#e4e7ec

Tertiary

#f2f4f7

Brand

#697485