#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.
• Use the filter buttons above each table to narrow tokens by modifier (for example inverse, ondark, subtle, bold or static). Multiple modifiers combine with AND.
• 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.

Filter background tokens

HoverPressedFocusDisabledInverseOn darkSubtleBoldBaseAlternativeStatic

#Text

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

Filter text tokens

HoverPressedFocusDisabledInverseOn darkOn lightSubtleAlternativeDestructive

#Icon

Icon tokens are used for icon colors.

Filter icon tokens

HoverPressedFocusDisabledInverseOn darkSubtleAlternativeDestructiveStatic

#Stroke

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

Filter stroke tokens

HoverPressedFocusDisabledInverseOn darkSubtleBoldAlternative

#Decorative

Decorative tokens are colors to use for advanced custom decorative needs where the semantic color tokens are not the right fit. They should not be used for text. For text on dark decorative backgrounds, use the ondark text tokens, and for other backgrounds, use the neutral text tokens.

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.

Filter component tokens

HoverPressedDisabledInverseOn darkOn subtleSubtleAlternativeDestructive