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.

React

Next.js

Vue 3

Nuxt 4

Astro

HTML

[Comece por aqui](/comecar) [Ver componentes](/componentes)

[

## Comece por aqui

Instale pelo registry do shadcn ou copie o CSS (Astro/HTML) e valide o primeiro botão.

](/comecar)[

## Fundamentos

Layout, grid, movimento, acessibilidade e estados para decisões de interface.

](/fundamentos)[

## Estilos

Tokens, cores, tipografia, ícones, espaçamento, radius e efeitos do sistema.

](/estilos)[

## Componentes

Contratos CSS para botões, forms, feedback, overlays, data display e layout.

](/componentes)

## 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](/comecar): instale pelo registry ou copie o CSS, valide o botão e siga o guia da stack do produto.

[Instale ou copie a base Registry do shadcn para React, Next.js, Vue e Nuxt; tokens.css, components.css e index.css para Astro e HTML.](/comecar) [Valide o botão Confirme Tailwind, tokens semânticos, ícones, estados e modo escuro.](/componentes/button) [Escolha a stack Siga o guia específico para React, Next.js, Vue, Nuxt, Astro ou HTML.](/comecar)

[

### Tokens semânticos

Use background, foreground, primary, card, border e demais nomes compatíveis com shadcn.

](/estilos/tokens)[

### Cores em camadas

Veja primitivas do Figma e tokens semânticos com valores claro/escuro.

](/estilos/cores)[

### Acessibilidade

Consulte critérios WCAG, padrões ARIA e decisões de estado para componentes.

](/fundamentos/acessibilidade)[

### Usar com IA

llms.txt, páginas em Markdown, regras no projeto e MCP para agentes de IA.

](/desenvolver/ia)

O Sinapse Design System reúne tokens, fundamentos, componentes e guias de implementação para manter identidade e experiência consistentes nos produtos digitais do ITpS.

### Documentação

-   [Comece por aqui](/comecar)
-   [Fundamentos](/fundamentos)
-   [Estilos](/estilos)
-   [Componentes](/componentes)

### Guias por stack

-   [React](/desenvolver/react)
-   [Next.js](/desenvolver/next)
-   [Vue 3](/desenvolver/vue)
-   [Nuxt 4](/desenvolver/nuxt)
-   [Astro](/desenvolver/astro)
-   [HTML](/desenvolver/html)

[sinapse.org.br](https://sinapse.org.br/)

-   [Termo de Uso](/termo-de-uso)
-   [Contato](/contato)

[](https://www.itps.org.br/)

© Uma iniciativa do Instituto Todos pela Saúde (ITpS)

Avenida Paulista, 1.938 - 16º andar, CEP: 01310-942 - São Paulo (SP)

[Conheça o ITpS](https://www.itps.org.br/)