Dimensões e Espaçamentos

Usar a combinação apropriada de dimensões e espaçamentos, de forma padronizada ao longo de uma aplicação, proporciona uma experiência do usuário mais apropriada aos requisitos de funcionalidade e interação, além de evidentemente transmitir uma sensação de maior profissionalismo em relação à construção da interface.

Ajustes para Responsividade

Aplicações web podem ser executadas em qualquer dispositivo que suporte executar um navegador, o que atualmente inclui smartphones, tablets, laptops, computadores de mesa convencionais, TVs e muito mais. Interfaces modernas precisam ser planejadas desde o princípio para que se encaixem bem em dispositivos com telas pequenas, e então que se expandam naturalmente tirando vantagem de telas maiores. Esta abordagem é conhecida como design responsivo iniciando em dispositivos móveis (mobile first responsive design) e, embora não seja uma abordagem unânime, é provavelmente a mais utilizada e é altamente recomendada por este design system.

Com um grande número de dispositivo e tamanhos de tela variados, em vez de tentar otimizar a interface para cada dispositivo, é mais recomendável projetar para algumas categorias de largura de chave (também chamadas de "pontos de quebra", ou breakpoints). As classificações mais convencionais costumam abordar três pontos chave: Pequenos (até 640px), Médios (entre 641px e 1023px) e Grandes (a partir de 1024px).

Pontos de Quebra

Trabalhar com apenas três pontos de quebra pode ser inconvenientemente limitado. Uma vez que a abordagem mobile first seja utilizada, é conveniente começar projetando para as menores telas disponíveis (em geral, smartphones antigos com viewport faixa de 320px de largura) e se apoiar em pontos de quebra para cada dimensão superior relevante, permitindo ajustar os elementos conforme mais espaço é disponibilizado.

Com isto em mente, o CPS Design System se respalda em seis pontos de quebra, ou seja, deriva um sub-nível dentro de cada ponto de quebra comumente utilizado, conforme esta tabela:

Com tais definições, fica simples construir os elementos da interface pensando-se nas telas menores, bastante não utilizar nenhum ponto de quebra, e depois ajustar tais elementos apenas com os atributos que precisarem ser modificados em telas maiores, por exemplo:

.fluid-container {
  display: grid;
  grid-auto-flow: col;
  padding: 1rem;
  gap: 1rem;
}

@media (min-width: 768px) {
  .fluid-container {
    grid-auto-flow: row;
    padding: 1.5rem;
  }
}

Padronização de Medidas

Neste design system, os tamanhos, margens, espaçamentos e posições dos elementos na interface são construídos a partir da medida de fonte padrão do navegador web, o rem. Consideração a configuração padrão, 1rem equivale a 16px, porém com a vantagem de ser flexível a configurações personalizadas realizadas por usuários com necessidades específicas.

A partir disto, a tabela de padronização de espaçamentos se utiliza de dividendos e múltiplos de 2 a partir do tamanho padrão, obtendo-se a seguinte escala:

Repare que apenas o valor especial px não segue a ideia dos dividendos e múltiplos de 2, uma vez que há diversos cenários em interfaces grandes onde 1px é uma dimensão viável (como bordas de elementos, separadores de seções, e ajustes finos de posicionamento de ícones).

Cantos Arredondados

Em um sentido mais primordial, interfaces gráficas são apenas conjuntos de blocos, quadrados e retângulos espalhados ao longo da tela no intuito de trazer diferentes significados a partir da utilização de outras características, como Elevação e Cores. Entretanto, a própria geometria pode ajudar diferenciar um pouco os elementos. Com isso, ajuda-se a criar experiências que parecerem coerentes em todo o design system.

No CPS Design System, a geometria foi pensada para dar suporte a experiências modernas, através de cantos arredondados progressivamente, elementos aninhados e medianizes consistentes que se combinam para criar um efeito suave, sutil e acessível, enfatizando a finalidade e a facilidade de uso, conforme esta tabela: