Tamanhos e Espaçamentos

Os tamanhos e espaçamentos desempenham um papel fundamental na criação de interfaces organizadas, consistentes e visualmente equilibradas. No Acronos Design System, adotamos uma abordagem baseada em múltiplos de 4 e 8, que garante flexibilidade e precisão no design, além de facilitar a implementação por parte das equipes de desenvolvimento.

Por que usar múltiplos de 4 e 8?

• Consistência visual: O uso de uma grade unificada para espaçamentos, tamanhos de fonte e dimensões de componentes cria uma experiência visual coesa e previsível para os usuários.

• Escalabilidade: Trabalhar com múltiplos de 4 e 8 simplifica o processo de adaptação de layouts para diferentes tamanhos de tela e dispositivos.

• Facilidade de implementação: Os múltiplos se integram perfeitamente com grids e sistemas de layout utilizados em CSS, como rem, em e px, permitindo alinhamentos precisos.

• Produtividade: A padronização reduz o tempo gasto em decisões manuais, tanto no design quanto no desenvolvimento.

Como aplicar tamanhos e espaçamentos

Os múltiplos de 4 e 8 devem ser usados em diversas áreas, como:

• Tipografia: Tamanhos de fonte, espaçamento entre linhas (line-height) e margens entre parágrafos.

• Componentes: Dimensões de botões, campos de entrada, cartões e outros elementos interativos.

• Espaçamentos: Margens, paddings e gaps entre componentes e seções do layout.

Exemplo de Aplicação

Abaixo estão exemplos práticos de como utilizar os múltiplos de 4 e 8 no Acronos Design System:

• 4px: Usado como espaçamento mínimo, ideal para pequenos detalhes, como a distância entre ícones e texto.

• 8px: Unidade base do sistema, aplicada em margens e paddings de pequenos componentes.

• 16px: Espaço médio, geralmente utilizado como espaçamento entre botões ou elementos menores.

• 24px: Espaço maior, comum para margens entre cards, divisores ou seções de layout.

• 32px: Espaço amplo, indicado para paddings internos de containers maiores ou separação entre grupos de componentes.

Dica: Sempre que possível, utilize essas proporções para garantir que sua interface seja alinhada com o restante do design system.

Ao seguir essas diretrizes, você assegura que os designs criados dentro do Acronos sejam intuitivos, eficientes e estejam alinhados aos melhores padrões da indústria.