Background, content, border, and accent color tokens.

Color Token Structure

Eddie colors are organized into three categories at the semantic (Tier 2) level:

Background Colors

Token Usage
--ed-theme-color-background-default Page and card backgrounds
--ed-theme-color-background-subtle Slightly offset backgrounds
--ed-theme-color-background-strong High-contrast backgrounds

Content Colors

Token Usage
--ed-theme-color-content-default Primary text
--ed-theme-color-content-subtle Secondary/muted text
--ed-theme-color-content-strong Emphasized text

Border Colors

Token Usage
--ed-theme-color-border-default Standard borders
--ed-theme-color-border-subtle Light separators
--ed-theme-color-border-strong Emphasized borders

Accent Colors

Eddie provides 8 accent colors (accent-1 through accent-8), each with two variants:

  • accent-N — Renders the element IN the accent color (e.g., dark blue text)
  • on-accent-N — Ensures contrast ON an accent background (e.g., white text on dark blue)
/* Text in accent color */ color: var(--ed-theme-color-content-accent-3); /* Text readable on accent background */ background: var(--ed-theme-color-background-accent-3); color: var(--ed-theme-color-content-on-accent-3);

This convention applies to both content and border token groups.

Theme Variations

Each theme maps these semantic tokens to different primitive values. The same markup renders differently depending on the active theme class on <html>.

See Themes for full theme documentation.

The complete list of color tokens — including hover states, knockout variants, utility colors (error, warning, success, info), and dataviz tokens — is defined in the built token CSS at packages/eddie-design-tokens/{theme}/build/css/tokens.css. For detailed accent color documentation, see packages/eddie-design-tokens/COLOR-TOKENS.md.