Um design system,
quatro stacks sincronizadas.
Template open-source para fundar seu próprio design system multi-stack. React, Vue, Svelte e Vanilla TS compartilhando tokens, temas, conteúdo trilíngue e 50+ componentes acessíveis (WCAG 2.1 AA).
Storybooks ao vivo
Cada stack tem sua instância de Storybook 10 com as mesmas categorias de componentes, foundations e docs page trilíngue.
O que vem no template
Tudo que você precisa pra largar um design system production-ready: componentes, docs, testes, skills de automação e guidelines.
50+ componentes em 7 categorias
Layout, Navigation, Form, Feedback, Display, Tables, Disclosure, Overlay — implementados nas 4 stacks com paridade.
Sistema de tokens compartilhado
Tokens CSS em docs/shared/tokens/ consumidos pelas 4 stacks. Temas + densidades + fontes em CSS vars.
Docs trilíngue
Cada componente tem docs page de 15 seções em pt-BR / en / es via translations.json compartilhado.
A11y WCAG 2.1 AA verificado
axe-playwright roda em todas as stories via postVisit. Política rígida: zero it.skip.
Skills de automação
15+ skills Claude Code para escalar: /pipeline, /dev-react, /ux-writer, /quality, /cross-stack.
Patches versionados
Mudanças em @base-ui, reka-ui, bits-ui e sonner via patch-package + registry em PATCHES.md.
CLI tipo shadcn
Nortear CLI permite copiar componentes vanilla TS no estilo npx nortear add button.
Guidelines decisórias
11 guidelines compartilhadas (a11y, tom de voz, SEO/GEO, analytics) + por categoria de componente.
Vitest + Chromatic
Browser-mode Vitest (Playwright) + visual regression integrado em todas as stacks.
Comece em 60 segundos
Use o template no GitHub e customize tokens, marca e componentes pra fundar seu próprio design system.
# 1. Crie um repo a partir do template gh repo create meu-design-system \ --template julianamucci/design-system --public # 2. Instale a stack que vai usar cd meu-design-system/design-system-react npm install # 3. Rode o Storybook npm run storybook
A documentação completa está no README e em CONTRIBUTING.md.