--- title: "Espaçamento no Design System: Como Criar Tokens com Proporção Matemática" date: 2026-05-04T00:12:41Z modified: 2026-07-29T01:39:34Z permalink: "https://camaraux.com.br/espacamento-design-system-tokens/" type: post status: publish excerpt: Espaçamentos escolhidos na intuição garantem inconsistência. Veja como criar uma escala matemática, definir spacing tokens e exportar para CSS, Android e Flutter. wpid: 6268 categories: - Design Systems tags: - Design Systems - css variables - Design System - Design Tokens - Figma Variables - material design - Spacing Tokens - tailwind css - Tokens de Espaçamento rank_math_title: "Espaçamento no Design System: Como Criar Spacing Tokens | CamaraUX" rank_math_description: Espaçamentos arbitrários viram dívida de design. Aprenda a criar uma escala matemática, definir spacing tokens e exportar para CSS, Android e Flutter. rank_math_focus_keyword: espaçamento no design system featured_image: /wp-content/uploads/2026/05/Espacamento-em-design-system.webp featured_image_alt: Ilustração isométrica minimalista de blocos e escala de espaçamento em interface digital em tons de roxo author: Lucas Camara timestamp: 2026-07-29T01:39:34Z --- Espaçamentos escolhidos na intuição garantem inconsistência garantida. Veja como definir uma escala matemática, criar spacing tokens e exportar para CSS, Android e Flutter. O espaçamento é a decisão de design que mais se repete em qualquer produto digital. A cada componente criado, o designer decide o padding do botão, a margem entre seções, o gap entre ícone e texto. Multiplicado por centenas de componentes e dezenas de páginas, são milhares de decisões espaciais por produto. Quando essas decisões são tomadas na intuição — 10px aqui, 24px ali, 18px em outro lugar — o resultado é um código com dezenas de valores de `margin` e `padding` sem relação entre si. Cada desenvolvedor escolhe o que “parece certo”. Cada designer adiciona o que “parece proporcional”. Em seis meses, o produto acumula inconsistências que ninguém consegue rastrear ou corrigir em escala. Um sistema de espaçamento bem estruturado é o antídoto. Este guia cobre o processo completo — da escolha da base matemática à exportação de [spacing tokens](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/page/gerador-escala-espacamento.md) para web, Android e Flutter. ## O que é um sistema de espaçamento? Um sistema de espaçamento é um conjunto de valores predefinidos que govern todas as decisões espaciais de uma interface — margens, paddings, gaps, alturas e larguras. Em vez de escolher valores livremente, designers e desenvolvedores referenciam tokens nomeados que mapeiam para valores fixos na escala. Na prática: em vez de `padding: 16px`, o componente usa `--spacing-400` ou `space-4`. Em vez de `margin-bottom: 24px`, usa `--spacing-600`. O valor numérico está encapsulado no token — o que fica exposto é o nome semântico. Um sistema de espaçamento tem três componentes: **1. Valor base** — a unidade fundamental da qual todos os valores da escala são derivados. Os padrões mais comuns são 4px e 8px. **2. Escala** — a progressão matemática dos valores disponíveis no sistema. Pode ser linear, Fibonacci ou baseada em proporções musicais. **3. Tokens** — as variáveis nomeadas que mapeiam cada nível da escala. Existem em duas camadas: primitivos (os valores brutos) e semânticos (o contexto de uso). ## Por que espaçamentos arbitrários quebram o design system O primeiro sinal de um sistema de espaçamento inexistente é a proliferação de valores no código: `margin: 10px`, `margin: 12px`, `margin: 14px`, `margin: 16px` — quatro valores quase idênticos, cada um adicionado por um motivo diferente em momentos diferentes, por pessoas diferentes. Sem uma escala como referência, nenhum novo membro do time consegue saber qual valor usar em um componente novo. A decisão fica à cargo da intuição de cada um. O que deveria ser um sistema coeso vira uma coleção de decisões individuais desconectadas. O segundo problema é manutenção. Se o produto decide reduzir a densidade da interface — uma decisão comum quando o produto amadurece e a base de usuários inclui pessoas menos familiarizadas com o produto — sem um sistema de tokens, isso significa revisar componente por componente. Com tokens, é uma mudança em um arquivo que propaga para todo o sistema. O terceiro é o [handoff para desenvolvimento](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/documentacao-de-design-handoff-para-desenvolvedores.md). Sem spacing tokens, o desenvolvedor recebe um Figma com valores arbitrários em cada componente e precisa adivinhar se `24px` e `25px` são intencionalmente diferentes ou se um deles é um erro. Com tokens, a especificação é inequívoca. ## Base 4px ou 8px — qual escolher? A escolha da base é a decisão fundacional do sistema. As duas opções mais adotadas no mercado têm lógicas diferentes: ### Base 8px A grade de 8 pontos é o padrão mais disseminado — adotada pelo Material Design, pelo iOS Human Interface Guidelines e pela maioria dos design systems de grandes produtos. A razão matemática é simples: 8 é divisível por 1, 2, 4 e 8, o que significa que qualquer valor da escala (8, 16, 24, 32, 40, 48) é sempre divisível sem gerar frações. Para produtos com múltiplas plataformas, a base 8 tem outra vantagem: as resoluções de tela mais comuns (360px, 375px, 390px, 768px, 1024px, 1440px) são divisíveis por 8, o que simplifica o alinhamento de elementos no grid. **Quando usar:** produtos que precisam de densidade moderada a baixa, com hierarquia clara entre seções e componentes. A maioria dos produtos SaaS e apps se encaixa aqui. ### Base 4px A base 4 oferece mais granularidade — permite valores menores como 4px, 8px, 12px, 16px, 20px — úteis em componentes compactos como badges, chips e inputs de tabela. O custo é mais variáveis no sistema e mais decisões a tomar. **Quando usar:** produtos com alta densidade de informação — dashboards de analytics, ERPs, sistemas de gestão — onde o espaço é disputado e a granularidade fina faz diferença. > **Nota prática**: na maior parte dos casos, a base 8 com uma exceção de 4px para componentes compactos é o equilíbrio ideal. É o que o Material Design 3 adota: grid de 8px com uma camada de 4px para casos específicos. ## Como definir sua escala de espaçamento A escala determina quais valores estarão disponíveis no sistema e como eles progridem. Existem três abordagens principais: ### Escala linear A abordagem mais simples: valores crescem por adição de um múltiplo fixo da base. Com base 8, a escala seria: 8, 16, 24, 32, 40, 48, 64, 80, 96… É fácil de memorizar, fácil de comunicar e fácil de implementar. O problema é que os saltos são uniformes — a diferença entre 8px e 16px é a mesma que entre 80px e 88px, o que pode criar uma progressão visual sem ritmo nos espaçamentos maiores. ### Escala de Fibonacci A sequência de Fibonacci (1, 1, 2, 3, 5, 8, 13, 21, 34…) multiplicada pela base gera uma progressão com saltos crescentes — pequenos no início, maiores conforme a escala avança. Com base 4, isso produziria: 4, 4, 8, 12, 20, 32, 52, 84… O resultado é uma hierarquia espacial com ritmo mais orgânico — espaçamentos pequenos entre elementos relacionados, saltos maiores entre seções independentes. Funciona bem em produtos editoriais e com forte componente visual. ### Proporção matemática (terça maior, quarta perfeita) A mesma lógica usada na [escala tipográfica](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/escala-tipografica-design-system.md) pode ser aplicada ao espaçamento. Partindo de um valor base e multiplicando por uma proporção fixa a cada nível: - **Terça maior (1,25)**: progressão sutil, ideal para sistemas densos - **Quarta perfeita (1,333)**: saltos equilibrados, boa coerência com escalas tipográficas que usam a mesma proporção A vantagem dessa abordagem é a consistência com a tipografia — quando escala tipográfica e escala de espaçamento usam a mesma proporção matemática, o ritmo visual do produto é naturalmente coeso. Use o [Gerador de Escala de Espaçamento](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/page/gerador-escala-espacamento.md) para calcular e exportar sua escala em qualquer um desses formatos, com tokens prontos para CSS, SCSS, Tailwind, Android XML e Flutter Dart. ## Tokens de espaçamento: primitivos vs. semânticos Um sistema de tokens bem estruturado tem duas camadas, e a distinção entre elas é o que permite que o sistema escale sem perder controle. ### Tokens primitivos São os valores brutos da escala — sem contexto de uso, apenas o valor numérico mapeado para um nome: ``` --spacing-100: 4px; --spacing-200: 8px; --spacing-300: 12px; --spacing-400: 16px; --spacing-500: 20px; --spacing-600: 24px; --spacing-800: 32px; --spacing-1000: 40px; --spacing-1200: 48px; --spacing-1600: 64px; ``` Tokens primitivos nunca são usados diretamente nos componentes. Eles são a camada de valores da qual os tokens semânticos fazem referência. ### Tokens semânticos São os tokens que os componentes consomem diretamente. O nome comunica a intenção de uso, não o valor: ``` --spacing-inset-sm: var(--spacing-200); /* padding interno compacto */ --spacing-inset-md: var(--spacing-400); /* padding interno padrão */ --spacing-inset-lg: var(--spacing-600); /* padding interno amplo */ --spacing-stack-xs: var(--spacing-100); /* distância vertical mínima */ --spacing-stack-sm: var(--spacing-200); /* distância vertical compacta */ --spacing-stack-md: var(--spacing-400); /* distância vertical padrão */ --spacing-stack-lg: var(--spacing-800); /* distância entre seções */ --spacing-inline-xs: var(--spacing-100); /* distância horizontal mínima */ --spacing-inline-sm: var(--spacing-200); /* distância horizontal compacta */ --spacing-inline-md: var(--spacing-400); /* distância horizontal padrão */ ``` Essa separação é o que torna o sistema resiliente. Se você decidir aumentar o `spacing-inset-md` de 16px para 20px, a mudança é feita em um único token semântico — todos os componentes que o referenciam se atualizam automaticamente. Para mais sobre como essa arquitetura se integra ao [design system como um todo](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/design-system-guia-escalabilidade-roi.md), o guia completo cobre os três tipos de tokens e como organizá-los. ## Espaçamento no Material Design 3 vs. Tailwind CSS Os dois sistemas mais usados no mercado têm abordagens diferentes para nomear e organizar os tokens de espaçamento: ### Material Design 3 O MD3 usa uma base de 4px com nomenclatura semântica. Os tokens são nomeados pela função — `spacing-extra-small`, `spacing-small`, `spacing-medium`, `spacing-large`, `spacing-extra-large` — com valores que crescem progressivamente: 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48. A lógica semântica é uma das forças do MD3: o token `spacing-medium` comunica intenção sem expor o valor numérico. O problema é que “médio” é relativo — em um componente compacto, 16px pode ser grande; em um layout de página, pode ser pequeno. O sistema exige documentação clara de quando usar cada token. ### Tailwind CSS O Tailwind usa escala numérica com base 4px e nomenclatura por multiplicador: `space-1` (4px), `space-2` (8px), `space-3` (12px), `space-4` (16px), `space-6` (24px), `space-8` (32px)… A progressão não é estritamente linear — o Tailwind pula alguns valores e adiciona frações como `space-0.5` (2px) e `space-1.5` (6px) para casos específicos. A vantagem é a previsibilidade: qualquer desenvolvedor que conhece Tailwind sabe instantaneamente que `p-4` é `padding: 16px`. O custo é que a escala não comunica intenção — `p-4` e `p-6` são igualmente válidos em qualquer contexto, o que pode gerar inconsistência sem disciplina do time. ## Espaçamento multiplataforma: CSS, Android e Flutter Um dos maiores desafios em produtos com múltiplas plataformas é garantir que os spacing tokens tenham valores equivalentes em cada stack tecnológica. O mesmo token `spacing-400` precisa ser `16px` no CSS, `16dp` no Android e `16.0` no Flutter. ### CSS e SCSS ``` :root { --spacing-100: 4px; --spacing-200: 8px; --spacing-400: 16px; --spacing-600: 24px; --spacing-800: 32px; } ``` ### Android XML ``` 4dp 8dp 16dp 24dp 32dp ``` ### Flutter Dart ``` class AppSpacing { static const double spacing100 = 4.0; static const double spacing200 = 8.0; static const double spacing400 = 16.0; static const double spacing600 = 24.0; static const double spacing800 = 32.0; } ``` Manter esses três arquivos sincronizados manualmente é o caminho mais rápido para inconsistências. O [Gerador de Escala de Espaçamento](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/page/gerador-escala-espacamento.md) exporta os três formatos simultaneamente a partir da mesma escala — garantindo que os valores sejam idênticos em todas as plataformas. Para um processo de [handoff](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/documentacao-de-design-handoff-para-desenvolvedores.md) eficiente, os tokens exportados pela ferramenta podem ser entregues diretamente ao time de desenvolvimento como especificação. ## Como integrar os spacing tokens no Figma No Figma, os spacing tokens são implementados como **Variables** — um recurso disponível desde 2023 que permite criar, organizar e aplicar tokens diretamente em componentes e frames. O fluxo recomendado: **1. Crie uma Variable Collection chamada “Spacing”** Organize em dois grupos: `primitive` e `semantic`. Os tokens primitivos ficam em `primitive/100`, `primitive/200`, etc. Os semânticos ficam em `semantic/inset/sm`, `semantic/stack/md`, etc. **2. Defina os tokens primitivos primeiro** Insira os valores numéricos diretamente. Esses são os valores que nunca mudam — só mudam quando a escala inteira é revisada. **3. Crie os tokens semânticos referenciando os primitivos** No Figma, uma Variable pode referenciar outra. `semantic/inset/md` aponta para `primitive/400` (16px). Se você mudar o valor de `primitive/400`, todos os tokens semânticos que o referenciam se atualizam automaticamente. **4. Aplique nos componentes** Ao invés de inserir `16` manualmente no campo de padding, selecione a Variable `semantic/inset/md`. O componente agora está vinculado ao sistema. Essa integração também habilita o suporte a múltiplos temas (light/dark, compacto/confortável) sem duplicar componentes — basta criar modos diferentes na mesma Variable Collection e alternar entre eles. É o mesmo princípio que garante [acessibilidade cromática](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/post/acessibilidade-cores-design-system.md) quando tokens de cor são usados corretamente: a lógica semântica abstrai o valor e permite adaptação por contexto. ## Perguntas frequentes ### **Qual a diferença entre margin, padding e gap no contexto de tokens?** Os três são dimensões espaciais, mas com semântica diferente. `padding` (inset) é o espaço interno de um componente — entre o borde e o conteúdo. `margin` (stack/inline) é o espaço externo — entre um componente e o próximo. `gap` é o espaço entre itens dentro de um container flex ou grid. Um sistema de tokens bem estruturado tem tokens específicos para cada contexto: `spacing-inset` para paddings, `spacing-stack` para margens verticais, `spacing-inline` para margens horizontais. ### **Posso usar os mesmos tokens de espaçamento em mobile e desktop?** Sim, mas com atenção. Os valores base geralmente são os mesmos (8px continua sendo 8px em qualquer viewport), mas os tokens semânticos de nível de layout — o espaçamento entre seções de uma página, por exemplo — frequentemente precisam de valores diferentes em mobile e desktop. O Figma Variables resolve isso com múltiplos modos na mesma collection: um modo `mobile` e um modo `desktop` com valores diferentes para os mesmos tokens semânticos de layout. ### **Quantos tokens de espaçamento meu sistema precisa?** O suficiente para cobrir os casos de uso reais do produto, não mais. Um sistema com 6 a 10 tokens primitivos (de 4px a 64px ou 80px) cobre a esmagadora maioria dos produtos. Sistemas com dezenas de tokens primitivos geralmente indicam que não há uma lógica unificada — é uma lista de valores arbitrários renomeada, não uma escala. ### **Como migrar um produto existente para um sistema de espaçamento?** Em etapas. Comece com uma auditoria: levante todos os valores de `margin`, `padding` e `gap` do produto atual. Agrupe os valores próximos (10px, 11px e 12px provavelmente representam a mesma intenção) e mapeie cada grupo para um token da nova escala. Depois, substitua os valores em fases — começando pelos componentes mais usados. Tentar migrar tudo de uma vez gera regressões difíceis de rastrear. ## Conclusão Espaçamentos arbitrários são o tipo de problema que parece pequeno no início e vira dívida de design crítica quando o produto escala. Definir um sistema de espaçamento com base matemática, tokens bem nomeados e exportação para todas as plataformas não é overhead de processo — é o que permite que o time tome decisões espaciais rápidas e consistentes sem depender de aprovação individual a cada componente. O ponto de partida mais direto: use o [Gerador de Escala de Espaçamento da CamaraUX](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/page/gerador-escala-espacamento.md) para definir sua base, escolher a proporção e exportar os tokens prontos para CSS, Tailwind, Android e Flutter. Em menos de cinco minutos você tem uma escala documentada e exportável — sem a parte tediosa de calcular cada valor manualmente. Se o seu desafio é estruturar um design system do zero — tokens de espaçamento, tipografia, cores e componentes integrados — a consultoria da CamaraUX pode acelerar esse processo. [Fale com a gente →](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/page/contato.md) ## Topics **Categorias:** [Design Systems](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/category/design-systems.md) **Tags:** [css variables](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/css-variables.md), [Design System](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/design-system.md), [Design Tokens](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/design-tokens.md), [Figma Variables](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/figma-variables.md), [material design](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/material-design.md), [Spacing Tokens](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/spacing-tokens.md), [tailwind css](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/tailwind-css.md), [Tokens de Espaçamento](https://camaraux.com.br/wp-content/uploads/wp-mfa-exports/taxonomy/post_tag/tokens-de-espacamento.md)