Colors
Learn how to work with our color system. Right click to copy raw values.
Scales
There are 10 color scales in the system. P3 colors are used on supported browsers and displays.
Backgrounds
Gray
Gray alpha
Blue
Red
Amber
Green
Teal
Purple
Pink
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.
- Background 1
- Default element background
- Background 2
- Default element background
1
2
1
2
Colors 1-3: Component Backgrounds
These three colors are designed for UI component backgrounds.
- Color 1
- Default background
- Color 2
- Hover background
- Color 3
- Active background
If your UI component's default background is Background 1, you can used 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.
-
APR 26 15:54:21.12
/dashboard/overview
-
APR 26 15:54:21.12
/dashboard/overview
-
APR 26 15:54:21.12
/dashboard/overview
-
APR 26 15:54:21.12
/dashboard/overview
Colors 4-6: Borders
These three colors are designed for UI component borders.
- Color 4
- Default border
- Color 5
- Hover border
- Color 6
- Active border
Colors 7-8: High Contrast Backgrounds
These two colors are designed for high contrast UI component backgrounds.
- Color 7
- High contrast background
- Color 8
- Hover high contrast background
0
0
0
Colors 9-10: Text And Icons
These two colors are designed for accessible text and icons.
- Color 9
- Secondary text and icons
- Color 10
- Primary text and icons