Design tokens#

Beta: The --token-* CSS custom properties are in beta. We encourage you to start using them and welcome your feedback. The token API may still change, but we will communicate any breaking changes.

Overview#

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.

Migrating information and neutral colors#

Information backgrounds, icons and strokes now use blue across DNB, Sbanken and Carnegie. Built-in components receive these colors automatically. Review custom information colors, overrides and visual snapshots when upgrading.

The neutral palette also changes. Applications that use tokens directly must review their backgrounds before upgrading:

neutral-alternative is no longer suitable as a general text background. In DNB light, links on this background drop from 5.15:1 to 3.58:1 contrast, below the 4.5:1 minimum for normal text. In DNB dark it matches the neutral surface used by Card, so nested boxes can lose their visible fill.

Search application CSS, SCSS and JavaScript/TypeScript strings for --token-color-background-neutral-alternative and choose a replacement by role:

 .application-section {
-  background-color: var(--token-color-background-neutral-alternative);
+  background-color: var(--token-color-background-neutral-subtle);
 }
 .application-progress-track {
-  background-color: var(--token-color-background-neutral-alternative);
+  background-color: var(--token-color-background-neutral-base);
 }

This is not a one-to-one replacement. Check links, secondary text, error text and nested surfaces in every supported theme and color mode. Normal text needs at least 4.5:1 contrast. Dark-mode text-error now uses a lighter red on the same surfaces: 4.53:1 in DNB and Eiendom, and 4.67:1 in Sbanken on background-neutral-subtle. Use a supported surface/text pair rather than assuming every text token works on every neutral background. See the neutral surface guidance.

Also review direct uses of --token-color-stroke-neutral-alternative, which changes in DNB light and Sbanken dark, and --token-color-stroke-neutral-bold, which changes in DNB dark and Sbanken dark. The new --token-color-stroke-neutral-base provides a base-level outline. Background and stroke tokens with the same suffix do not guarantee sufficient text or control contrast.

The corresponding Tailwind color tokens and utility classes change too. Existing copies of the neutral status-icon pattern should use --token-color-background-neutral-base, as shown in the status-icon pattern.

Removed foundation variables#

The foundation variables below are no longer emitted. Direct var(...) references without a fallback become unresolved. Prefer semantic background, stroke, icon or text tokens according to their role. There is no universal semantic replacement for an old foundation color.

If a custom design must retain an exact old color during migration, these are the previous values:

Retaining a raw color does not adapt to theme or color mode. Review it separately when the application supports multiple themes.

Background#

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

Text#

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

Icon#

Icon tokens are used for icon colors.

Stroke#

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

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.

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.