Baixar tokensExportBrandbook

Baixar tokens

Os três arquivos são gerados a cada build a partir de styles/tokens.css. Se o site mudar um valor, o download muda junto.

Arquivos

fluxr-tokens.css

Custom properties dos dois temas. Canais RGB separados, prontos para <alpha-value>.

Baixar

fluxr-tokens.json

Os mesmos tokens com hex resolvido — para ferramentas de design e scripts.

Baixar

fluxr-tailwind.theme.js

Fragmento de tailwind.config: cores, famílias, breakpoints e raios.

Baixar

Como usar

uso02

Importe o CSS antes da sua folha de estilos e aplique o fragmento do Tailwind. Os componentes shadcn são mapeados na página de tokens semânticos.

@import './fluxr-tokens.css';

.botao {
  background: rgb(var(--color-primary));
  color: rgb(var(--color-on-primary));
  box-shadow: 0 4px 16px rgb(var(--color-primary) / 0.25);
}

Sistema

/* Manrope (corpo/UI) + Space Grotesk (display) + JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300..800&family=Space+Grotesk:wght@400..700&family=JetBrains+Mono:wght@400..700&display=swap');