IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

AccessibilityIconUiExpandCollapseDown
LayeringIconUiExpandCollapseDown
LayoutIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Identity

/

Code

Provide a palette for the user's self-expression.

Teams choose their own identity color for stronger brand recognition, in the product, design assets and across public pages.

Web
React Native
Android
Apple

Use the values below.

Color
RGBA / HEX
Variable
121, 6, 34, 1var(--color-identity-maroon)
208, 0, 0, 1var(--color-identity-scarlet)
255, 30, 30, 1var(--color-identity-apple)
255, 140, 0, 1var(--color-identity-orange)
237, 180, 7, 1var(--color-identity-gold)
255, 221, 0, 1var(--color-identity-yellow)
36, 89, 0, 1var(--color-identity-forest)
62, 150, 0, 1var(--color-identity-kelly)
83, 188, 239, 1var(--color-identity-sky)
8, 77, 163, 1var(--color-identity-royal)
12, 57, 112, 1var(--color-identity-navy)
98, 18, 150, 1var(--color-identity-purple)
255, 76, 162, 1var(--color-identity-pink)
250, 250, 250, 1var(--color-identity-white)
215, 217, 221, 1var(--color-identity-silver)
100, 101, 102, 1var(--color-identity-grey)
34, 34, 34, 1var(--color-identity-black)
56, 67, 79, 1var(--color-identity-default)