Color System
Design system colors with automatic dark mode support
Brand Colors
Brand 1
var(--color-brand-1)
Brand 2
var(--color-brand-2)
Brand 3
var(--color-brand-3)
Gray Scale
Gray 50
Gray 75
Gray 100
Gray 200
Gray 300
Gray 400
Gray 500
Gray 600
Gray 700
Gray 900
Blue
Blue 50
Blue 100
Blue 400
Blue 500
Blue 600
Blue 900
Green
Green 50
Green 100
Green 400
Green 500
Green 600
Green 900
Red
Red 50
Red 100
Red 400
Red 500
Red 600
Red 900
Yellow
Yellow 50
Yellow 100
Yellow 400
Yellow 500
Yellow 600
Yellow 900
Violet
Violet 50
Violet 100
Violet 400
Violet 500
Violet 600
Violet 900
Text Examples
Primary text (gray-900) - This is the main text color
Secondary text (gray-700) - This is for less important text
Tertiary text (gray-600) - This is for supporting text
Muted text (gray-500) - This is for disabled or muted text
Background Examples
Light Background
bg-gray-50
Lighter Background
bg-gray-100
Medium Background
bg-gray-200