Design Tokens

The design system is fully tokenized. Every color, spacing, and typography value comes from a W3C DTCG-format token file.

Token Categories

Color
Semantic colors (text, surface, border, brand) with light/dark variants.
Typography
Font families, sizes, weights, line heights.
Spacing
4-pt scale (4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96).
Sizing
Fixed component sizes for buttons, inputs, avatars.
Shadows
Elevation tokens (sm, md, lg, xl, overlay).
Radii
Corner radius scale (none, sm, md, lg, xl, 2xl, full).
Motion
Duration and easing tokens for animations.

Using tokens in CSS

Reference tokens via CSS custom properties:

.my-component {
  color: var(--ep-text-body);
  background: var(--ep-surface-card);
  padding: var(--ep-space-4);
  border-radius: var(--ep-radius-md);
  box-shadow: var(--ep-shadow-md);
}

Using tokens in Tailwind

The design system extends Tailwind with semantic token classes:

<div className="bg-ep-surface-card text-ep-text-body p-ep-4 rounded-ep-md shadow-ep-md">
  Themed component
</div>

Using tokens programmatically

Import tokens as TypeScript constants:

import { tokens } from '@epasslive/design-system'

const brandColor = tokens.color.brand.primary // '#009FCA'
const baseSpacing = tokens.spacing[4] // '1rem'