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
Choose gray or gray-alpha
- Gray for text, icons, fills, borders, and dividers by default.
- Gray-alpha only when the background should show through, such as in shadows or overlays.
Draw each border once
Your deployment will be ready shortly.
DoKeep the divider inside the border.
Your deployment will be ready shortly.
AvoidOverlapping alpha borders make intersections stand out.
Keep material shadows translucent
Production
docs.example.com
Deployed 2m ago
DoTransparent shadows blend with the background.
Production
docs.example.com
Deployed 2m ago
AvoidOpaque shadows leave a gray halo.
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 define default, hover, and active border strength. Use solid gray by default. Use the matching gray-alpha step only when the edge needs to blend with its surface.
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
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?