Linguagem de design

A tela, as camadas, os contornos, a cor, as marcas e o movimento compartilhados por todos os ícones. As medidas estão em unidades da tela.

Tela

Os ícones são desenhados em uma tela de 31×29 unidades, com a arte centralizada em (15,5; 12,5). Quatro linhas-guia, que são formas de referência para manter os ícones com o mesmo tamanho visual, definem os limites externos: um círculo de 23 unidades de diâmetro, um quadrado de 20,6 unidades, um retângulo horizontal de 23×18,4 e um retângulo vertical de 18,4×23. Os ícones são centralizados, não alinhados à base.

Camadas

Um ícone tem uma peça traseira em tom médio com sombra projetada e, em geral, uma peça frontal mais clara com um brilho suave ao longo da borda superior. Conteúdo branco, como um símbolo ou linhas, pode ficar entre as duas. Um ícone sem peça frontal tem conteúdo branco grande o bastante para formar uma segunda camada. Os cantos superiores da peça frontal são arredondados separadamente, o que deixa a peça traseira à mostra nos cantos.

Contornos e cantos

Os contornos têm 1 unidade de largura e ficam fora do preenchimento. O raio dos cantos é 2,2 para o corpo do ícone (3,2 com o contorno) e 1,2 para o conteúdo. Uma faixa colorida dentro de um contorno tem pelo menos 2 unidades de largura ou é omitida.

Cor

Cada tom é definido a partir de um azul de referência e depois deslocado para a cor de destaque, mantendo sua luminosidade em relação a ela. As marcas são brancas nas peças de tom médio e escuras nas peças claras.

Marcas

As marcas são as linhas e os símbolos desenhados sobre um ícone. As linhas de conteúdo usam traço de 1,6, marcas direcionais como setas usam 2,2 e os contornos usam 1. Partes semelhantes a ponteiros são uma exceção e usam 2,6 ou 2,0. O menor elemento tem 2,4 unidades. As pontas de seta são triângulos sólidos.

Movimento

O movimento tem dois keyframes, a pose de repouso e a pose de hover, e dura 460ms. Um ícone encena apenas o que o objeto real faz: uma pasta se abre, um envelope é aberto, um calendário vira a página. O movimento não representa uma ideia abstrata.

As regras completas estão em PROMPT.md, escrito em chinês simplificado.

Kubai Icons é de uso gratuito. Apoie o projeto