Color
Our color system is built on CSS variables defined in globals.css. Each color family includes brand colors and multiple shades for maximum flexibility.
Brand colors
Name
Brand Yellow
CSS variable
--color-brand-yellow
Name
Brand Green
CSS variable
--color-brand-green
Name
Brand Cyan
CSS variable
--color-brand-cyan
Name
Brand Red
CSS variable
--color-brand-red
Name
Brand Purple
CSS variable
--color-brand-purple
Name
Brand Pink
CSS variable
--color-brand-pink
Name
Brand Black
CSS variable
--color-brand-black
gray
Name
gray 50
CSS variable
--color-gray-50
Name
gray 100
CSS variable
--color-gray-100
Name
gray 200
CSS variable
--color-gray-200
Name
gray 300
CSS variable
--color-gray-300
Name
gray 400
CSS variable
--color-gray-400
Name
gray 500
CSS variable
--color-gray-500
Name
gray 600
CSS variable
--color-gray-600
Name
gray 700
CSS variable
--color-gray-700
Name
gray 800
CSS variable
--color-gray-800
Name
gray 900
CSS variable
--color-gray-900
Name
gray 950
CSS variable
--color-gray-950
yellow
Name
yellow 50
CSS variable
--color-yellow-50
Name
yellow 100
CSS variable
--color-yellow-100
Name
yellow 200
CSS variable
--color-yellow-200
Name
yellow 300
CSS variable
--color-yellow-300
Name
yellow 400
CSS variable
--color-yellow-400
Name
yellow 500
CSS variable
--color-yellow-500
Name
yellow 600
CSS variable
--color-yellow-600
Name
yellow 700
CSS variable
--color-yellow-700
Name
yellow 800
CSS variable
--color-yellow-800
Name
yellow 900
CSS variable
--color-yellow-900
Name
yellow 950
CSS variable
--color-yellow-950
green
Name
green 50
CSS variable
--color-green-50
Name
green 100
CSS variable
--color-green-100
Name
green 200
CSS variable
--color-green-200
Name
green 300
CSS variable
--color-green-300
Name
green 400
CSS variable
--color-green-400
Name
green 500
CSS variable
--color-green-500
Name
green 600
CSS variable
--color-green-600
Name
green 700
CSS variable
--color-green-700
Name
green 800
CSS variable
--color-green-800
Name
green 900
CSS variable
--color-green-900
Name
green 950
CSS variable
--color-green-950
cyan
Name
cyan 50
CSS variable
--color-cyan-50
Name
cyan 100
CSS variable
--color-cyan-100
Name
cyan 200
CSS variable
--color-cyan-200
Name
cyan 300
CSS variable
--color-cyan-300
Name
cyan 400
CSS variable
--color-cyan-400
Name
cyan 500
CSS variable
--color-cyan-500
Name
cyan 600
CSS variable
--color-cyan-600
Name
cyan 700
CSS variable
--color-cyan-700
Name
cyan 800
CSS variable
--color-cyan-800
Name
cyan 900
CSS variable
--color-cyan-900
Name
cyan 950
CSS variable
--color-cyan-950
red
Name
red 50
CSS variable
--color-red-50
Name
red 100
CSS variable
--color-red-100
Name
red 200
CSS variable
--color-red-200
Name
red 300
CSS variable
--color-red-300
Name
red 400
CSS variable
--color-red-400
Name
red 500
CSS variable
--color-red-500
Name
red 600
CSS variable
--color-red-600
Name
red 700
CSS variable
--color-red-700
Name
red 800
CSS variable
--color-red-800
Name
red 900
CSS variable
--color-red-900
Name
red 950
CSS variable
--color-red-950
purple
Name
purple 50
CSS variable
--color-purple-50
Name
purple 100
CSS variable
--color-purple-100
Name
purple 200
CSS variable
--color-purple-200
Name
purple 300
CSS variable
--color-purple-300
Name
purple 400
CSS variable
--color-purple-400
Name
purple 500
CSS variable
--color-purple-500
Name
purple 600
CSS variable
--color-purple-600
Name
purple 700
CSS variable
--color-purple-700
Name
purple 800
CSS variable
--color-purple-800
Name
purple 900
CSS variable
--color-purple-900
Name
purple 950
CSS variable
--color-purple-950
pink
Name
pink 50
CSS variable
--color-pink-50
Name
pink 100
CSS variable
--color-pink-100
Name
pink 200
CSS variable
--color-pink-200
Name
pink 300
CSS variable
--color-pink-300
Name
pink 400
CSS variable
--color-pink-400
Name
pink 500
CSS variable
--color-pink-500
Name
pink 600
CSS variable
--color-pink-600
Name
pink 700
CSS variable
--color-pink-700
Name
pink 800
CSS variable
--color-pink-800
Name
pink 900
CSS variable
--color-pink-900
Name
pink 950
CSS variable
--color-pink-950