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
Value
#fbb514
Primary brand yellow
Name
Brand Green
CSS Variable
--color-brand-green
Value
#188d33
Primary brand green
Name
Brand Cyan
CSS Variable
--color-brand-cyan
Value
#8ee1e7
Primary brand cyan
Name
Brand Red
CSS Variable
--color-brand-red
Value
#fd265c
Primary brand red
Name
Brand Purple
CSS Variable
--color-brand-purple
Value
#b19aca
Primary brand purple
Name
Brand Pink
CSS Variable
--color-brand-pink
Value
#f287b7
Primary brand pink
Name
Brand Black
CSS Variable
--color-brand-black
Value
#003601
Primary brand black
Grayscale
Name
Gray 50
CSS Variable
--color-gray-50
Value
oklch(0.98 0 0)
Name
Gray 100
CSS Variable
--color-gray-100
Value
oklch(0.96 0 0)
Name
Gray 200
CSS Variable
--color-gray-200
Value
oklch(0.92 0 0)
Name
Gray 300
CSS Variable
--color-gray-300
Value
oklch(0.84 0 0)
Name
Gray 400
CSS Variable
--color-gray-400
Value
oklch(0.72 0 0)
Name
Gray 500
CSS Variable
--color-gray-500
Value
oklch(0.6 0 0)
Name
Gray 600
CSS Variable
--color-gray-600
Value
oklch(0.48 0 0)
Name
Gray 700
CSS Variable
--color-gray-700
Value
oklch(0.36 0 0)
Name
Gray 800
CSS Variable
--color-gray-800
Value
oklch(0.24 0 0)
Name
Gray 900
CSS Variable
--color-gray-900
Value
oklch(0.16 0 0)
Name
Gray 950
CSS Variable
--color-gray-950
Value
oklch(0.1 0 0)
Yellow
Name
Yellow 50
CSS Variable
--color-yellow-50
Value
#fffceb
Name
Yellow 100
CSS Variable
--color-yellow-100
Value
#fff8c6
Name
Yellow 200
CSS Variable
--color-yellow-200
Value
#fff087
Name
Yellow 300
CSS Variable
--color-yellow-300
Value
#ffe249
Name
Yellow 400
CSS Variable
--color-yellow-400
Value
#ffd01f
Name
Yellow 500
CSS Variable
--color-yellow-500
Value
#fbb514
Reference to brand yellow
Name
Yellow 600
CSS Variable
--color-yellow-600
Value
#de8601
Name
Yellow 700
CSS Variable
--color-yellow-700
Value
#b85e05
Name
Yellow 800
CSS Variable
--color-yellow-800
Value
#95480b
Name
Yellow 900
CSS Variable
--color-yellow-900
Value
#7b3c0c
Name
Yellow 950
CSS Variable
--color-yellow-950
Value
#471f01
Green
Name
Green 50
CSS Variable
--color-green-50
Value
#eeffed
Name
Green 100
CSS Variable
--color-green-100
Value
#d6ffd6
Name
Green 200
CSS Variable
--color-green-200
Value
#afffaf
Name
Green 300
CSS Variable
--color-green-300
Value
#71ff72
Name
Green 400
CSS Variable
--color-green-400
Value
#2efb2d
Name
Green 500
CSS Variable
--color-green-500
Value
#02e503
Name
Green 600
CSS Variable
--color-green-600
Value
#03bf00
Name
Green 700
CSS Variable
--color-green-700
Value
#188d33
Reference to brand green
Name
Green 800
CSS Variable
--color-green-800
Value
#067507
Name
Green 900
CSS Variable
--color-green-900
Value
#085f0a
Name
Green 950
CSS Variable
--color-green-950
Value
#003601
Reference to brand black
Cyan
Name
Cyan 50
CSS Variable
--color-cyan-50
Value
#effcfc
Name
Cyan 100
CSS Variable
--color-cyan-100
Value
#d6f6f7
Name
Cyan 200
CSS Variable
--color-cyan-200
Value
#b2ecef
Name
Cyan 300
CSS Variable
--color-cyan-300
Value
#8ee1e7
Reference to brand cyan
Name
Cyan 400
CSS Variable
--color-cyan-400
Value
#40c4d0
Name
Cyan 500
CSS Variable
--color-cyan-500
Value
#25a7b5
Name
Cyan 600
CSS Variable
--color-cyan-600
Value
#218899
Name
Cyan 700
CSS Variable
--color-cyan-700
Value
#216e7d
Name
Cyan 800
CSS Variable
--color-cyan-800
Value
#235a67
Name
Cyan 900
CSS Variable
--color-cyan-900
Value
#214c58
Name
Cyan 950
CSS Variable
--color-cyan-950
Value
#11313b
Red
Name
Red 50
CSS Variable
--color-red-50
Value
#fff0f2
Name
Red 100
CSS Variable
--color-red-100
Value
#ffe3e7
Name
Red 200
CSS Variable
--color-red-200
Value
#ffcbd5
Name
Red 300
CSS Variable
--color-red-300
Value
#ffa0b4
Name
Red 400
CSS Variable
--color-red-400
Value
#ff6a8c
Name
Red 500
CSS Variable
--color-red-500
Value
#fd265c
Reference to brand red
Name
Red 600
CSS Variable
--color-red-600
Value
#eb1353
Name
Red 700
CSS Variable
--color-red-700
Value
#c70947
Name
Red 800
CSS Variable
--color-red-800
Value
#a60b42
Name
Red 900
CSS Variable
--color-red-900
Value
#8e0d3f
Name
Red 950
CSS Variable
--color-red-950
Value
#50011d
Purple
Name
Purple 50
CSS Variable
--color-purple-50
Value
#f9f7fb
Name
Purple 100
CSS Variable
--color-purple-100
Value
#f2f0f7
Name
Purple 200
CSS Variable
--color-purple-200
Value
#e7e3f1
Name
Purple 300
CSS Variable
--color-purple-300
Value
#d7cce6
Name
Purple 400
CSS Variable
--color-purple-400
Value
#c0afd6
Name
Purple 500
CSS Variable
--color-purple-500
Value
#b19aca
Reference to brand purple
Name
Purple 600
CSS Variable
--color-purple-600
Value
#9674b3
Name
Purple 700
CSS Variable
--color-purple-700
Value
#85629f
Name
Purple 800
CSS Variable
--color-purple-800
Value
#6f5285
Name
Purple 900
CSS Variable
--color-purple-900
Value
#5b446e
Name
Purple 950
CSS Variable
--color-purple-950
Value
#3b2c49
Pink
Name
Pink 50
CSS Variable
--color-pink-50
Value
#fdf2f7
Name
Pink 100
CSS Variable
--color-pink-100
Value
#fbe8f2
Name
Pink 200
CSS Variable
--color-pink-200
Value
#fad0e5
Name
Pink 300
CSS Variable
--color-pink-300
Value
#f7aace
Name
Pink 400
CSS Variable
--color-pink-400
Value
#f287b7
Reference to brand pink
Name
Pink 500
CSS Variable
--color-pink-500
Value
#e74d8e
Name
Pink 600
CSS Variable
--color-pink-600
Value
#d62c6b
Name
Pink 700
CSS Variable
--color-pink-700
Value
#b91d52
Name
Pink 800
CSS Variable
--color-pink-800
Value
#991b45
Name
Pink 900
CSS Variable
--color-pink-900
Value
#801b3c
Name
Pink 950
CSS Variable
--color-pink-950
Value
#4e091f