Color

Every color token follows --eun-color-[group]-[shade]. This page covers the tokens that stay the same across every brand: grey scale, decorative scales, and semantic states. For the primary/ secondary brand palettes that actually change per theme, see Theming: Prebuilt themes.

Every chart below uses the same shade-chart layout as each prebuilt theme's own palette, scoped directly to light/dark rather than the toolbar's current selection.

Focused pages: Grey scale · Decorative · Semantic states · Neutral tokens

None of these tokens exist without a theme stylesheet loaded: see Foundation → Import for how to load it per framework.

Grey scale

Decorative scales

Static accent colors for things like tags, charts, or illustrations: 7 steps, with a dark-mode variant per hue.

--eun-color-<name>-<shade>, e.g. --eun-color-blue-500.

Semantic states

For success/warning/critical/info messaging, each has a light-mode and dark-mode variant.

--eun-color-<state>-<shade>, e.g. --eun-color-critical-100.

Neutral tokens

Theme-independent surface and text tokens, shared by every brand:

Token	Swatch
--eun-surface-color
--eun-border-color / --eun-divider-color
--eun-disabled-color
--eun-content-hover
--eun-content-pressed
--eun-text-color
--eun-text-secondary
--eun-readonly-color / --eun-text-readonly-color
--eun-placeholder-color / --eun-text-disabled-color / --eun-disabled-content