Introduction
The ePassLive design system is the single source of truth for every UI surface across the platform.
What is it?
A comprehensive component library with 231 implemented components organized into atoms, molecules, organisms, and templates. Every component includes:
- TypeScript interfaces with full prop documentation
- Accessibility assertions (ARIA roles, keyboard navigation)
- Design tokens (colors, spacing, typography)
- Usage examples and anti-patterns
Who is it for?
Designers
Figma source files with published component library. Pull atoms and molecules directly into your designs.
Frontend Engineers
Spec-first component pages. Read the props, copy the interface, ship the component.
Product Managers
Browse category pages to see what's available. Review the changelog for recent changes.
How is it organized?
Four main sections in the sidebar:
- Getting Started — installation, quick start, design tokens
- Foundations — colors, typography, spacing, sizing, shadows, motion
- Components — all 98 components in 4 categories (atoms, molecules, organisms, templates)
- Resources — roadmap, analytics, changelog
Versioning
Current version: v4.1.0
Components follow semantic versioning. Major version bumps indicate token changes that may break existing styles. Check the changelog for the full history.