Token reference

Every color token a theme defines, in one place. Each group has one of three sources, and the source tells you how to change it:

• Generated tokens are computed from your two brand colors by initializeTheme() or the theme builder.
• Shared tokens are the same in every brand. The base theme defines them once, with one value for light and one for dark.
• Derived tokens are computed in CSS from other tokens, so they follow automatically when you change those.

The swatches on this page show the theme currently picked in the toolbar.

Overview

Group	Source	In a custom theme
Brand palettes	Generated from the primary and secondary colors	Set by initializeTheme()
Brand tints	Generated from the primary color	Set by initializeTheme()
Grey scale	Shared	Override in CSS
Neutrals	Shared	--eun-surface-color through initializeTheme(), text and inverse surface through buildThemeCss(), the others in CSS
Derived from the neutrals	Derived from --eun-text-color and --eun-surface-color	Follow the neutrals
Semantic states	Shared	Override in CSS
Decorative scales	Shared	Override in CSS

The theme builder's Copy full theme button exports all of these groups at once, for light and dark, as a starting point for your own file.

Brand palettes

Generated from each brand color: eleven shades, a readable text color for each shade, and five translucent alpha-* tokens for hover and pressed washes. See Custom theme for how the shades are computed.

Tokens	Role
--eun-color-primary-50 to --eun-color-primary-950	The primary shades, 500 being your color
--eun-color-on-primary-50 to --eun-color-on-primary-950	Text color readable on each primary shade
--eun-color-primary-alpha-5 / -10 / -20 / -30 / -40	Primary at 5%, 10%, 20%, 30% and 40%
--eun-color-secondary-* / --eun-color-on-secondary-*	The same set for the secondary color

Brand tints

5% of the primary color mixed into a neutral, for surfaces that should read as branded. No component uses them by default. See Foundations: Neutral tokens.

Token	Swatch	Derived from
--eun-surface-tint		Surface + 5% primary
--eun-border-tint / --eun-divider-tint		Border + 5% primary
--eun-content-hover-tint		Hover + 5% primary
--eun-content-pressed-tint		Pressed + 5% primary

Grey scale

Ten steps, from --eun-color-grey-0 to --eun-color-grey-900. The scale inverts in dark mode, so grey-0 is always the lightest step in light mode and the darkest in dark mode. Components rarely use it directly: prefer the neutrals below. Full chart on Foundations: Grey scale.

Neutrals

The tokens to reach for in app CSS. They carry a role instead of a color, and stay correct in every brand and mode.

Token	Swatch	Light	Dark
--eun-surface-color		#ffffff	grey-0
--eun-text-color		#071621	grey-800
--eun-text-secondary		#666e8a	#d2d5de
--eun-border-color / --eun-divider-color		#dee0e7	grey-300
--eun-content-hover		#9696961a	white at 8%
--eun-content-pressed		#e4e6e8	white at 14%
--eun-disabled-color		#ecedf0	grey-200
--eun-readonly-color		#666e8a	grey-600
--eun-placeholder-color		grey-400	grey-400
--eun-text-disabled-color		#8d93aa	grey-500
--eun-text-readonly-color / --eun-disabled-content		#c1c9d6	grey-400
--eun-surface-inverse		#0b1620	#0b1620
--eun-text-on-inverse		#f5f7fa	#f5f7fa

Derived from the neutrals

Computed with color-mix(), so they follow --eun-text-color, --eun-surface-color and --eun-text-on-inverse without any extra work.

Token	Swatch	Light	Dark
--eun-surface-sunken		Text at 5%	Text at 8%
--eun-surface-sunken-hover		Text at 9%	Text at 12%
--eun-surface-sunken-pressed		Text at 12%	Text at 16%
--eun-surface-sunken-strong		Text at 8%	Text at 16%
--eun-surface-transparent-25 / -50 / -75		Surface at 25%, 50%, 75%	Same
--eun-text-transparent-25 / -50 / -75		Text at 25%, 50%, 75%	Same
--eun-text-on-dark-secondary		White at 70%	Same
--eun-text-on-inverse-secondary		On-inverse text at 70%	Same
--eun-border-on-inverse		On-inverse text at 20%	Same
--eun-content-hover-on-inverse		On-inverse text at 8%	Same
--eun-content-pressed-on-inverse		On-inverse text at 14%	Same
--eun-backdrop-color		Inverse surface at 45%	Same

--eun-text-on-dark-secondary is the one fixed value in this group: it stays white at 70% for a surface that is dark in both modes. See Foundations: Neutral tokens for when to use each sunken level.

Semantic states

Four states, success, warning, critical and info. -100 is the opaque color. -alpha-5 to -alpha-40 are that color at 5%, 10%, 20%, 30% and 40%, for washes, the same scale as the brand colors. -text is -100 darkened to a 4.5:1 contrast ratio, for state colored text and white text on a state fill. In dark mode only -100 changes, lightened until it reads on the dark surface, and -text follows it. Full chart on Foundations: Semantic states.

Decorative scales

Six hues, red, purple, yellow, blue, green and pink, each from -100 to -700, for tags, charts and illustrations. They carry no meaning and never change with the brand. Full chart on Foundations: Decorative scales.

Overriding a shared token

Declare the new value on the same element the theme is applied to, in a stylesheet loaded after the theme:

[data-brand="custom"] {
  --eun-text-color: #1b1f3b;
  --eun-border-color: #d5d9e8;
}

[data-brand="custom"][data-theme="dark"] {
  --eun-text-color: #eef0f8;
  --eun-border-color: #4a5068;
}

The derived tokens follow, because they are resolved on that same element. If you override a neutral on a nested element instead, such as a single section, the derived tokens keep the theme's values there: redeclare the ones you need next to it.