Design system
30 components. One file to customize. Token-based design system built on shadcn/ui and Radix primitives. WCAG AA accessible. Light and dark mode. Browse everything in the interactive viewer before changing a thing.
Components
Button, Input, Select, Dialog, Tabs, Toast, Dropdown, Avatar, Badge, Card, Tooltip, Popover, Sheet, Skeleton, Table, Command, Switch, Checkbox, Radio, Slider, and more. Each component uses semantic design tokens. Browse and test them all in the interactive viewer.
Design tokens
Three-tier architecture: raw values, semantic tokens, and component tokens. Change your entire color scheme by editing tokens.css. Tailwind CSS 4 integration with custom ESLint rules that enforce semantic token usage (no hardcoded colors allowed). UX writing guidelines included for button labels, error messages, and empty states, with copy validation via /design.
Internationalization
next-intl v4 with locale-prefixed routing. All UI text in centralized JSON files, enforced by ESLint. Type-safe translation keys with TypeScript autocomplete. Ships with English, ready for any language.
Accessibility
WCAG AA compliance is enforced in CI, not deferred. All components are built on Radix primitives with proper ARIA attributes, focus management, and keyboard handling. The /design command includes automated contrast checking (4.5:1 for normal text, 3:1 for large text). Custom ESLint rules catch missing aria-labels on icon buttons and outline removal without focus-visible replacements. CI runs accessibility audits on every pull request. Color is never used as the sole status indicator.
Design patterns
11 documented pattern guides covering buttons, forms, typography, loading states, empty states, error handling, cards, layout, motion, icon+text pairing, and page composition. Each pattern defines when to use it, how to implement it, and what to avoid. State coverage is required: every page handles loading, error, empty, and success states. Skeletons match the dimensions of loaded content to prevent layout shift. UX heuristics (Fitts’s law, Hick’s law, visual hierarchy) are built into the page composition guidance.
AI-assisted design quality
The /design command orchestrates four specialized checks: token compliance (are you using semantic tokens, not hardcoded values), WCAG AA contrast, state coverage (loading, error, empty, success), and usability review. Results are aggregated into a single scored report. For creative work, /design explore generates distinctive UI prototypes across 7 aesthetic directions (brutalist, maximalist, minimalist, retro-futuristic, organic, luxury, playful), then /design extract-system maps your choices back to semantic tokens for production use. A dual component registry (design viewer + skill registry) is auto-synced from component source code so Claude Code always knows what components exist and their exact variants.
Ready to go live?
$249 one-time. Lifetime access. Unlimited projects.
Get Sinter: $249