Overview
Our color system is designed to support a clear, consistent interface while enabling flexibility across brands and themes. It is divided into two main sets:
- Palette: Foundational global colors used by the Design System community.
- Theme: Product-ready colors, adapted for each brand and mode.
Palettes
Palette colors are the base colors of our system. They are used internally by the Design System community to define Theme tokens and shape the UI language.
There are two palette sets: Light and Dark, each tailored to its respective mode but following the same structure.
Palette colors are grouped into:
- Brand: Brand and neutral colors used to build themes across products.
- Semantic: Shared meaning-based colors for alerts and feedback (e.g., success, warning).
Theme
Theme colors assign meaning to Palette tokens, making them ready for use in the product. They are adapted for each brand and mode.
Each token name reflects its purpose. For example: background.interactive.primary.hover is used on interactive backgrounds in their hover state.
Theme colors are organized by their primary function on the product:
- Background: For surface fills in pages, components, overlays, etc.
- Text: For text and icons.
- Border: For strokes and dividers.
- Visual Assets: For pictograms and illustrations.
- DataViz: Used in charts and dashboards, to visually distinct from UI colors.
Choosing colors
All our components are already set with their correct colors. Whenever you need to choose one color token manually, for example, for a custom layout or a section heading, make sure to use Theme tokens.
Here’s how to read and apply them:
By hierarchy
These define the visual importance of the element in the interface.
- Primary: For key actions or standout content (e.g., primary button).
- Secondary: For supporting content or elements (e.g., captions, supporting text).
- Tertiary: For subtle use or when primary and secondary are already in use.
- Neutral: For low-emphasis elements (e.g., less prominent buttons).
By state
These only apply to interactive elements.
- Default: The default, resting state of an interactive element.
- Hover: Indicates an element is being hovered over.
- Active: Indicates when an element is being pressed or touched.
- Disabled: Indicates the element is inactive or unavailable.
By meaning
These colors are shared across brands and themes to represent statuses and feedback.
- Success: Positive outcome or confirmation.
- Warning: Caution or attention needed.
- Danger: Critical error or destructive action.
- Info: Neutral informational feedback.
Best practices
- Use theme tokens only: They adapt automatically to brand and mode.
- Rely on components variants: All components already use the correct colors. Check for their variants to see if a different color usage is available.
- Follow naming logic: When selecting colors manually, consider the meaning indicated on their naming (e.g., primary, secondary, alert, etc).
- Respect semantic roles: Alert colors should be used only to convey meaning, not for decoration.
Accessibility in color
We comply with WCAG AA standard contrast ratios:
- 3:1 for any elements essential to understanding the experience and text 24px or larger (WCAG 1.4.11)
- 4.5:1 for text smaller than 24px (WCAG 1.4.3)
Applying color with design tokens
Colors should only be applied through our design tokens. This changes the way we think about using colors: instead of choosing a specific value from the palettes, you need to think about the role of the component and choose a matching design token. Each token's name should guide you in this decision, and for more information, you can also check the tokens' description.
Colors in code
All colors in this palette are available through design tokens and follow the naming pattern of color-{common_name}-{primary}-{number}. For example:
- JavaScript $color-indigo-500
- CSS var(--color-indigo-500)
Using colors that are not available through our sematic design token or components directly is considered an anti-pattern, and should be avoided whenever possible.