Skip to main content
eagami

Design tokens

The CSS custom properties that drive every @eagami/ui component: colors, typography, spacing, elevation, shape, and motion. Reference these tokens in your own styles via var(--token-name) to stay aligned with the system.

Colors

Primary

50--color-primary-50
100--color-primary-100
200--color-primary-200
300--color-primary-300
400--color-primary-400
500--color-primary-500
600--color-primary-600
700--color-primary-700
800--color-primary-800
900--color-primary-900

Secondary

50--color-secondary-50
100--color-secondary-100
200--color-secondary-200
300--color-secondary-300
400--color-secondary-400
500--color-secondary-500
600--color-secondary-600
700--color-secondary-700
800--color-secondary-800
900--color-secondary-900

Neutral

0--color-neutral-0
50--color-neutral-50
100--color-neutral-100
200--color-neutral-200
300--color-neutral-300
400--color-neutral-400
500--color-neutral-500
600--color-neutral-600
700--color-neutral-700
800--color-neutral-800
900--color-neutral-900
950--color-neutral-950

Status

success

50--color-success-50
100--color-success-100
200--color-success-200
500--color-success-500
600--color-success-600
700--color-success-700

warning

50--color-warning-50
100--color-warning-100
200--color-warning-200
500--color-warning-500
600--color-warning-600
700--color-warning-700

error

50--color-error-50
100--color-error-100
200--color-error-200
500--color-error-500
600--color-error-600
700--color-error-700

info

50--color-info-50
100--color-info-100
200--color-info-200
500--color-info-500
600--color-info-600
700--color-info-700

Semantic

  • --color-text-primary
  • --color-text-secondary
  • --color-text-tertiary
  • --color-text-disabled
  • --color-text-inverse
  • --color-text-link
  • --color-text-link-hover
  • --color-bg-base
  • --color-bg-subtle
  • --color-bg-muted
  • --color-border-default
  • --color-border-strong
  • --color-border-focus
  • --color-brand-default
  • --color-brand-hover
  • --color-brand-active
  • --color-brand-subtle
  • --color-brand-muted

Typography

Families

  • The quick brown fox jumps over the lazy dog --font-family-sans
  • eagami --font-family-brand
  • const greet = "hello, eagami"; --font-family-mono

Sizes

  • Aa--font-size-2xs
  • Aa--font-size-xs
  • Aa--font-size-sm
  • Aa--font-size-md
  • Aa--font-size-lg
  • Aa--font-size-xl
  • Aa--font-size-2xl
  • Aa--font-size-3xl
  • Aa--font-size-4xl
  • Aa--font-size-5xl

Weights

  • Regular --font-weight-regular400
  • Medium --font-weight-medium500
  • Semibold --font-weight-semibold600
  • Bold --font-weight-bold700
  • Extrabold --font-weight-extrabold800

Spacing

  • --space-0
  • --space-0-5
  • --space-1
  • --space-1-5
  • --space-2
  • --space-2-5
  • --space-3
  • --space-3-5
  • --space-4
  • --space-5
  • --space-6
  • --space-7
  • --space-8
  • --space-9
  • --space-10
  • --space-11
  • --space-12
  • --space-14
  • --space-16
  • --space-20
  • --space-24
  • --space-32

Elevation

--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl
--shadow-2xl

Shape

--radius-none
--radius-xs
--radius-sm
--radius-md
--radius-lg
--radius-xl
--radius-2xl
--radius-3xl
--radius-full

Motion

Durations

  • --duration-instant0ms
  • --duration-fast100ms
  • --duration-normal200ms
  • --duration-slow300ms
  • --duration-slower500ms

Easings

  • --ease-linearlinear
  • --ease-incubic-bezier(0.4, 0, 1, 1)
  • --ease-outcubic-bezier(0, 0, 0.2, 1)
  • --ease-in-outcubic-bezier(0.4, 0, 0.2, 1)
  • --ease-springcubic-bezier(0.34, 1.56, 0.64, 1)