CSS público · tokens · componentes
Sinapse UI Theme Layer
Uma camada CSS framework-agnostic para levar tokens, estados e componentes Sinapse para React, Next.js, Vue, Nuxt, Astro ou HTML.
Comece por aqui
Copie os arquivos CSS, importe depois do Tailwind 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 cópia ao produto
O Sinapse UI Theme Layer entrega um contrato visual único para produtos digitais: tokens OKLCH, modo claro/escuro,
escala Tailwind v4 e classes itps-*.
A adoção começa por Comece por aqui, passa pela validação do botão e segue para o guia da stack usada pelo produto.
Tokens semânticos
Use background, foreground, primary, card, border e demais nomes shadcn-compatible.
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.
Blocks
Combine componentes em padrões maiores para páginas, forms e aplicações.