--- title: Gerador de Escala de Espaçamento para Design System date: 2026-05-03T21:29:32Z modified: 2026-07-31T15:33:11Z permalink: "https://camaraux.com.br/ferramentas/gerador-escala-espacamento/" type: page status: publish excerpt: "" wpid: 6217 rank_math_title: "Gerador de Escala de Espaçamento para Design System | CamaraUX" rank_math_description: "Gere tokens de espaçamento com proporção matemática e exporte para CSS, SCSS, Tailwind, Android e Flutter. Grátis, sem cadastro. " rank_math_focus_keyword: escala de espaçamento, Design System parent: 5900 ancestors: - 5900 children: [] author: Lucas Camara timestamp: 2026-07-31T15:33:11Z tags: [] --- Ferramenta Espaçamento Defina um valor base e uma proporção matemática. Gere tokens de espaçamento prontos para exportar em CSS, SCSS, Tailwind, Android XML e Flutter Dart. Desenvolvido para UI/UX designers que precisam de consistência espacial em qualquer plataforma. Inicio Configurações Predefinições Tailwind Bootstrap Material Fibonacci Tamanho base **4 px** Unidade PX REM Prefixo de variável Tipo de escala Linear Geométrico Fibonacci Multiplicador geométrico 1.25 1.5 1.618 2 Pré-visualização Itens - 12 + Tabela de tokens### Resumo visual Copiar tabela | Token | px | rem | Uso sugerido | | --- | --- | --- | --- | CSS SCSS Tailwind Tokens Android XML Flutter Dart React PX REM Copiar ## 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: - [Gerador de Escala Tipográfica para Design System](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/page/gerador-escala-tipografica.md) - [Gerador de Paleta de Cores para Design System](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/page/gerador-paleta-cores.md) ### Categorias ## Ter uma pergunta ou dica de assunto? [ Entrar em contato ](/contato)