The colors in our palette communicate the reliability of our product and the authenticity of our team’s values. The color palette foundation creates a consistent experience for users and ensures compliance with Web Content Accessibility Guidelines (WCAG) 2.1 AA requirements by thoughtfully pairing background and foreground colors. This means that components with various color options like badges, alerts, and buttons will have a more harmonious feel to them.
Always use color that supports the purpose of the content and the overall goal of the page. Color can help communicate things like hierarchy of information, interactive states, and distinct elements, all of which make it easier for users to get their work done.
The color system is designed to meet Web Content Accessibility Guidelines (WCAG) 2.1 AA requirements by thoughtfully pairing background and foreground colors. Sufficient contrast makes things easier to find, identify, and interact with for all users. However, you should never convey information using color alone. For example, using an icon or a label in addition to using red, yellow, or green when communicating the status of something ensures that the status is visible to users who are color blind.
Color plays a key role in creating the overall hierarchy of a screen. Using the subtle and strong token variants is an easy way to change that hierarchy and draw a user’s attention to the right place.
100 $brand-100 Copy to Clipboard --theme-brand-100 Copy to Clipboard 200 $brand-200 Copy to Clipboard --theme-brand-200 Copy to Clipboard 300 $brand-300 Copy to Clipboard --theme-brand-300 Copy to Clipboard 400 $brand-400 Copy to Clipboard --theme-brand-400 Copy to Clipboard 500 $brand-500 Copy to Clipboard --theme-brand-500 Copy to Clipboard 600 $brand-600 Copy to Clipboard --theme-brand-600 Copy to Clipboard 650 $brand-650 Copy to Clipboard --theme-brand-650 Copy to Clipboard 700 $brand-700 Copy to Clipboard --theme-brand-700 Copy to Clipboard 800 $brand-800 Copy to Clipboard --theme-brand-800 Copy to Clipboard 900 $brand-900 Copy to Clipboard --theme-brand-900 Copy to Clipboard 1000 $brand-1000 Copy to Clipboard --theme-brand-1000 Copy to Clipboard 1100 $brand-1100 Copy to Clipboard --theme-brand-1100 Copy to Clipboard 25 $neutral-25 Copy to Clipboard --theme-neutral-25 Copy to Clipboard 50 $neutral-50 Copy to Clipboard --theme-neutral-50 Copy to Clipboard 100 $neutral-100 Copy to Clipboard --theme-neutral-100 Copy to Clipboard 200 $neutral-200 Copy to Clipboard --theme-neutral-200 Copy to Clipboard 300 $neutral-300 Copy to Clipboard --theme-neutral-300 Copy to Clipboard 400 $neutral-400 Copy to Clipboard --theme-neutral-400 Copy to Clipboard 500 $neutral-500 Copy to Clipboard --theme-neutral-500 Copy to Clipboard 600 $neutral-600 Copy to Clipboard --theme-neutral-600 Copy to Clipboard 700 $neutral-700 Copy to Clipboard --theme-neutral-700 Copy to Clipboard 800 $neutral-800 Copy to Clipboard --theme-neutral-800 Copy to Clipboard 900 $neutral-900 Copy to Clipboard --theme-neutral-900 Copy to Clipboard 1000 $neutral-1000 Copy to Clipboard --theme-neutral-1000 Copy to Clipboard 1100 $neutral-1100 Copy to Clipboard --theme-neutral-1100 Copy to Clipboard black --theme-black Copy to Clipboard white --theme-white Copy to Clipboard 100 $success-100 Copy to Clipboard --theme-success-100 Copy to Clipboard 200 $success-200 Copy to Clipboard --theme-success-200 Copy to Clipboard 300 $success-300 Copy to Clipboard --theme-success-300 Copy to Clipboard 400 $success-400 Copy to Clipboard --theme-success-400 Copy to Clipboard 500 $success-500 Copy to Clipboard --theme-success-500 Copy to Clipboard 600 $success-600 Copy to Clipboard --theme-success-600 Copy to Clipboard 700 $success-700 Copy to Clipboard --theme-success-700 Copy to Clipboard 800 $success-800 Copy to Clipboard --theme-success-800 Copy to Clipboard 900 $success-900 Copy to Clipboard --theme-success-900 Copy to Clipboard 1000 $success-1000 Copy to Clipboard --theme-success-1000 Copy to Clipboard 1100 $success-1100 Copy to Clipboard --theme-success-1100 Copy to Clipboard 100 $warning-100 Copy to Clipboard --theme-warning-100 Copy to Clipboard 200 $warning-200 Copy to Clipboard --theme-warning-200 Copy to Clipboard 300 $warning-300 Copy to Clipboard --theme-warning-300 Copy to Clipboard 400 $warning-400 Copy to Clipboard --theme-warning-400 Copy to Clipboard 500 $warning-500 Copy to Clipboard --theme-warning-500 Copy to Clipboard 600 $warning-600 Copy to Clipboard --theme-warning-600 Copy to Clipboard 700 $warning-700 Copy to Clipboard --theme-warning-700 Copy to Clipboard 800 $warning-800 Copy to Clipboard --theme-warning-800 Copy to Clipboard 900 $warning-900 Copy to Clipboard --theme-warning-900 Copy to Clipboard 1000 $warning-1000 Copy to Clipboard --theme-warning-1000 Copy to Clipboard 1100 $warning-1100 Copy to Clipboard --theme-warning-1100 Copy to Clipboard 100 $danger-100 Copy to Clipboard --theme-danger-100 Copy to Clipboard 200 $danger-200 Copy to Clipboard --theme-danger-200 Copy to Clipboard 300 $danger-300 Copy to Clipboard --theme-danger-300 Copy to Clipboard 400 $danger-400 Copy to Clipboard --theme-danger-400 Copy to Clipboard 500 $danger-500 Copy to Clipboard --theme-danger-500 Copy to Clipboard 600 $danger-600 Copy to Clipboard --theme-danger-600 Copy to Clipboard 700 $danger-700 Copy to Clipboard --theme-danger-700 Copy to Clipboard 800 $danger-800 Copy to Clipboard --theme-danger-800 Copy to Clipboard 900 $danger-900 Copy to Clipboard --theme-danger-900 Copy to Clipboard 1000 $danger-1000 Copy to Clipboard --theme-danger-1000 Copy to Clipboard 1100 $danger-1100 Copy to Clipboard --theme-danger-1100 Copy to Clipboard 100 $info-100 Copy to Clipboard --theme-info-100 Copy to Clipboard 200 $info-200 Copy to Clipboard --theme-info-200 Copy to Clipboard 300 $info-300 Copy to Clipboard --theme-info-300 Copy to Clipboard 400 $info-400 Copy to Clipboard --theme-info-400 Copy to Clipboard 500 $info-500 Copy to Clipboard --theme-info-500 Copy to Clipboard 600 $info-600 Copy to Clipboard --theme-info-600 Copy to Clipboard 700 $info-700 Copy to Clipboard --theme-info-700 Copy to Clipboard 800 $info-800 Copy to Clipboard --theme-info-800 Copy to Clipboard 900 $info-900 Copy to Clipboard --theme-info-900 Copy to Clipboard 1000 $info-1000 Copy to Clipboard --theme-info-1000 Copy to Clipboard 1100 $info-1100 Copy to Clipboard --theme-info-1100 Copy to Clipboard Use sparingly for charts, avatars, illustrations, etc.
100 $orange-100 Copy to Clipboard --theme-accent-orange-100 Copy to Clipboard 200 $orange-200 Copy to Clipboard --theme-accent-orange-200 Copy to Clipboard 300 $orange-300 Copy to Clipboard --theme-accent-orange-300 Copy to Clipboard 400 $orange-400 Copy to Clipboard --theme-accent-orange-400 Copy to Clipboard 500 $orange-500 Copy to Clipboard --theme-accent-orange-500 Copy to Clipboard 600 $orange-600 Copy to Clipboard --theme-accent-orange-600 Copy to Clipboard 700 $orange-700 Copy to Clipboard --theme-accent-orange-700 Copy to Clipboard 800 $orange-800 Copy to Clipboard --theme-accent-orange-800 Copy to Clipboard 900 $orange-900 Copy to Clipboard --theme-accent-orange-900 Copy to Clipboard 1000 $orange-1000 Copy to Clipboard --theme-accent-orange-1000 Copy to Clipboard 1100 $orange-1100 Copy to Clipboard --theme-accent-orange-1100 Copy to Clipboard 100 $pink-100 Copy to Clipboard --theme-accent-pink-100 Copy to Clipboard 200 $pink-200 Copy to Clipboard --theme-accent-pink-200 Copy to Clipboard 300 $pink-300 Copy to Clipboard --theme-accent-pink-300 Copy to Clipboard 400 $pink-400 Copy to Clipboard --theme-accent-pink-400 Copy to Clipboard 500 $pink-500 Copy to Clipboard --theme-accent-pink-500 Copy to Clipboard 600 $pink-600 Copy to Clipboard --theme-accent-pink-600 Copy to Clipboard 700 $pink-700 Copy to Clipboard --theme-accent-pink-700 Copy to Clipboard 800 $pink-800 Copy to Clipboard --theme-accent-pink-800 Copy to Clipboard 900 $pink-900 Copy to Clipboard --theme-accent-pink-900 Copy to Clipboard 1000 $pink-1000 Copy to Clipboard --theme-accent-pink-1000 Copy to Clipboard 1100 $pink-1100 Copy to Clipboard --theme-accent-pink-1100 Copy to Clipboard 100 $magenta-100 Copy to Clipboard --theme-accent-magenta-100 Copy to Clipboard 200 $magenta-200 Copy to Clipboard --theme-accent-magenta-200 Copy to Clipboard 300 $magenta-300 Copy to Clipboard --theme-accent-magenta-300 Copy to Clipboard 400 $magenta-400 Copy to Clipboard --theme-accent-magenta-400 Copy to Clipboard 500 $magenta-500 Copy to Clipboard --theme-accent-magenta-500 Copy to Clipboard 600 $magenta-600 Copy to Clipboard --theme-accent-magenta-600 Copy to Clipboard 700 $magenta-700 Copy to Clipboard --theme-accent-magenta-700 Copy to Clipboard 800 $magenta-800 Copy to Clipboard --theme-accent-magenta-800 Copy to Clipboard 900 $magenta-900 Copy to Clipboard --theme-accent-magenta-900 Copy to Clipboard 1000 $magenta-1000 Copy to Clipboard --theme-accent-magenta-1000 Copy to Clipboard 1100 $magenta-1100 Copy to Clipboard --theme-accent-magenta-1100 Copy to Clipboard 100 $olive-100 Copy to Clipboard --theme-accent-olive-100 Copy to Clipboard 200 $olive-200 Copy to Clipboard --theme-accent-olive-200 Copy to Clipboard 300 $olive-300 Copy to Clipboard --theme-accent-olive-300 Copy to Clipboard 400 $olive-400 Copy to Clipboard --theme-accent-olive-400 Copy to Clipboard 500 $olive-500 Copy to Clipboard --theme-accent-olive-500 Copy to Clipboard 600 $olive-600 Copy to Clipboard --theme-accent-olive-600 Copy to Clipboard 700 $olive-700 Copy to Clipboard --theme-accent-olive-700 Copy to Clipboard 800 $olive-800 Copy to Clipboard --theme-accent-olive-800 Copy to Clipboard 900 $olive-900 Copy to Clipboard --theme-accent-olive-900 Copy to Clipboard 1000 $olive-1000 Copy to Clipboard --theme-accent-olive-1000 Copy to Clipboard 1100 $olive-1100 Copy to Clipboard --theme-accent-olive-1100 Copy to Clipboard 100 $cyan-100 Copy to Clipboard --theme-accent-cyan-100 Copy to Clipboard 200 $cyan-200 Copy to Clipboard --theme-accent-cyan-200 Copy to Clipboard 300 $cyan-300 Copy to Clipboard --theme-accent-cyan-300 Copy to Clipboard 400 $cyan-400 Copy to Clipboard --theme-accent-cyan-400 Copy to Clipboard 500 $cyan-500 Copy to Clipboard --theme-accent-cyan-500 Copy to Clipboard 600 $cyan-600 Copy to Clipboard --theme-accent-cyan-600 Copy to Clipboard 700 $cyan-700 Copy to Clipboard --theme-accent-cyan-700 Copy to Clipboard 800 $cyan-800 Copy to Clipboard --theme-accent-cyan-800 Copy to Clipboard 900 $cyan-900 Copy to Clipboard --theme-accent-cyan-900 Copy to Clipboard 1000 $cyan-1000 Copy to Clipboard --theme-accent-cyan-1000 Copy to Clipboard 1100 $cyan-1100 Copy to Clipboard --theme-accent-cyan-1100 Copy to Clipboard As a customer-centric brand, we strive to make color decisions that are friendly toward all levels of vision. Our standard is AA, meaning the text color and background color have a contrast ratio of at least 4.5.
Learn more about accessible color
View in Figma 