Context-Agnostic Tokens

Design tokens should adapt to different environments like light/dark mode, themes, and screen densities without altering their core meaning.

What is Context?

Design elements should be independent of specific themes, modes, or settings. For example, the same button should work in light mode, dark mode, different themes, and varied spatial densities.
Example:

interaction-container-branded-high-background refers to the background of a high-emphasis button, rather than a fixed color like "blue."

Intentional colors
A button is displayed in different contexts (light mode, dark mode, different themes) while keeping the same meaning.

Light and Dark Modes

Nova supports automatic mode switching between light and dark themes.

Tokens ensure that UI elements adapt dynamically without breaking consistency.

Light and dark mode
A side-by-side comparison of the same UI in light and dark mode.

Themes and Customization

Main themes at Elia Group:

Spark (Orange-based theme)

Ocean (Petrol-based theme)

Spark and Ocean theme
Consistency through themes

Custom themes
Or should we say... Design agnostic?