Skip to main content

Welcome to Lufa Design System

A modern, accessible design system built with React and vanilla CSS using design tokens.

Try Dark Mode

Switch to dark mode using the toggle in the navbar to see all components adapt automatically!

Getting Started​

Get up and running with Lufa Design System in minutes.

  • Installation - Install and configure the design system
  • Usage - Start using components in your project
  • Theming - Customize colors, typography, and more

Tokens​

Learn about the core design tokens that power Lufa.

  • Colors - Semantic color system with dark mode support
  • Typography - Type scale and font system
  • Spacing - Standardized spacing scale
  • Shadows - Elevation and depth system

Components​

Browse our collection of accessible React components.

Resources​