Components

Design
Code
keyboardshortcuts
d
Design
c
Code
,
Previous Section
.
Next Section
/
Toggle Preview Environment
[
Previous Platform
]
Next Platform
command +
Scroll to Top
command +
Scroll to Bottom

Apply a system of color treatments to group elements.

Levels allow you to segment your interface in a given environment and control the contrast relationships between those regions. By using levels, many decisions about foreground, background and accessibility are handled for you.

Type

Base

Use level base colors to segment a layout.

Base

Level 0: For primary content. It’s the most dominant region because it provides the most potential contrast in either environment.

Accent

Use the accent color only on its respective base color.

Base
Accent

Usage

How to Use

Start with Level 0 and build up one level at a time.

Primary Region

The primary region of the screen should be Level 0, even if that region is in the middle of the screen.

themes-levels-dont

Don'tuse higher levels for primary content regions.

themes-levels-do

Douse Level 0 for primary content regions.

Levels and Layering

Levels are background colors for two-dimensional regions on the same plane as their peers — they do not cast shadows by default. See our layering guidelines for more on shadows.

themes-layers-dont

Don'tadd shadows to regions unless the element is layered.

themes-layers-do

Dokeep levels on the same elevation.

Base and Accents

Each level has one accent color. An accent color should only be used with its respective base color.

themes-matchingaccents-dont

Don'tpick accents from any level.

themes-matchingaccents-do

Douse the accent matching the region’s base color.

Visual Enhancements

Accents should only be used for subtle graphics like fine lines or small regions.

themes-accents-dont

Don'tuse accents as the background for a large region.

themes-accents-do

Douse accent colors for visual enhancements.

Platforms

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android
  • Stick to the guidelines above.