Understanding the scale

Learn which scale step is the most appropriate for each use case.

Use cases

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.

Step	Use Case
1	App background
2	Subtle background
3	UI element background
4	Hovered UI element background
5	Active / Selected UI element background
6	Subtle borders and separators
7	UI element border and focus rings
8	Hovered UI element border
9	Solid backgrounds
10	Hovered solid backgrounds
11	Low-contrast text
12	High-contrast text

Steps 1–2: Backgrounds

Steps 1 and 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:

• Main app background
• Striped table background
• Code block background
• Card background
• Sidebar background
• Canvas area background

Steps 3–5: Component backgrounds

Steps 3, 4, and 5 are designed for UI component backgrounds.

• Step 3 is for normal states.
• Step 4 is for hover states.
• Step 5 is 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.