Remain Style Guide
Cor da marca
O que é a cor da marca
É a cor própria que representa a marca; ela dá unidade ao conjunto da marca e é eficaz por transmitir incessantemente a mesma mensagem ao usuário
O uso da cor da marca
A cor da marca é proposta principalmente com 1 primary color e 1 secondary color. Usar poucas cores, em vez de muitas, reforça mais o caráter da marca e ajuda a fazer um design centrado no conteúdo. Se isso parecer monótono demais, é possível acrescentar saturação e luminosidade à cor da marca para conseguir uma expressão mais rica.
A proporção da cor da marca
A primary color deve ter proporção maior que a secondary color. No caso contrário, pode-se causar confusão no usuário quanto à cor principal, então é melhor usar a primary color mais do que a secondary color.
Foram escolhidos #3d5afe como primary color e #ff6e40 como secondary color;
é um exemplo que mostra que o peso da primary color é maior que o da secondary color.
A combinação de cores (color scheme)
Ao definir a primary color e a secondary color, a combinação entre as cores também é muito importante. A ferramenta de roda de cores (círculo cromático) é um instrumento que ajuda na combinação harmoniosa de cores. Como todas as cores tanto combinam entre si quanto colidem, esse processo pode se arrastar demais ou parecer difícil. Nesse momento é possível encurtar o tempo usando a ferramenta de roda de cores.
A relação entre a primary color (#3d5afe) e a secondary color (#ff6e40) é de cores complementares, e este é um exemplo que mostra como isso é aproveitado na web.
Cor de interação (interaction color)
Para a cor de interação, propõe-se usar uma cor de 1 a 2 tons mais clara ou mais escura que a cor padrão. Também é possível usar degraus maiores de luminosidade e saturação.
Depois de definir a default color, é possível usar de 4 a 5 degraus de lighten e darken color como interaction color. Isso permite uma expressão mais rica do que quando se definem apenas 1 ou 2 cores de interaction color. A lighten color fica mais clara quanto mais se vai para a esquerda, e o número aumenta quanto mais clara for em relação à cor básica. A darken color fica mais escura quanto mais se vai para a direita, e o número aumenta quanto mais escura for em relação à cor básica.
Aproveitando a interaction color como cor no hover do mouse, é possível ajudar o usuário a perceber com facilidade sobre que posição ele está passando o mouse.
É um exemplo que usa a default color como cor básica antes do hover do mouse e a interaction color (lighten-1) como cor no hover do mouse.
Temas: design
Categoria: Recorte/Artigo
%% Fonte: http://styleguide.co.kr/content/color/brand-color.php %%