Core tokens

Core tokens consists of the building blocks of the UI color system. These include colors representing the brand/product identity and basic utility colors.

Main: These are shades of the main product color. Can be used in UI elements to represent core actions and brand related content.

Utility: These colors should be used for system status related content. These are general tokens and can be used in different types of UI elements.

Surface & background tokens

These tokens should be used for backgrounds of UI elements like cards, lists, buttons, inputs, containers and whole pages.

Text & icons

Color tokens for grayscale text content and icons.

Default: These are the main text colors. Use these for all text content across the product. Best used on light surfaces, background colors. Can also be used for icons.

On color: These are an alternate set of colors to be used for better contrast on darker or colored surfaces where default text colors don’t work.

Outline

These color tokens should be used on outlines / strokes.

Default: Best used on light surfaces, background colors.

On color: Alternate set of colors to be used for better contrast on darker or colored surfaces.

Extended/Surface & background

Extended tokens are additional colors that can be used in cases where more variety is required. These should be used where surface & background colors are applicable.

Extended/Text & icons

Extended tokens are additional colors that can be used in cases where more variety is required. These set of colors are derived from utility colors and can be used for showing status related content. These are adjusted for better contrast. Should be used where text & icon colors are applicable.

Extended/Decorative

Decorative tokens can be used in UI elements that need color for simple decorative purposes. These colors have no assigned meaning and can be used freely. Should be used in places that need random colors like icons, avatars, etc

There are two types -- Bold and Subtle for most colors. Bold and subtle tokens for a particular color can be used in combination for text and surfaces.

Component

Component tokens are specially reserved colors for use inside components only. These are used for specific conponent variants and states where other common tokens do not suffice. These are for internal DLS use only. Avoid using these tokens outside of the specific component(s).