Compatível com Tailwind Gera também --color-primary-500 além de --primary

Configurações

Tamanho base (px)

Escala tipográfica

Preview

Unidade base (px)

Escala gerada (--space-1 a --space-16)

Preset

Preview

Valores personalizados

5 níveis de sombra

Código CSS Gerado — :root { }

Preview — Componentes usando as variáveis geradas

Sobre CSS Variables e Design Tokens

CSS Custom Properties (variáveis CSS) permitem definir um sistema de design centralizado. Ao alterar o valor de uma variável no :root, toda a aplicação reflete a mudança instantaneamente.

Design Tokens são as decisões de design armazenadas como pares nome/valor: cores, espaçamentos, tipografia e mais. São a "fonte da verdade" compartilhada entre design e código.

Paleta de cores: 9 tons (50–900) gerados automaticamente a partir de uma cor primária
Tipografia: Escala modular baseada em razão matemática (Minor Third, Perfect Fourth…)
Espaçamento: Escala linear multiplicada pela unidade base
Compatibilidade Tailwind: Gera ambos os formatos --primary e --color-primary-500