Comece por aqui

Diretrizes de UX, tokens, componentes e código.

terminal main.css

@import "tailwindcss";
@import "@itps/styles";

React

Nuxt 4

Astro

Como consumir no seu stack arrow_forward Ver componentes

Tokens OKLCH

Primitives base/primary/secondary/alert/success + semantic shadcn. Light e dark mode.

palette

Compatível shadcn

Naming idêntico shadcn, shadcn-vue e Preline. Instala biblioteca, vira coral Sinapse.

extension

Consumir no seu stack

Guias prontos React, Vue 3, Nuxt 4 e Astro. Mesmo CSS, qualquer framework.

code

Um DS que vive no seu stack

O Sinapse é um Design System framework-agnostic. Os tokens vivem em @itps/styles — um pacote CSS único, consumido igual em React, Vue 3, Nuxt 4, Astro ou HTML puro.

Os semantic tokens usam o mesmo naming de shadcn, shadcn-vue e Preline. Você instala a biblioteca headless do seu framework, carrega @itps/styles e os componentes herdam o coral Sinapse sem configuração extra.

Não é uma camada por framework. É um único CSS — tokens OKLCH, light/dark, escala Tailwind v4 — que cada time consome do jeito do seu stack.

Tokens OKLCH

Primitives base/primary/secondary/alert/success + semantic shadcn. Light e dark pareados.

palette

Drop-in shadcn / Preline

Mesma nomenclatura de --background, --primary, --card, --border. Zero adapter.

extension

Mesmo CSS, qualquer framework

Astro, Vue 3, Nuxt 4, React e HTML puro consomem o mesmo bundle.

hub

Guias prontos

Snippets de consumo por stack — shadcn-vue, shadcn, Preline e tokens puros.

code