Overview
Tokens capture raw design decisions like colors, spacing, and typography into named variables. They serve as the single source of truth for visual properties across all components and applications.
Consistency
Ensure visual consistency across all components and applications.
Maintainability
Update design decisions in one place and see changes everywhere.
Scalability
Build new features faster with a solid foundation of design decisions.
Token Categories
Our token system is organized into categories, each serving a specific purpose in the design language.
Colors
Primitive and semantic color palettes for brand, UI, and system states.
Spacing
Consistent spacing scale for padding, margins, and gaps.
Typography
Font families, sizes, weights, and line heights for text styling.
Border Radius
Corner rounding values for cards, buttons, and other elements.
Motion
Duration and easing values for animations and transitions.
Elevation
Box shadow values for creating depth and visual hierarchy.
Usage
Tokens are distributed as CSS custom properties. Import them once in your application and use them throughout your styles.
Installation
npm install @enara-health/tokensImport in CSS
@import '@enara-health/tokens/css';Use in Styles
.button {
background: var(--background-interactive-primary);
color: var(--foreground-interactive-white);
padding: var(--size-8) var(--size-16);
border-radius: var(--radius-md);
font-weight: var(--font-weight-medium);
transition: background var(--motion-duration-fast) var(--motion-easing-ease-out);
}Architecture
Our token system follows a three-layer architecture for maximum flexibility and semantic meaning.
--color-moonstone-500, --size-16 --foreground-base, --background-interactive-primary Best Practice: Always use semantic tokens in components. Foundation tokens should rarely be used directly in component styles.