Tokens de Espaçamento
Design System · Arrow DS · Dimensão 03 Espaçamento
Versão: 1.0 · Status: Validado
Âncora base: 4px
Depende de:
Usado por: Todos os componentes de UI, composição de layout, estrutura de página
Princípios da Dimensão
O espaçamento é a respiração do produto.
A Effecti é o antídoto para a frieza do mercado que serve. Um produto que lida com licitação, prazo, CNPJ e processo jurídico já traz densidade cognitiva intrínseca. A interface não precisa adicionar mais densidade visual em cima disso. O arejado como padrão único é uma declaração: o espaço é parte da experiência, não um luxo.
O sistema como decisão, não como lista de valores.
Na Effecti, a escala de espaçamento não é uma lista de valores arbitrários é um sistema de decisão. Cada token carrega intenção. A base 4px garante alinhamento em qualquer grid e compatibilidade com o padrão de 8px do mercado. Todo valor é múltiplo de 4.
Nenhum valor arbitrário entra no código de produto.
O código de produto usa exclusivamente tokens semânticos. Os primitivos existem como camada de definição não como referência direta em componentes.
Fundação
| Propriedade | Valor | Descrição |
|---|---|---|
| Base | 4px | Unidade mínima todo valor é múltiplo de 4 |
| Segmento micro | 4px–24px | Interior de componentes padding, gap interno |
| Segmento macro | 32px–96px | Composição e layout de página |
| Modo de operação | Único (arejado) | Sem modos compacto ou confortável |
css
:root {
--space-base: 4px;
}Regra: O sistema opera em modo único. Não existem três densidades para o designer escolher livremente. Existe um padrão e exceções estruturais claramente definidas.
Primitivos
Segmento micro interior de componentes
| Token Primitivo | Valor | Intenção principal |
|---|---|---|
space-4 | 4px | Gap ícone + label, espaçamento mínimo |
space-8 | 8px | Padding interno de botão, gap de badge |
space-12 | 12px | Padding input, gap de form row |
space-16 | 16px | Âncora padding de card padrão |
space-20 | 20px | Padding de card intermediário |
space-24 | 24px | Padding de card arejado, gap entre grupos |
Segmento macro composição e layout
| Token Primitivo | Valor | Intenção principal |
|---|---|---|
space-32 | 32px | Gap entre seções próximas |
space-40 | 40px | Margin entre blocos de conteúdo |
space-48 | 48px | Gap entre colunas de layout |
space-64 | 64px | Padding de seção padrão |
space-80 | 80px | Espaço entre módulos de dashboard |
space-96 | 96px | Hero, separação estrutural máxima |
Regra: Primitivos nunca entram no código de produto diretamente. Todo componente referencia apenas tokens semânticos.
Stops removidos do Arrow DS
| Token anterior | Valor | Motivo da remoção |
|---|---|---|
spacing-2 | 2px | Micro-ajuste sem intenção não é múltiplo de 4 |
spacing-6 | 6px | Não é múltiplo de 4 substituído por 4 ou 8 |
spacing-10 | 10px | Não é múltiplo de 4 substituído por 8 ou 12 |
spacing-14 | 14px | Stop não formalizado substituído por 12 ou 16 |
Tokens Semânticos
Categoria: Componente Interno
Papel: Espaçamentos aplicados dentro de um componente padding, gap interno, distância entre elementos de UI.
| Token | Primitivo | Valor | Uso |
|---|---|---|---|
space.component.xs | space-4 | 4px | Gap ícone + label, badge interno |
space.component.sm | space-8 | 8px | Padding interno de botão (vertical) |
space.component.md | space-12 | 12px | Padding input, gap de form row |
space.component.lg | space-16 | 16px | Padding de card compacto |
space.component.xl | space-24 | 24px | Padding de card arejado (padrão) |
css
--space-component-xs: var(--space-4); /* 4px */
--space-component-sm: var(--space-8); /* 8px */
--space-component-md: var(--space-12); /* 12px */
--space-component-lg: var(--space-16); /* 16px */
--space-component-xl: var(--space-24); /* 24px */Combinações recomendadas
space.component.xs → Ícone + label em botão, tag, badge
space.component.sm → Padding de botão compacto
space.component.md → Input, select, textarea
space.component.lg → Card compacto, list item
space.component.xl → Card padrão arejado EffectiCategoria: Layout e Composição
Papel: Espaçamentos entre componentes e grupos de elementos dentro de uma tela.
| Token | Primitivo | Valor | Uso |
|---|---|---|---|
space.layout.xs | space-16 | 16px | Gap entre elementos inline |
space.layout.sm | space-24 | 24px | Gap entre cards em grid |
space.layout.md | space-32 | 32px | Gap entre seções próximas |
space.layout.lg | space-40 | 40px | Margin entre blocos de conteúdo |
space.layout.xl | space-48 | 48px | Gap entre colunas de layout |
css
--space-layout-xs: var(--space-16); /* 16px */
--space-layout-sm: var(--space-24); /* 24px */
--space-layout-md: var(--space-32); /* 32px */
--space-layout-lg: var(--space-40); /* 40px */
--space-layout-xl: var(--space-48); /* 48px */Categoria: Estrutural Seções de Página
Papel: Espaçamentos de macro-estrutura separação entre módulos, seções e áreas de página.
| Token | Primitivo | Valor | Uso |
|---|---|---|---|
space.structural.sm | space-48 | 48px | Padding de seção menor |
space.structural.md | space-64 | 64px | Padding de seção padrão |
space.structural.lg | space-80 | 80px | Espaço entre módulos de dashboard |
space.structural.xl | space-96 | 96px | Hero, separação estrutural máxima |
css
--space-structural-sm: var(--space-48); /* 48px */
--space-structural-md: var(--space-64); /* 64px */
--space-structural-lg: var(--space-80); /* 80px */
--space-structural-xl: var(--space-96); /* 96px */Regras Globais do Sistema
Hierarquia pelo Espaço
| Categoria | Range de valores | Função |
|---|---|---|
| Componente | 4px–24px | Interior de UI granularidade fina |
| Layout | 16px–48px | Composição distâncias que agrupam |
| Estrutural | 48px–96px | Macro separa módulos e seções de página |
Regra crítica: Cada nível tem sua faixa de tokens. Misturar tokens estruturais em componentes ou tokens de componente em seções de página quebra a lógica do sistema.
Modo Único: Arejado
O sistema opera em modo único arejado. Não existem modos compacto ou confortável como opções de produto. A exceção é estrutural: tabelas com 5 ou mais colunas e dashboards analíticos podem aplicar espaçamento interno reduzido nas células sempre a partir dos primitivos da escala.
O que nunca fazer
| Proibido | Alternativa correta |
|---|---|
padding: 10px | var(--space-component-md) → 12px |
gap: 6px | var(--space-component-xs) → 4px |
margin: 14px | var(--space-component-md) → 12px ou var(--space-component-lg) → 16px |
Primitivo direto no JSX (space-16) | Token semântico (space.layout.xs) |
| Token estrutural dentro de componente | Token de componente para interior de UI |
Integração com Outras Dimensões
| Token desta dimensão | Token de outra dimensão | Contexto |
|---|---|---|
space.component.xs | type.label.sm · Dim. 02 | Gap ícone + label ajustado ao tamanho da tipografia |
space.component.xl | color.surface.card · Dim. 01 | Padding padrão do card arejado Effecti |
space.layout.sm | color.border.subtle · Dim. 01 | Gap entre cards sem linha divisória, a distância separa |
space.layout.md | type.body.md · Dim. 02 | Gap entre blocos de texto respeita ritmo tipográfico |
space.structural.md | color.surface.page · Dim. 01 | Padding de seção com respiro estrutural |
Decisões Estratégicas Registradas
Base 4px imutável
Todo valor de espaçamento é múltiplo de 4. Valores como 2px, 6px, 10px e 14px foram removidos do sistema.
Modo único: arejado sem ressalvas de modo
O sistema opera em modo único arejado. A Effecti é arejada por definição o espaço é parte da identidade, não uma configuração.
space-20 adicionado lacuna corrigida
O sistema anterior saltava de 16px para 24px no segmento micro. O stop 20px preenche a lacuna para contextos que precisam de padding intermediário.
Nomenclatura por intenção, nunca por valorspace.component.xl não diz "24px" diz "padding de card arejado". O nome nunca muda. O valor pode evoluir.
Exemplos de Uso
Escala de componente — space.component.*
xs → xl — padding interno visualizado
xs · 4px
sm · 8px
md · 12px
lg · 16px
xl · 24px
Escala macro — layout e estrutural
space.layout.* e space.structural.* — separação entre blocos e seções
Bloco A
layout.xs · 16px
Bloco B
structural.md · 64px
Módulo de dashboard (nova seção estrutural)
Arquivos de Output Dimensão 03
| Arquivo | Formato | Conteúdo |
|---|---|---|
effecti_tokens_spacing.css | CSS | Custom Properties todos os tokens semânticos |
effecti_tokens_spacing.dart | Dart | Tokens para Flutter/Material |
effecti_spacing_scale_v1.svg | SVG | Visualização da escala para validação no Figma |
Effecti Programa de Governança de Design System · Dimensão 03 · v1.0