Radius

Recomendações

Se um elemento tiver 24px de altura, o valor mínimo do radius que ele pode comportar é 6, não pode ter o radius maior que esse. Caso o elemento tenha altura de 40px, ele tem o tamanho mínimo para o radius de 10, mas ele também suporta radius de 8 e 6. Esse padrão se repete, e o ajuste pode ser feito levando em consideração a proporção entre altura e largura.

Consistência

É importante ressaltar que a altura e largura de um elemento influenciam diretamente no border radius que será utilizado. É necessário realizar ajustes em casos que a proporção entre largura e a altura do elemento foge muito das recomendações estabelecidas.

Por exemplo, se um retângulo possui as dimensões de 160x160px, o radius ideal a ser aplicado é de 20px. No entanto, se o retângulo tiver 62x160px o radius de 20px deixa o elemento muito arredondado para o padrão que utilizamos. Nesse caso, o ideal é fazer um ajuste, porém, deve manter dentro dos outros tamanhos de radius que existem no Cosmos, como, substituir pelos radius: 16, 12, 10 ou 6. Lembrando sempre de conferir os tamanhos mínimos e sempre manter a consistência visual com todos os componentes do nosso produto.

a. Quanto maior a altura e menor a largura, menor radius.

b. Quanto maior a largura e maior a altura, maior o radius.

Regra do radius ideal

Radius interno + distância = radius externo.

Nem sempre o radius ideal será o mesmo que a nossa lista de recomendações (6, 8, 10, 12, 16 ou 20), mas quando necessário usar essa regra, escolha o radius - dentro das recomendações - que seja o mais próximo ao resultado da soma.

Repare que nesse caso, pela altura, o radius poderia ser 20px. Mas usando a regra do radius ideal e as nossas recomendações, foi necessário um ajuste para ser mais equilibrado visualmente com os outros componentes do nosso DS.

Aplicação

Régua de range

Histórico de Atualizações