Understanding the scale

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.

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

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

3
4
5

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.

Menu item
Second menu item
Third menu item
Menu item
Second menu item
Third menu item

Even if your component has a transparent background in its default state, you should skip Step 3 and use Step 4 for its hover state.

For call-to-action components that you want to draw particular attention to, you can bump each color one step higher to steps 4, 5, and 6.

Tomato
Red
Crimson
Pink
Plum
Purple
Violet
Indigo
Blue
Sky
Cyan
Teal
Mint
Green
Grass
Lime
Yellow
Amber
Orange

For complex components where you need many subtle colors to communicate different meanings, you can get creative and do something like:

  • Step 3 for hovered backgrounds.

  • Step 4 for selected / pressed backgrounds.

  • Step 5 for "unread" backgrounds.

  • Step 6 for hovered "unread" backgrounds.

New unread email
Selected email
Email menu item
Email menu item
6
7
8

Steps 6, 7, and 8 are designed for borders.

  • Step 6 is designed for subtle borders on components which are not interactive. For example sidebars, headers, cards, alerts, and separators.

  • Step 7 is designed for borders on interactive components, but can also be used for focus rings.

  • Step 8 is designed for borders on interactive components in their hover state.

Tomato
Red
Crimson
Pink
Plum
Purple
Violet
Indigo
Blue
Sky
Cyan
Teal
Mint
Green
Grass
Lime
Yellow
Amber
Orange
9
10

Steps 9 and 10 are designed for solid backgrounds.

Step 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:

  • Website/App backgrounds

  • Website section backgrounds

  • Header backgrounds

  • Component backgrounds

  • Graphics/Logos

  • Overlays

  • Coloured shadows

  • Accent borders

Step 10 is designed for component hover states, where step 9 is the component's normal state background.

Tomato
Red
Crimson
Pink
Plum
Purple
Violet
Indigo
Blue
Sky
Cyan
Teal
Mint
Green
Grass
Lime
Yellow
Amber
Orange
11
12

Steps 11 and 12 are designed for text.

  • Step 11 is designed for low-contrast text.

  • Step 12 is designed for high-contrast text.

This text is Gray12This text is Gray11This text is Slate12This text is Slate11This text is Blue12This text is Blue11