IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

AccessibilityIconUiExpandCollapseDown
LayeringIconUiExpandCollapseDown
LayoutIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Content

/

Design

Keep icons, type and supporting graphics neutral.

Content colors are semantically named for their hierarchical purpose and corresponding environment.

Options

Choose a content color based on content hierarchy. A clear hierarchy makes the interface easier to understand, and ultimately more effective.

We help teams win.

Contrast: Fully opaque, it differs the most from its background. Use it for more important or dominant elements.

Usage

Content Hierarchy

Color contrast isn’t the only way to create content hierarchy. Weight, saturation, whitespace and element size should all be used in conjunction with contrast to gracefully guide the user’s attention.

Don't use one color for all elements in a region.

Don'tuse one color for all elements in a region.

Do use a variety of content colors and sizes for easier scanning.

Douse a variety of content colors and sizes for easier scanning.

Accessibility

Use Contrast, Default and Subtle confidently—they all pass WCAG 2.0 contrast accessibility standards on all levels.

Nonessential does not and should never be used for important information.

Don't use nonessential for key content in an interface.

Don'tuse nonessential for key content in an interface.

Do use nonessential to support the information hierarchy.

Douse nonessential to support the information hierarchy.

Values

Light Environment

ColorNameRGBA
LE Content Contrast19, 41, 63, 1
LE Content Default58, 77, 95, 1
LE Content Subtle80, 98, 119, 1
LE Content Nonessential19, 41, 63, 0.4

Dark Environment

ColorNameRGBA
DE Content Contrast230, 242, 255, 1
DE Content Default195, 206, 219, 1
DE Content Subtle157, 170, 184, 1
DE Content Nonessential230, 242, 255, 0.4