Design System Atoms
Basic building blocks that cannot be broken down any further without losing their meaning. These are the fundamental elements that form the foundation of our design system.
Color System
Accessible color palette with brand colors and semantic states
Features: 2 brand colors, 4 status colors, 30+ total shades, 100% WCAG AA compliant, Dark mode support
Aa
Typography
Inter font family with responsive scales and accessibility features
Heading 1
Heading 2
Heading 3
Body text with optimal readability and contrast
Caption and helper text
Features: Inter font family, 6 heading levels, Responsive scaling, Line height optimization, Accessibility focused
BTN
Buttons
Interactive button components with multiple variants and states
Features: 5 button variants, 3 sizes, Loading states, Disabled states, Icon support, Full accessibility
Icon System
Scalable SVG icons with accessibility features and categories
Features: 48+ icons, 6 categories, 7 sizes, SVG format, WCAG accessible, Animation support
Form Elements
Accessible form components with validation states and patterns
Features: 8+ input types, 4 validation states, WCAG AA compliant, Real-time validation, Dark mode support
Atomic Statistics
5
Atomic Elements
48+
Total Components
100%
WCAG AA
2
Theme Modes
6
Icon Categories