CPS Design System

# 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.

Dica

Ao projetar pontos de quebra, considere a quantidade de espaço efetivamente disponível dentro do aplicativo, não o tamanho da tela em si. Quando o aplicativo é executado em tela inteira, a janela do aplicativo tem o mesmo tamanho da tela, mas quando não está em tela inteira, a janela é eventualmente menor. Considerando-se a execução dentro de um navegador Web, o que importa é a área disponível para visualização (viewport).

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).

Responsividade

# 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:

Nome Largura mínima CSS
xs 380px @media (min-width: 380px) { ... }
sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }

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;
  }
}
Como aplicar corretamente a responsividade?

Conhecer breakpoints ou mesmo saber como aplicar a filosofia do mobile first não é o suficiente para construir aplicações com responsividade incrível, pois isto exige muito estudo e boa percepção de usabilidade.

Um bom ponto de partida é este excelente material sobre Técnicas de Design Responsivo (opens new window), encontrado na documentação de design do Fluent para Windows 11, cheio de explicações e de imagens em movimento demonstrando boas práticas de responsividade, na prática.

# 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:

Nome Tamanho Pixels Exemplo
0 0px 0px
px 1px 1px
0.5 0.125rem 2px
1 0.25rem 4px
1.5 0.375rem 6px
2 0.5rem 8px
2.5 0.625rem 10px
3 0.75rem 12px
3.5 0.875rem 14px
4 1rem 16px
4.5 1.125rem 18px
5 1.25rem 20px
6 1.5rem 24px
7 1.75rem 28px
8 2rem 32px
9 2.25rem 36px
10 2.5rem 40px
11 2.75rem 44px
12 3rem 48px
14 3.5rem 56px
16 4rem 64px
20 5rem 80px
24 6rem 96px
28 7rem 112px
32 8rem 128px
36 9rem 144px
40 10rem 160px
44 11rem 176px
48 12rem 192px
52 13rem 208px
56 14rem 224px
60 15rem 240px
64 16rem 256px
72 18rem 288px
80 20rem 320px
96 24rem 384px

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.

Exemplo de Cantos Arredondados

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:

Nome Medida Uso
0 0px Cantos retos são comuns quando elementos se interseccionam, ainda que estes possuam cantos arredondados nas extremidades opostas.
sm 2px Utilizado em elementos de entrada de dados, como caixas de texto e caixas de seleção.
md 4px Utilizado em elementos acionáveis da interface, como botões e items de listas de seleção.
lg 8px Utilizado em todos os contêineres de nível superior, como nas diferentes camadas base, nos painéis, nos cartões, nas caixas de diálogo, etc.
full 50% Arredondamento percentual ao tamanho de cada canto do elemento, transformando-o de retangular para circular, usado comumente em avatares e rótulos indicativos.

← Elevação →