Spacings

Os spacings são fundamentais para criar harmonia e organização visual nos layouts, garantindo que os elementos tenham o respiro necessário para facilitar a leitura e a interação do usuário.

✅ Atualizado (30/06/2025) - Ver detalhes

Junho 2025

• 30/06/2025 .Adicionamos a categoria de tokens largerOnTablet e dentro dela o token base-largeX-base

Abril 2025

• 23/04/2025

  . Adicionamos 5 novos tokens fixedBeforeTablet à nossa coleção.Esses tokens nos permitirão fazer mais transições de tamanho entre devices

  Sendo eles:

  fixedBeforeTablet - small-base, base-small, base-large, base-largeX, large2x-largeX . Além disso, atualizamos a visualização das referências no inicio dessas tabelas, para facilitar a leitura e identificação dessas transições na tabela.

Guia de Espaçamentos

Fixed

Espaçamentos Fixed se mantém os mesmos entre todos os breakpoints.

Ref	Tamanho	Token	Diferença
	2px/dp	spacing-small3x	+2px/dp
	4px/dp	spacing-small2x	+2px/dp
	8px/dp	spacing-smallX	+4px/dp
	12px/dp	spacing-small	+4px/dp
	16px/dp	spacing-base	+4px/dp
	20px/dp	spacing-large	+4px/dp
	24px/dp	spacing-largeX	+4px/dp
	32px/dp	spacing-large2x	+8px/dp
	40px/dp	spacing-large3x	+8px/dp
	48px/dp	spacing-large4x	+8px/dp
	60px/dp	spacing-large5x	+12px/dp
	72px/dp	spacing-large6x	+12px/dp
	84px/dp	spacing-large7x	+12px/dp
	96px/dp	spacing-large8x	+12px/dp

Regra dos 4px

A regra dos 4 pixels é um princípio de design amplamente utilizado para garantir consistência e coesão nos espaçamentos dentro de um layout, incluindo aqueles criados no Figma ou em outras ferramentas de design. A ideia por trás dessa regra é que, ao ajustar os espaçamentos entre elementos em um design, é preferível utilizar múltiplos de 4 pixels (ou seja, 4px, 8px, 12px, 16px, etc.).

Isso é útil por várias razões:

1

Consistência

Ao seguir múltiplos de 4 pixels, você cria uma grade visual que proporciona uma sensação uniforme e organizada.

2

Facilidade de implementação

Ao utilizar a regra, você facilita o trabalho dos desenvolvedores, pois eles podem traduzir as dimensões diretamente para valores de pixels no código.

3

Acessibilidade

Ajuda a criar espaçamentos mais consistentes e confortáveis para os usuários. Tamanhos de fonte, margens e preenchimentos consistentes podem contribuir para uma experiência mais agradável e acessível para todos.

4

Escalabilidade

Ao criar layouts baseados em múltiplos de 4 pixels, você está criando um sistema que é mais fácil de ajustar e adaptar a diferentes tamanhos de tela e dispositivos.

Vale ressaltar que, embora a regra dos 4 pixels seja uma diretriz comum, ela não é uma regra rígida que sempre deve ser seguida. Em alguns casos, pode ser necessário desviar dessa regra para atender a requisitos específicos do design ou da interação, ex.: na nossa tabela existe o valor de 2px de espaçamento para casos extraordinários.

No entanto, em geral, essa regra serve como uma boa prática para ajudar a manter a consistência e a qualidade do produto.

Dynamic

Espaçamentos Dynamic mudam de acordo com os breakpoints.

Existem 3 categorias para Espaçamentos Dynamic :

fixedAfterTablet

fixedAfterTablet são espaçamentos que têm um valor diferente apenas no breakpoint <700

Ref	Breakpoint <700	Breakpoint ≥700	Breakpoint ≥1200	Token
4 - 8 - 8	4px/dp	8px/dp	8px/dp	small2x-smallX
8 - 12 - 12	8px/dp	12px/dp	12px/dp	smallX-small
12 - 16 - 16	12px/dp	16px/dp	16px/dp	small-large
16 - 20 - 20	16px/dp	20px/dp	20px/dp	base-large
16 - 24 - 24	16px/dp	24px/dp	24px/dp	base-largeX
24 - 32 - 32	24px/dp	32px/dp	32px/dp	largeX-large2x

fixedBeforeTablet

fixedBeforeTablet são espaçamentos que têm um valor diferente apenas no breakpoint ≥1200

Ref	Breakpoint <700	Breakpoint ≥700	Breakpoint ≥1200	Token
0 - 0 - 2	0px/dp	0px/dp	2px/dp	null-small3x
12 - 12 - 16	12px/dp	12px/dp	16px/dp	small-base
12 - 12 - 24	12px/dp	12px/dp	24px/dp	small-largeX
16 - 16 - 12	16px/dp	16px/dp	12px/dp	base-small
16 - 16 - 20	16px/dp	16px/dp	20px/dp	base-large
16 - 16 - 24	16px/dp	16px/dp	24px/dp	base-largeX
16 - 16 - 32	16px/dp	16px/dp	32px/dp	base-large2x
24 - 24 - 32	24px/dp	24px/dp	32px/dp	largeX-large2x
32 - 32 - 24	32px/dp	32px/dp	24px/dp	large2x-largeX
32 - 32 - 40	32px/dp	32px/dp	40px/dp	large2x-large3x

largerOnTablet

largerOnTablet são espaçamentos que aumentam no breakpoint de tablet e voltam ao valor inicial no desktop.

Ref	Breakpoint <700	Breakpoint ≥700	Breakpoint ≥1200	Token
16 - 24 - 16	16px/dp	24px/dp	16px/dp	base-largeX-base

Linear

linear são espaçamentos que mudam em todos os breakpoints de forma linear entre eles.

Ref	Breakpoint <700	Breakpoint ≥700	Breakpoint ≥1200	Token
16 - 24 - 32	16px/dp	24px/dp	32px/dp	base-largeX-large2x
24 - 32 - 40	24px/dp	32px/dp	40px/dp	largeX-large2x-large3x
32 - 40 - 48	32px/dp	40px/dp	48px/dp	large2x-large3x-large4x
40 - 48 - 60	40px/dp	48px/dp	60px/dp	large3x-large4x-large5x
48 - 60 - 72	48px/dp	60px/dp	72px/dp	large4x-large5x-large6x

linear são espaçamentos que mudam em todos os breakpoints de forma linear entre eles, sendo de 8 em 8 pixels ou 12 em

Paddings

Os paddings são usados para criar espaçamentos internos nos componentes, garantindo que o conteúdo tenha uma boa legibilidade e proporções adequadas. Eles ajudam a evitar que textos, ícones ou outros elementos fiquem "grudados" nas bordas, proporcionando um design mais equilibrado e confortável para o usuário.

Diretrizes Gerais:

• Utilize paddings para espaçar o conteúdo interno de componentes, como botões, cards, modais, campos de formulário e seções.

• Priorize a consistência visual: escolha valores de padding que se alinhem aos tokens definidos na escala de espaçamento do design system.

• Adapte os paddings conforme o tamanho do componente ou contexto de uso:

  • Elementos pequenos: prefira valores menores como xSmall ou Small.

  • Elementos médios/grandes : utilize valores como Base ou Large.

  • Seções amplas (ex.: headers ou rodapés): considere xLarge ou superior, conforme necessário.

Nos componentes criados em nosso UI Kit por padrão já estará aplicado os paddings recomendados para cada tipo, por exemplo modais.

As regras de aplicação de paddings por componentes ainda está sendo revisada, e será documentada em cada contexto e atualizada no geral nesta seção.