Como usar o gerador de escala de espaçamento
Insira o valor base em pixels, escolha a proporção e defina a convenção de nomenclatura. A escala é calculada instantaneamente com todos os tokens prontos para exportar.
1. Defina o valor base
O
Valor Base é o ponto de partida da escala — geralmente 4px ou 8px, que são os padrões mais adotados em design systems modernos. A partir desse valor, todos os níveis são calculados proporcionalmente.
2. Escolha a proporção
A
Proporção determina o ritmo de crescimento entre os níveis:
- Linear (×2) — dobra a cada nível: 4, 8, 16, 32, 64. Padrão do Tailwind CSS e da maioria dos sistemas modernos
- Fibonacci — progressão 1, 1, 2, 3, 5, 8, 13… multiplicada pelo base. Crescimento orgânico, harmonioso visualmente
- Terça maior (1,25) — crescimento mais sutil entre níveis adjacentes. Ideal para produtos densos em informação como dashboards
- Quarta perfeita (1,333) — mesma proporção usada em escalas tipográficas equilibradas. Boa escolha para manter consistência entre tipografia e espaçamento
- Personalizada — defina o multiplicador manualmente
3. Escolha a convenção de nomenclatura
- Tailwind —
space-1, space-2, space-4, space-8. Compatível com projetos Tailwind CSS
- Material Design —
spacing-extra-small, spacing-small, spacing-medium, spacing-large. Padrão Material Design 3
- Numérica —
spacing-100, spacing-200, spacing-300. Compatível com nomenclatura de tokens numéricos
4. Exporte para sua plataforma
Após validar a escala, copie os tokens no formato da sua stack:
- CSS — variáveis prontas no formato
:root {} com cada nível de espaçamento
- SCSS — mesmo formato com variáveis SCSS
- Tailwind — configuração pronta para
tailwind.config.js
- Android XML — arquivo de recursos XML para Android Studio
- Flutter Dart — constantes Dart prontas para uso no Flutter
Por que usar uma escala matemática, não valores arbitrários
Escolher espaçamentos na intuição — 10px aqui, 24px ali, 18px acolá — é o caminho mais rápido para um design system inconsistente. Quando cada componente usa valores diferentes sem relação entre si, o código acumula dezenas de variações que ninguém consegue prever ou manter.
Uma escala matemática resolve isso na origem. A partir de um valor base e uma proporção, todos os níveis de espaçamento seguem a mesma lógica. O resultado é um ritmo visual consistente em toda a interface — não porque “parece certo”, mas porque é matematicamente coerente.
Quando a escala precisar mudar — uma decisão de produto, um ajuste de densidade — você altera o valor base. Todos os tokens se propagam em cascata, sem precisar revisar componente por componente.
Tokens de espaçamento: o que são e como usar no design system
Cada nível da escala é um
token de espaçamento — uma variável nomeada que substitui valores fixos no código. Em vez de
padding: 16px, o componente referencia
--spacing-400 ou
space-4.
Isso cria três vantagens concretas no dia a dia do time:
Consistência: qualquer componente que usa o token se atualiza automaticamente quando o valor muda. Sem busca manual no código.
Comunicação design-dev: o nome do token no
Figma é idêntico ao nome no código, eliminando ambiguidade no
handoff.
Multiplataforma: o mesmo token semântico tem implementações em CSS, Android XML e Flutter Dart — todos exportados por esta ferramenta.
Espaçamento no Material Design 3 e no Tailwind CSS
Os dois sistemas mais usados no mercado adotam abordagens complementares.
O
Material Design 3 usa uma grade de 4px como unidade mínima, com tokens semânticos nomeados por função —
spacing-extra-small: 4px,
spacing-small: 8px,
spacing-medium: 16px. A lógica é que o nome do token comunica a intenção de uso, não o valor numérico.
O
Tailwind CSS usa uma escala linear baseada em 4px com nomenclatura numérica —
space-1: 4px,
space-2: 8px,
space-4: 16px. A escala vai de 0 a 96 com valores pré-definidos, e o gerador exporta no formato exato do
tailwind.config.js.
Esta ferramenta suporta os dois padrões de nomenclatura, além de exportação para Android e Flutter com os formatos nativos de cada plataforma.
Outras ferramentas para design system
Complete sua base de tokens com as outras ferramentas da CamaraUX:
