Colors
Learn how to work with our color system.
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
Secondary background
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
90
55
20
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
Was this helpful?