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.
This page documents the stable --token-* CSS custom properties that are ready for teams to consume.
For external usage, not all token rows should be treated the same:
Basemeans the token is part of the intended external semantic surface, such asactionoraction-inverse.Statemeans the token is a semantic interaction state, such asaction-hoveroraction-focus.Advancedmeans the token is contextual or decorative, such asaction-ondark,action-onlightoraction-subtle.
Source of truth
- The token inventory below is generated from the same exported theme token files that produce tokens.
- The consumer API is the generated CSS tokens files.
- The color values behind these tokens come from Eufemia Foundation colors and are mapped into semantic and component token layers per theme.
- The inventory on this page is derived from the exported Figma theme token JSON files used by the generator.
- Eiendom currently reuses the UI token file, so the three explicit brand references shown here are DNB, Sbanken and Carnegie.
Naming contract
| Rule | Current contract |
|---|---|
| Prefix | --token- |
| Top-level categories | color |
| Component sections (optional) | component-* |
| Semantic Color sections | background, text, icon, stroke, decorative |
| Typical Color labels | action, neutral, destructive, marketing, selected, info, positive, warning, error, page |
| Brand parity | Every brand tokens file is expected to declare the same token names. |
Typical examples:
- semantic token:
--token-color-text-neutral - semantic state token:
--token-color-background-action-hover-subtle - component token:
--token-color-component-button-background-action