Style Guide
A comprehensive design system built with Next.js and Tailwind CSS. Explore our color palettes, typography, components, and design patterns.
Semantic Color System
Carefully crafted color scales with semantic tokens that adapt seamlessly between light and dark modes.
Production-Ready Components
Fully accessible UI components with consistent styling, states, and interactions across all patterns.
Accessibility First
WCAG 2.1 AA compliant with proper contrast ratios, focus states, and keyboard navigation support.
Design Principles
- •Accessibility first: All components meet WCAG 2.1 AA contrast requirements
- •Semantic naming: Tokens describe purpose, not appearance
- •Mode agnostic: Components reference semantic tokens, not raw values
- •Consistent spacing: 5px base unit throughout the entire system
- •Predictable behavior: Same interaction patterns across all components