Tokens · componentes · guias
Sinapse Design System
Tokens, componentes e guias para os produtos digitais do ITpS em React, Next.js, Vue, Nuxt, Astro ou HTML.
Comece por aqui
Instale pelo registry do shadcn ou copie o CSS (Astro/HTML) e valide o primeiro botão.
Fundamentos
Layout, grid, movimento, acessibilidade e estados para decisões de interface.
Estilos
Tokens, cores, tipografia, ícones, espaçamento, radius e efeitos do sistema.
Componentes
Contratos CSS para botões, forms, feedback, overlays, data display e layout.
Da instalação ao produto
O Sinapse Design System entrega um contrato visual único para os produtos digitais do ITpS: tokens semânticos, modo claro/escuro,
escala Tailwind v4 e classes itps-*.
A adoção começa em Comece por aqui: instale pelo registry ou copie o CSS, valide o botão e siga o guia da stack do produto.
Tokens semânticos
Use background, foreground, primary, card, border e demais nomes compatíveis com shadcn.
Cores em camadas
Veja primitivas do Figma e tokens semânticos com valores claro/escuro.
Acessibilidade
Consulte critérios WCAG, padrões ARIA e decisões de estado para componentes.
Usar com IA
llms.txt, páginas em Markdown, regras no projeto e MCP para agentes de IA.