Decorative scales

Six static accent hues (red, purple, yellow, blue, green, pink) for things like tags, charts, or illustrations. Seven steps each, shared by every brand. Unlike a brand's primary/secondary palette, they don't shift with the brand, but they do have a genuine dark-mode variant: for each hue, the dark scale reuses the same hue, inverts the light scale's lightness curve, and trims saturation slightly so 100 and 700 stay usable as a background/foreground pair on a dark surface. Scoped to light/dark directly below, same shade-chart layout as Grey scale and each prebuilt theme.

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

Usage

.custom-tag--info {
  background: var(--eun-color-blue-100);
  color: var(--eun-color-blue-700);
}

Use these for categorical/decorative accents (tag colors, chart series), not for status messaging, which has its own semantic states scale with meaning attached (success, warning, critical, info).

These values only apply once a theme stylesheet is loaded: see Foundation → Import for how to load it per framework.