Colors

All colors are expressed as CSS custom properties. Brand tokens update automatically when the active brand changes.

Brand tokens

These tokens change when you switch between Pepulux (purple) and Omkaarya (orange) brands.

Brand

--brand

#7f56d9

Brand hover

--brand-hover

#6941c6

Brand subtle

--brand-subtle

#f4f0fd

Brand text

--brand-text

#6941c6

Neutral scale

900

--n-900

#101828

800

--n-800

#1d2939

700

--n-700

#344054

600

--n-600

#475467

500

--n-500

#667085

400

--n-400

#98a2b3

300

--n-300

#d0d5dd

200

--n-200

#e4e7ec

100

--n-100

#f2f4f7

--n-50

#f9fafb

Semantic colors

Success

--success

#12b76a

Warning

--warning

#f79009

Error

--error

#f04438

Info

--info

#0ba5ec