Foundations / Color

Color

Two tiers. Base tokens are the raw palette, never used directly. Alias tokens describe intent and reference a base token, so the whole UI reskins by repointing aliases.

Base · Primitive

blue · 50 to 900

#EFF6FF

100

#DBEAFE

200

#BFDBFE

300

#93C5FD

400

#60A5FA

500

#3B82F6

600

#2563EB

700

#1D4ED8

800

#1E40AF

900

#1E3A8A

neutral · 0 (white) to 1000 (black)

#FFFFFF

#F7F7F7

100

#E8E8E8

200

#D1D1D1

300

#B0B0B0

400

#878787

500

#6E6E6E

600

#545454

700

#3D3D3D

800

#262626

900

#141414

1000

#000000

Alias · Semantic

Brand

--brand

→ blue 500

Text

Text / Primary

--text-primary

→ gray 0

Text / Secondary

--text-secondary

→ gray 100

Text / Tertiary

--text-tertiary

→ gray 400

Background

Background / Primary

--background-primary

→ gray 900

Background / Secondary

--background-secondary

→ gray 800

Border

Border / Default

--border-default

→ gray 800

Border / Dark

--border-dark

→ gray 700