Harbour UI
A design system and component library built for scale. Every component is accessible, composable, and built with consistent design tokens.
Design Tokens
Brand
#6366f1
Success
#22c55e
Danger
#ef4444
Warning
#f59e0b
Components
Button
Trigger actions. Supports 5 variants, 3 sizes, loading state.
Input
Text fields with labels, error, success, and helper text.
Badge
Status indicators and category labels.
Card
Content containers with composable subcomponents.
Modal
Accessible dialog overlay with keyboard and focus management.
Toggle
Controlled boolean switch with smooth animation.
Avatar
User representations with image, initials fallback, and status.
Principles
Accessible
ARIA roles, keyboard navigation, and focus management built into every component.
Composable
Components accept children, refs, and spread props — easy to extend without forking.
Consistent
Shared design tokens ensure spacing, color, and typography stay coherent at scale.