Learn which scale step is the most appropriate for each use case.
There are 12 steps in each scale. Each step was designed for at least one specific use case.
This table is a simple overview of the most common use case for each step. However, there are many exceptions and caveats to factor in, which are covered in further detail below.
UI element background
Hovered UI element background
Active / Selected UI element background
Subtle borders and separators
UI element border and focus rings
Hovered UI element border
Hovered solid backgrounds
2 are designed for app backgrounds and subtle component backgrounds. You can use them interchangeably, depending on the vibe you're going for.
Appropriate applications include:
5 are designed for UI component backgrounds.
3is for normal states.
4is for hover states.
5is for pressed or selected states.
If your component has a transparent background in its default state, you can use Step
3 for its hover state.
8 are designed for borders.
6is designed for subtle borders on components which are not interactive. For example sidebars, headers, cards, alerts, and separators.
7is designed for subtle borders on interactive components.
8is designed for stronger borders on interactive components and focus rings.
10 are designed for solid backgrounds.
9 has the highest chroma of all steps in the scale. In other words, it's the purest step, the step mixed with the least amount of white or black. Because
9 is the purest step, it has a wide range of applications:
10 is designed for component hover states, where step
9 is the component's normal state background.
12 are designed for text.
11is designed for low-contrast text.
12is designed for high-contrast text.