E ai Gabriel, tudo beleza?

Vamos lá. Essa regra se chama 8 point grid, e ela nasceu diretamente para trabalharmos com produtos digitais. A premissa eu acredito que você ja tenha entendido, que se trata de trabalhar com múltiplos de 8 ao longo do design de interface.

Essa técnica ela serve pra praticamente tudo que você for trabalhar num produto digital. Vai fazer uma lista de cards? Defina uma margem múltipla de 8 entre eles. Dentro desse card terá imagem, texto e botão? Defina um valor múltiplo de 8 para o distanciamento entre cada elemento. Vai fazer uma caixa de texto? Defina múltiplos de 8 para criar o espaçamento entre o texto e a caixa ao redor.

A gente não costuma utilizar para definir larguras ou alturas por conta que a definição de margens ou paddings são o que precisamos definir, e dependendo do tamanho do frame que você esteja travalhando, o cálculo sempre dará match com 8.

Não é uma obrigação para todos os produtos, mas é uma recomendação fortíssima. Particularmente, eu não me lembro do último produto digital que trabalhei e que não usei o 8-pt grid. Ele é extremamente útil e faz parte de muitos design systems famosos, as vezes com algumas modificações que entram na parte de excessão, como por exemplo, usar 4px em vez de 8px. Em outros produtos podem utilizar múltiplos de 4, que aumenta a gama numérica, e por aí vai. Mas não, não é obrigatório utilizar. Acaba que é útil pois boa parte dos monitores são em Full HD (1920x1080) ou derivados disso, e ambos números da resolução são divisíveis por 8, e ai você nota como trabalhar com isso faz com que uma interface tenha uma harmonia bem elaborada e condizente.

Se você quiser ler mais sobre, e eu recomendo muito pro teu desenvolvimento na área, eu tenho um artigo explicando melhor sobre o assunto, e se você quiser bater um papo, é só chamar!

https://codedimension.com.br/como-utilizar-e-aplicar-o-8-pt-grid-6811a15e09a?gi=b503a0bdea17

Bons estudos!