Colors

The full color system from the ADEK Core Variables file. Brand blue #003CFF drives buttons, focus rings, links, and selected states; the utility scales drive badges and status UI. All values are exposed as CSS custom properties in tokens.css (e.g. var(--brand-500), var(--utility-error-50)).

Brand

brand-50

#ccd8ff

brand-200

#99b1ff

brand-400

#3363ff

brand-500

#003cff

brand-600

#0030cc

brand-700

#002499

Gray (text & borders)

gray-50

#fafafa

gray-200

#e9eaeb

border-primary

#d5d7da

gray-400

#a4a7ae

gray-500

#717680

text-tertiary-600

#535862

text-secondary-700

#414651

text-primary-900

#181d27

bg-primary-solid

#0a0d12

Error

error-50

#fef3f2

error-200

#fecdca

error-400

#f97066

error-500

#f04438

error-600

#d92d20

error-700

#b42318

Warning

warning-50

#fffaeb

warning-200

#fedf89

warning-400

#fdb022

warning-500

#f79009

warning-600

#dc6803

warning-700

#b54708

Success

success-50

#ecfdf3

success-200

#abefc6

success-400

#47cd89

success-500

#17b26a

success-600

#079455

success-700

#067647

Gray blue

gray-blue-50

#f8f9fc

gray-blue-200

#d5d9eb

gray-blue-400

#717bbc

gray-blue-500

#4e5ba6

gray-blue-700

#363f72

Blue light

blue-light-50

#f0f9ff

blue-light-200

#b9e6fe

blue-light-400

#36bffa

blue-light-500

#0ba5ec

blue-light-700

#026aa2

Blue

blue-50

#eff8ff

blue-200

#b2ddff

blue-400

#53b1fd

blue-500

#2e90fa

blue-700

#175cd3

Indigo

indigo-50

#eef4ff

indigo-200

#c7d7fe

indigo-400

#8098f9

indigo-500

#6172f3

indigo-700

#3538cd

Purple

purple-50

#f4f3ff

purple-200

#d9d6fe

purple-400

#9b8afb

purple-500

#7a5af8

purple-700

#5925dc

Pink

pink-50

#fdf2fa

pink-200

#fcceee

pink-400

#f670c7

pink-500

#ee46bc

pink-700

#c11574

Orange

orange-50

#fef6ee

orange-200

#f9dbaf

orange-400

#f38744

orange-500

#ef6820

orange-700

#b93815