IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

AccessibilityIconUiExpandCollapseDown
LayeringIconUiExpandCollapseDown
LayoutIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Content

/

Code

Keep icons, type and supporting graphics neutral.

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

Web
React Native
Android
Apple

Use the values below.

Light Environment

Color
RGBA / HEX
Variable
19, 41, 63, 1var(--color-content-contrast)
58, 77, 95, 1var(--color-content-default)
80, 98, 119, 1var(--color-content-subtle)
19, 41, 63, 0.4var(--color-content-nonessential)

Dark Environment

Color
RGBA / HEX
Variable
230, 242, 255, 1var(--color-content-contrast)
195, 206, 219, 1var(--color-content-default)
157, 170, 184, 1var(--color-content-subtle)
230, 242, 255, 0.4var(--color-content-nonessential)