#Design tokens (wip)

---

NB: Do not use the --token-* CSS custom properties in your code until this page is marked as ready for consumption. The token API is still being finalized and may change without warning until then.

---

#Overview

Show token families

ColorSpacing

#Tips

• Hover over the value of a token in the tables below to see its Eufemia Foundation name.
• You can also filter tokens by type using the filter buttons above the tables.
• You can sort the tables by clicking the column headers. Click again to reverse the sort order.

#Background

Background tokens are used for surfaces, fills and interactive fill states. Typical semantic names in this section are action, neutral, selected and page.

Show background token types

BaseStateAdvanced

#Text

Text tokens are used for readable content, labels and text states.

Show text token types

BaseStateAdvanced

#Icon

Icon tokens are used for icon colors.

Show icon token types

BaseStateAdvanced

#Stroke

Stroke tokens are used for borders, dividers, outlines and focus-related line work.

Show stroke token types

BaseStateAdvanced

#Decorative

Decorative tokens are colors to use for advanced custom decorative needs where the semantic color tokens are not the right fit.

If you use decorative tokens, the First, Second, and Third sets are intended to be used one at a time, because the colors inside each set are designed to match each other.

Show decorative token groups

FirstSecondThird

Show decorative token variants

Non-staticStatic

#Component

NB: Do not use. These tokens are reserved for internal use only.

Component tokens are the component-specific layer. They are useful when a broad semantic token is not precise enough and the API needs a token with an explicit component role, such as button, tooltip or table.

After -component-, the next segment is the component name, followed by the role path. Example:

--token-color-component-button-background-action.

Show component token types

BaseStateAdvanced