The foundation of Eddie's visual language — colors, typography, spacing, and more.

Eddie uses a three-tier token architecture powered by Style Dictionary:

Tier 1 — Definitions (Primitives)

Raw values that define the palette. These are never used directly in components.

Token files live in packages/eddie-design-tokens/ and define base values like --ed-color-blue-500, --ed-font-size-16, and --ed-spacing-8.

Tier 2 — Usage (Semantic)

Contextual tokens that map primitives to purposes. These are what you use in custom properties:

  • --ed-theme-color-background-default → the page background
  • --ed-theme-color-content-default → primary text color
  • --ed-theme-color-border-default → standard border color
  • --ed-theme-color-content-accent-1 → primary accent color

Tier 3 — Component

Component-specific tokens that override semantic tokens for individual components:

  • --ed-c-button-background → button background
  • --ed-c-card-border-radius → card corner radius

Token Categories

  • Colors — Background, content, border, and accent color tokens
  • Typography — Font families, sizes, weights, and line heights
  • Spacing & Size — Consistent spacing scale and component sizing
  • Borders & Shadows — Border widths, radii, and elevation shadows

Using Tokens

In CSS custom properties:

.my-element { color: var(--ed-theme-color-content-default); padding: var(--ed-spacing-md); border-radius: var(--ed-border-radius-md); }

In Eddie component SCSS (using the size() function):

@use '@brad-frost-web/eddie-design-tokens/core/scss/component.scss' as *; .ed-c-my-component { padding: size(4); // outputs var(--ed-size-4) }

Source of Truth

Token definitions live in packages/eddie-design-tokens/. The built CSS files are generated by Style Dictionary and are the authoritative token values. Full token documentation is also available in Storybook:

Browse Token Docs in Storybook →