IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

AccessibilityIconUiExpandCollapseDown
LayeringIconUiExpandCollapseDown
LayoutIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Themes

/

Design

Use color to structure interface layouts.

Themes are the combination of environments and levels. Check each component for usage guidelines.

Options

Environments provide the color scheme for a given activity.

  • Light Environment (LE) — Our default environment fits browsing experiences for everyday work, such as viewing or managing information.
  • Dark Environment (DE) — For immersive content experiences, such as video editing or tagging.

Levels apply a color system to group elements within the interface.

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.

Use the accent color only on its respective base color.

Base
Accent

Usage

Video Players

Refrain from using level colors in video players. Our base colors are better suited for that.

Don't use nontraditional colors for video players.

Don'tuse nontraditional colors for video players.

Do use base colors for a cohesive experience.

Douse base colors for a cohesive experience.

Values

Light Environment

ColorNameRGBA
LE Divider167, 174, 181, 0.6
LE Bg Level3 Accent211, 216, 222, 1
LE Bg Level3235, 239, 242, 1
LE Bg Level2 Accent220, 225, 230, 1
LE Bg Level2242, 245, 247, 1
LE Bg Level1 Accent228, 231, 235, 1
LE Bg Level1249, 250, 251, 1
LE Bg Level0 Accent237, 240, 242, 1
LE Bg Level0255, 255, 255, 1

Dark Environment

ColorNameRGBA
DE Divider122, 138, 153, 0.6
DE Bg Level3 Accent53, 63, 74, 1
DE Bg Level353, 63, 74, 1
DE Bg Level2 Accent49, 59, 69, 1
DE Bg Level235, 42, 49, 1
DE Bg Level1 Accent44, 52, 62, 1
DE Bg Level125, 31, 36, 1
DE Bg Level0 Accent35, 42, 49, 1
DE Bg Level016, 20, 23, 1

Base

ColorNameRGBA
Base White255, 255, 255, 1
Base Black0, 0, 0, 1