The Design System is currently in Early Beta. Some sections are still in development.
The Stack
Our design system is built on top of proven technologies:Angular
Google’s frontend framework. Powerful & reliable.
Spartan UI
Headless Angular UI primitives and components.
Tailwind CSS
Utility-first CSS framework with great design baked in.
shadcn/ui
Composable patterns and modern design conventions.
Explore
Colors
Comprehensive color system with semantic meanings, contrast ratios, and dark mode support.
Typography
Text styles, font scales, and hierarchy for consistent content presentation.
Buttons
Interactive button components with variants, sizes, and states documentation.
Best Practices
Design principles, accessibility guidelines, and best practices for implementation.
Design Principles
Our design system is built on four core principles:Consistency
Consistency
Maintain visual and functional consistency across all components and interactions. Use the same colors from our
palette, apply consistent spacing scale, and follow typography hierarchy.
Accessibility
Accessibility
Ensure all components are accessible by default with proper ARIA labels and keyboard navigation. We follow WCAG AA
contrast ratios and provide screen reader compatibility.
Performance
Performance
Optimize components for fast loading and smooth interactions. This includes lazy loading heavy components,
optimizing bundle sizes, and using Angular signals for reactivity.
Flexibility
Flexibility
Build components that can adapt to different contexts and use cases. All components are responsive by default,
support dark mode, and are customizable with variants.