IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Level

/

Design

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.

Don't use higher levels for primary content regions.

Don'tuse higher levels for primary content regions.

Do use Level 0 for primary content regions.

Douse Level 0 for primary content regions.

Space and Division

When building an interface, start first with space to reveal relationships between content before considering a level change. In more severe instances, more contrast is requried to create visual division between different areas. Follow our space and division guidelines for more information.

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.

Don't add shadows to regions unless the element is layered.

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

Do keep levels on the same elevation.

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.

Don't pick accents from any level.

Don'tpick accents from any level.

Do use the accent matching the region’s base color.

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.

Don't use accents as the background for a large region.

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

Do use accent colors for visual enhancements.

Douse accent colors for visual enhancements.

Platform

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