Getting Started | Enara Design System

Overview

Enara Design System provides:

Design Tokens - 304 CSS variables across 12 categories (colors, spacing, typography, motion, etc.)
React Components - Vanilla React components with CSS Modules and CVA for type-safe variants
AI Metadata - Structured component metadata for AI-assisted development

Prerequisites

Node.js >= 18
pnpm >= 8 (or npm/yarn)

Installation

Install the packages in your project:

pnpm

pnpm add @enara-health/tokens @enara-health/ui-react

npm

npm install @enara-health/tokens @enara-health/ui-react

Font Setup

The design system uses Outfit as the primary font family. You must load this font in your application for components to display correctly.

Google Fonts (Recommended)

Add the following to your HTML <head>:

HTML

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
  rel="stylesheet"
/>

Self-Hosting

If you prefer to self-host fonts, download Outfit from Google Fonts and use @font-face declarations in your CSS.

Verification

Once loaded, the design system will automatically use Outfit via the --font-family-primary CSS variable. No additional configuration needed.

Development

Common commands for working with the design system:

Build All Packages

pnpm build

Start Documentation Site

pnpm dev

Start Component Dev Server

pnpm --filter @enara-health/ui-react dev

Using Tokens

Import tokens once in your application and use CSS variables throughout your styles.

Import CSS Variables

@import '@enara-health/tokens/css';

Typography

h1 {
  font: var(--text-display-xl-bold);
}
p {
  font: var(--text-body-md-regular);
}

Semantic Colors

.card {
  background: var(--semantic-background-surface);
  color: var(--semantic-foreground-base);
  border: 1px solid var(--semantic-border-bounds);
}

Spacing and Layout

.container {
  padding: var(--size-16);
  gap: var(--size-8);
}

Elevation and Motion

.card {
  box-shadow: var(--elevation-100);
  border-radius: var(--radius-md);
  transition: box-shadow var(--motion-duration-normal) var(--motion-easing-ease-out);
}
.card:hover {
  box-shadow: var(--elevation-200);
}

JavaScript Constants

Tokens are also available as JavaScript constants:

import {
  TextDisplayXlBold,
  SemanticBackgroundSurface,
  ColorMoonstone500
} from '@enara-health/tokens';

// Use in React inline styles
<h1 style={TextDisplayXlBold}>Heading</h1>

Using Components

Import components and styles in your React application:

import { Button, Chip, Input } from '@enara-health/ui-react';

function App() {
  return (
    <>
      <Chip label="Active" color="success" />
      <Chip label="Pending" color="warning" variant="outline" />
      <Button role="primary" color="primary">Submit</Button>
      <Input placeholder="Enter text..." />
    </>
  );
}

Available Components

Component	Category	Status
Button	Atom	Complete
Checkbox	Atom	Complete
Chip	Atom	Complete
Input	Atom	Complete
Radio	Atom	Complete
Switch	Atom	Complete
Select	Atom	Planned
Textarea	Atom	Planned

Next Steps

Design Tokens

Explore the full token system including colors, spacing, typography, and more.

Components

Browse all available components with examples, props, and usage guidelines.

Changelog

See the latest updates, new features, and changes to the design system.