30+ components. One file to customize. Token-based design system built on Base UI primitives. WCAG AA accessible. Light and dark mode. Browse everything in the interactive viewer before changing a thing.
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.
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 /audit:words.
Tokens control how your app looks. The design brief controls how Claude understands your brand when it writes copy and generates UI: voice, tone, principles, and reference products. One holds values, the other holds intent. It lives in your repo at .claude/design-brief.md, ships pre-filled with example content the skills ignore until you make it yours, and is completely optional. The brief never sets colors, spacing, or fonts, and it can't produce a look your tokens don't support. For a different look, edit tokens.css. What it shapes is the words Claude writes and the design judgment it makes within your token vocabulary.
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.
WCAG AA compliance is enforced in CI, not deferred. All components are built on Base UI 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.
12 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.
Consistency and accessibility are validated automatically. Every pull request that touches the UI is checked for design-token, spacing, and contrast issues (these block the merge) plus UX copy and UI patterns (these post as suggestions), with the results grouped into a single PR comment. You don't invoke anything; run pnpm design:validate locally to run the same checks by hand. For prototypes and marketing pages, /design explore sets a distinctive creative direction across 7 aesthetics, and /design extract-system maps the choices you keep back into tokens, so a prototype can graduate into production instead of being thrown away. And when you want a second opinion on your own work, the on-demand audits review it against your standards: /audit:visual for visual design, /audit:words for UX writing, and /audit:a11y for WCAG accessibility (via axe-core). Audits are opt-in, never block a commit, and cite the rule behind every finding.
$249 one-time. Lifetime access. Unlimited projects.
Get Sinter: $249