Colors

The color scales

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.

Steps 1–2: Backgrounds

Steps 1 and 2 are designed for our app backgrounds and subtle component backgrounds. We use them interchangeably, depending on the context.

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.

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.

Steps 6–8: Borders

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.

Steps 9–10: Solid backgrounds

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:

• App backgrounds
• Section backgrounds
• Header backgrounds
• Component backgrounds
• Overlays
• Accent borders

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

Steps 11–12: Text

Steps 11 and 12 are designed for text.

• Step 11 is designed for low-contrast text.
• Step 12 is designed for high-contrast text.

UI Colors

Utility classes are available for the UI colors – for background, border, text, and text hover. These do not have shade suffix variations:

• Backgrounds: bg-{colorname} and hover:bg-{colorname}
• Borders: b-{colorname} and hover:b-{colorname}

Text utility classes are based on the Step 11 colors from the scale.

• Text: t-{colorname} and hover:t-{colorname}