colors
Learn how to use our color system. Hover over each color to view the corresponding colors.
size
There are 10 color scales in the system. P3 colors are used on supported browsers and displays.
background
- bg-kui-light-bg rounded dark:bg-kui-dark-bg
- bg-kui-light-bg-secondary dark:bg-kui-dark-bg-secondary
gray
- bg-kui-light-gray-100 dark:bg-kui-dark-gray-100
- bg-kui-light-gray-200 dark:bg-kui-dark-gray-200
- bg-kui-light-gray-300 dark:bg-kui-dark-gray-300
- bg-kui-light-gray-400 dark:bg-kui-dark-gray-400
- bg-kui-light-gray-500 dark:bg-kui-dark-gray-500
- bg-kui-light-gray-600 dark:bg-kui-dark-gray-600
- bg-kui-light-gray-700 dark:bg-kui-dark-gray-700
- bg-kui-light-gray-800 dark:bg-kui-dark-gray-800
- bg-kui-light-gray-900 dark:bg-kui-dark-gray-900
- bg-kui-light-gray-1000 dark:bg-kui-dark-gray-1000
gray alpha
- bg-kui-light-gray-alpha-100 dark:bg-kui-dark-gray-alpha-100
- bg-kui-light-gray-alpha-200 dark:bg-kui-dark-gray-alpha-200
- bg-kui-light-gray-alpha-300 dark:bg-kui-dark-gray-alpha-300
- bg-kui-light-gray-alpha-400 dark:bg-kui-dark-gray-alpha-400
- bg-kui-light-gray-alpha-500 dark:bg-kui-dark-gray-alpha-500
- bg-kui-light-gray-alpha-600 dark:bg-kui-dark-gray-alpha-600
- bg-kui-light-gray-alpha-700 dark:bg-kui-dark-gray-alpha-700
- bg-kui-light-gray-alpha-800 dark:bg-kui-dark-gray-alpha-800
- bg-kui-light-gray-alpha-900 dark:bg-kui-dark-gray-alpha-900
- bg-kui-light-gray-alpha-1000 dark:bg-kui-dark-gray-alpha-1000
blue
- bg-kui-light-blue-100 dark:bg-kui-dark-blue-100
- bg-kui-light-blue-200 dark:bg-kui-dark-blue-200
- bg-kui-light-blue-300 dark:bg-kui-dark-blue-300
- bg-kui-light-blue-400 dark:bg-kui-dark-blue-400
- bg-kui-light-blue-500 dark:bg-kui-dark-blue-500
- bg-kui-light-blue-600 dark:bg-kui-dark-blue-600
- bg-kui-light-blue-700 dark:bg-kui-dark-blue-700
- bg-kui-light-blue-800 dark:bg-kui-dark-blue-800
- bg-kui-light-blue-900 dark:bg-kui-dark-blue-900
- bg-kui-light-blue-1000 dark:bg-kui-dark-blue-1000
red
- bg-kui-light-red-100 dark:bg-kui-dark-red-100
- bg-kui-light-red-200 dark:bg-kui-dark-red-200
- bg-kui-light-red-300 dark:bg-kui-dark-red-300
- bg-kui-light-red-400 dark:bg-kui-dark-red-400
- bg-kui-light-red-500 dark:bg-kui-dark-red-500
- bg-kui-light-red-600 dark:bg-kui-dark-red-600
- bg-kui-light-red-700 dark:bg-kui-dark-red-700
- bg-kui-light-red-800 dark:bg-kui-dark-red-800
- bg-kui-light-red-900 dark:bg-kui-dark-red-900
- bg-kui-light-red-1000 dark:bg-kui-dark-red-1000
amber
- bg-kui-light-amber-100 dark:bg-kui-dark-amber-100
- bg-kui-light-amber-200 dark:bg-kui-dark-amber-200
- bg-kui-light-amber-300 dark:bg-kui-dark-amber-300
- bg-kui-light-amber-400 dark:bg-kui-dark-amber-400
- bg-kui-light-amber-500 dark:bg-kui-dark-amber-500
- bg-kui-light-amber-600 dark:bg-kui-dark-amber-600
- bg-kui-light-amber-700 dark:bg-kui-dark-amber-700
- bg-kui-light-amber-800 dark:bg-kui-dark-amber-800
- bg-kui-light-amber-900 dark:bg-kui-dark-amber-900
- bg-kui-light-amber-1000 dark:bg-kui-dark-amber-1000
green
- bg-kui-light-green-100 dark:bg-kui-dark-green-100
- bg-kui-light-green-200 dark:bg-kui-dark-green-200
- bg-kui-light-green-300 dark:bg-kui-dark-green-300
- bg-kui-light-green-400 dark:bg-kui-dark-green-400
- bg-kui-light-green-500 dark:bg-kui-dark-green-500
- bg-kui-light-green-600 dark:bg-kui-dark-green-600
- bg-kui-light-green-700 dark:bg-kui-dark-green-700
- bg-kui-light-green-800 dark:bg-kui-dark-green-800
- bg-kui-light-green-900 dark:bg-kui-dark-green-900
- bg-kui-light-green-1000 dark:bg-kui-dark-green-1000
teal
- bg-kui-light-teal-100 dark:bg-kui-dark-teal-100
- bg-kui-light-teal-200 dark:bg-kui-dark-teal-200
- bg-kui-light-teal-300 dark:bg-kui-dark-teal-300
- bg-kui-light-teal-400 dark:bg-kui-dark-teal-400
- bg-kui-light-teal-500 dark:bg-kui-dark-teal-500
- bg-kui-light-teal-600 dark:bg-kui-dark-teal-600
- bg-kui-light-teal-700 dark:bg-kui-dark-teal-700
- bg-kui-light-teal-800 dark:bg-kui-dark-teal-800
- bg-kui-light-teal-900 dark:bg-kui-dark-teal-900
- bg-kui-light-teal-1000 dark:bg-kui-dark-teal-1000
purple
- bg-kui-light-purple-100 dark:bg-kui-dark-purple-100
- bg-kui-light-purple-200 dark:bg-kui-dark-purple-200
- bg-kui-light-purple-300 dark:bg-kui-dark-purple-300
- bg-kui-light-purple-400 dark:bg-kui-dark-purple-400
- bg-kui-light-purple-500 dark:bg-kui-dark-purple-500
- bg-kui-light-purple-600 dark:bg-kui-dark-purple-600
- bg-kui-light-purple-700 dark:bg-kui-dark-purple-700
- bg-kui-light-purple-800 dark:bg-kui-dark-purple-800
- bg-kui-light-purple-900 dark:bg-kui-dark-purple-900
- bg-kui-light-purple-1000 dark:bg-kui-dark-purple-1000
pink
- bg-kui-light-pink-100 dark:bg-kui-dark-pink-100
- bg-kui-light-pink-200 dark:bg-kui-dark-pink-200
- bg-kui-light-pink-300 dark:bg-kui-dark-pink-300
- bg-kui-light-pink-400 dark:bg-kui-dark-pink-400
- bg-kui-light-pink-500 dark:bg-kui-dark-pink-500
- bg-kui-light-pink-600 dark:bg-kui-dark-pink-600
- bg-kui-light-pink-700 dark:bg-kui-dark-pink-700
- bg-kui-light-pink-800 dark:bg-kui-dark-pink-800
- bg-kui-light-pink-900 dark:bg-kui-dark-pink-900
- bg-kui-light-pink-1000 dark:bg-kui-dark-pink-1000
Backgrounds
There are two background colors for pages and UI components. In most instances, you should use Background 1—especially when color is being placed on top of the background. Background 2 should be used sparingly when a subtle background differentiation is needed.
bg-kui-light-bg dark:bg-kui-dark-bg
Background 1
Default element background
bg-kui-light-bg-secondary dark:bg-kui-dark-bg-secondary
Background 2
Secondary background
1
2
1
2
Colors 1–3: Component Backgrounds
These three colors are designed for UI component backgrounds.
bg-kui-light-gray-100 dark:bg-kui-dark-gray-100
Color 1
Default background
bg-kui-light-gray-200 dark:bg-kui-dark-gray-200
Color 2
Hover background
bg-kui-light-gray-300 dark:bg-kui-dark-gray-300
Color 3
Active background
If your UI component’s default background is Background 1, you can use Color 1 as your hover background and Color 2 as your active background. On smaller UI elements like badges, you can use Color 2 or Color 3 as the background.
Colors 4-6: Borders
These three colors are designed for UI component borders.
border-kui-light-gray-400 dark:border-kui-dark-gray-400
Color 4
Default border
border-kui-light-gray-500 dark:border-kui-dark-gray-500
Color 5
Hover border
border-kui-light-gray-600 dark:border-kui-dark-gray-600
Color 6
Active border
Colors 7-8: High Contrast Backgrounds
These two colors are designed for high contrast UI component backgrounds.
border-kui-light-gray-700 dark:border-kui-dark-gray-700
Color 7
High contrast background
border-kui-light-gray-800 dark:border-kui-dark-gray-800
Color 8
Hover high contrast background
Colors 9-10: Text and Icons
These two colors are designed for accessible text and icons.
border-kui-light-gray-900 dark:border-kui-dark-gray-700
Color 9
Secondary text and icons
border-kui-light-gray-1000 dark:border-kui-dark-gray-1000
Color 10
Primary text and icons