Skip to main content
Learn the core principles for building consistent, accessible interfaces.

​
Quick Start

1

Install Dependencies

Add Spartan UI and required dependencies to your Angular project.
ng add @spartan-ng/cli
2

Configure Tailwind

Set up Tailwind CSS with our design tokens and theme configuration.
npx @spartan-ng/cli@latest add ui-button
3

Start Building

Import components and start building with our design system.
import { HlmButtonDirective } from "@spartan-ng/helm/button"

​
Design Principles

Consistency

Maintain visual and functional consistency across all components and interactions.
  • Use the same colors from our palette
  • Apply consistent spacing scale
  • Follow typography hierarchy

Accessibility

Ensure all components are accessible by default with proper ARIA labels and keyboard navigation.
  • WCAG AA contrast ratios
  • Keyboard navigation support
  • Screen reader compatibility

Performance

Optimize components for fast loading and smooth interactions.
  • Lazy load heavy components
  • Optimize bundle sizes
  • Use Angular signals for reactivity

Flexibility

Build components that can adapt to different contexts and use cases.
  • Responsive by default
  • Dark mode support
  • Customizable with variants

​
Implementation Tips

Check if a component exists in @spartan-ng before creating custom ones. This ensures consistency and reduces maintenance burden.
Use foreground, background, primary, etc. instead of hard-coded colors. This ensures proper dark mode support and maintainability.
Use Tailwind’s spacing utilities (p-4, m-2, gap-6) for consistent spacing throughout the application.
Ensure your components look good in both themes. Always test with the theme toggle to catch any issues.
Design for mobile by default, then enhance for larger screens with md:, lg: prefixes.

​
Code Examples

​
Using Color Tokens

<!-- Correct: Use semantic tokens -->
<div class="bg-card text-card-foreground border border-border">Content</div>

<!-- Incorrect: Hard-coded colors -->
<div class="bg-white text-gray-900 border border-gray-200">Content</div>

​
Responsive Design

<!-- Mobile-first approach -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <Card />
  <Card />
  <Card />
</div>

​
Dark Mode Support

<!-- Automatic dark mode with semantic tokens -->
<div class="bg-background text-foreground">
  <!-- Uses light colors in light mode, dark colors in dark mode -->
</div>

<!-- Manual dark mode override when needed -->
<div class="bg-white dark:bg-gray-900">Content</div>

​
Checklist

Before shipping any feature, ensure you’ve covered: