Color

The color system is built on a set of well-defined palettes. Each palette has 11 shades (25 – 900), giving you fine-grained control over every surface, text, and interactive element. Semantic colors (brand, error, warning, success) are role-specific subsets; the remaining groups cover the full visible spectrum.

Semantic colors

Role-specific palettes that carry consistent meaning throughout the UI. Each semantic color maps to a hue family and should be used only for its intended purpose.

Brand

The brand color is your "primary" color, used across all interactive elements such as buttons, links, inputs, etc. Maps to the purple family.

#FCFAFF

#F9F5FF

100

#F4EBFF

200

#E9D7FE

300

#D6BBFB

400

#B692F6

500

#9E77ED

600

#7F56D9

700

#6941C6

800

#53389E

900

#42307D

Error

Error colors are used across error states and "destructive" actions. They communicate a negative action, such as removing a user from your team.

#FFFBFA

#FEF3F2

100

#FEE4E2

200

#FECDCA

300

#FDA29B

400

#F97066

500

#F04438

600

#D92D20

700

#B42318

800

#912018

900

#7A271A

Warning

Warning colors communicate that an action is potentially destructive or on-hold. Commonly used in confirmations to grab the user's attention.

#FFFCF5

#FFFAEB

100

#FEF0C7

200

#FEDF89

300

#FEC84B

400

#FDB022

500

#F79009

600

#DC6803

700

#B54708

800

#93370D

900

#7A2E0E

Success

Success colors communicate a positive action, positive trend, or a successful confirmation.

#F6FEF9

#ECFDF3

100

#D1FADF

200

#A6F4C5

300

#6CE9A6

400

#32D583

500

#12B76A

600

#039855

700

#027A48

800

#05603A

900

#054F31

Neutrals

Neutral palettes underpin text, surfaces, borders, and backgrounds. Gray is the primary neutral; slate, zinc, and stone offer warmer or cooler alternatives.

Gray

Gray is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.

#FDFDFD

#FAFAFA

100

#F5F5F5

200

#E9EAEB

300

#D5D7DA

400

#A4A7AE

500

#717680

600

#535862

700

#414651

800

#252B37

900

#101828

Slate

#FCFCFE

#F8FAFC

100

#F1F5F9

200

#E2E8F0

300

#CBD5E1

400

#94A3B8

500

#64748B

600

#475569

700

#334155

800

#1E293B

900

#0F172A

Zinc

#FAFAFB

#FAFAFA

100

#F4F4F5

200

#E4E4E7

300

#D4D4D8

400

#A1A1AA

500

#71717A

600

#52525B

700

#3F3F46

800

#27272A

900

#18181B

Stone

#FAFAF9

100

#F5F5F4

200

#E7E5E4

300

#D6D3D1

400

#A8A29E

500

#78716C

600

#57534E

700

#44403C

800

#292524

900

#1C1917

Reds & oranges

Warm hues spanning red through yellow. Use sparingly for accents, labels, and decorative UI elements.

Red

#FFF5F5

#FEF2F2

100

#FEE2E2

200

#FECACA

300

#FCA5A5

400

#F87171

500

#EF4444

600

#DC2626

700

#B91C1C

800

#991B1B

900

#7F1D1D

Orange

#FFFAF5

#FFF6ED

100

#FFEAD5

200

#FDDCAB

300

#FEB273

400

#FD853A

500

#FB6514

600

#EC4A0A

700

#C4320A

800

#9C2A10

900

#7E2410

Amber

#FFFDF5

#FFFBEB

100

#FEF3C7

200

#FDE68A

300

#FCD34D

400

#FBBF24

500

#F59E0B

600

#D97706

700

#B45309

800

#92400E

900

#78350F

Yellow

#FEFEF2

#FEFCE8

100

#FEF9C3

200

#FEF08A

300

#FDE047

400

#FACC15

500

#EAB308

600

#CA8A04

700

#A16207

800

#854D0E

900

#713F12

Greens

Cool greens ranging from yellow-green limes to deep teals. Useful for status badges, data-vis, and illustrative elements.

Lime

#FBFFE7

#F7FEE7

100

#ECFCCB

200

#D9F99D

300

#BEF264

400

#A3E635

500

#84CC16

600

#65A30D

700

#4D7C0F

800

#3F6212

900

#365314

Green

#F2FDF5

#F0FDF4

100

#DCFCE7

200

#BBF7D0

300

#86EFAC

400

#4ADE80

500

#22C55E

600

#16A34A

700

#15803D

800

#166534

900

#14532D

Emerald

#F3FDF8

#ECFDF5

100

#D1FAE5

200

#A7F3D0

300

#6EE7B7

400

#34D399

500

#10B981

600

#059669

700

#047857

800

#065F46

900

#064E3B

Teal

#F0FCFB

#F0FDFA

100

#CCFBF1

200

#99F6E4

300

#5EEAD4

400

#2DD4BF

500

#14B8A6

600

#0D9488

700

#0F766E

800

#115E59

900

#134E4A

Blues

The full blue spectrum from sky cyan to slate blue-gray. Versatile for interactive states, info badges, and data visualization.

Cyan

#F0FEFF

#ECFEFF

100

#CFFAFE

200

#A5F3FC

300

#67E8F9

400

#22D3EE

500

#06B6D4

600

#0891B2

700

#0E7490

800

#155E75

900

#164E63

Blue light

#F5FBFF

#F0F9FF

100

#E0F2FE

200

#B9E6FE

300

#7CD4FD

400

#36BFFA

500

#0BA5EC

600

#0086C9

700

#026AA2

800

#065986

900

#0B4A6F

Blue

#F5FAFF

#EFF8FF

100

#D1E9FF

200

#B2DDFF

300

#84CAFF

400

#53B1FD

500

#2E90FA

600

#1570EF

700

#175CD3

800

#1849A9

900

#194185

Blue gray

#FCFCFD

#F8F9FC

100

#EAECF5

200

#D5D9EB

300

#AFB5D9

400

#717BBC

500

#4E5BA6

600

#3E4784

700

#363F72

800

#293056

900

#101323

Purples & pinks

Purples and pinks from violet through rose. Great for accents, creative UI, and decorative components.

Indigo

#F5F8FF

#EEF4FF

100

#E0EAFF

200

#C7D7FE

300

#A4BCFD

400

#8098F9

500

#6172F3

600

#444CE7

700

#3538CD

800

#2D31A6

900

#2D3282

Violet

#FAFAFF

#F5F3FF

100

#EDE9FE

200

#DDD6FE

300

#C4B5FD

400

#A78BFA

500

#8B5CF6

600

#7C3AED

700

#6D28D9

800

#5B21B6

900

#4C1D95

Purple

#FAFAFF

#F4F3FF

100

#EBE9FE

200

#D9D6FE

300

#BDB4FE

400

#9B8AFB

500

#7A5AF8

600

#6938EF

700

#5925DC

800

#4A1FB8

900

#3E1C96

Fuchsia

#FEF8FF

#FDF4FF

100

#FAE8FF

200

#F5D0FE

300

#F0ABFC

400

#E879F9

500

#D946EF

600

#C026D3

700

#A21CAF

800

#86198F

900

#701A75

Pink

#FEF6FB

#FDF2FA

100

#FCE7F6

200

#FCCEEE

300

#FAA7E0

400

#F670C7

500

#EE46BC

600

#DD2590

700

#C11574

800

#9E165F

900

#851651

Rose

#FFF5F6

#FFF1F3

100

#FFE4E8

200

#FECDD6

300

#FEA3B4

400

#FD6F8E

500

#F63D68

600

#E31B54

700

#C01048

800

#A11043

900

#89123E