Download tokensExportBrandbook

Download tokens

All three files are generated on every build from styles/tokens.css. If the site changes a value, the download changes with it.

Files

fluxr-tokens.css

Custom properties for both themes. Separate RGB channels, ready for <alpha-value>.

Download

fluxr-tokens.json

The same tokens with resolved hex — for design tools and scripts.

Download

fluxr-tailwind.theme.js

tailwind.config fragment: colors, families, breakpoints and radii.

Download

How to use

uso02

Import the CSS before your own stylesheet and apply the Tailwind fragment. shadcn components are mapped on the semantic tokens page.

@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);
}

Typography

/* 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');