Cores
A paleta de cores da Smart Chip reflete a sua personalidade divertida e dinâmica. As nossas cores principais – preto e branco – criam uma base arrojada e intemporal. As cores de destaque dão flexibilidade e vitalidade, ajudando-nos a adaptar-nos a diferentes ambientes e contextos, mantendo tudo com um ar fresco e coeso.
Cores Primárias
A paleta de cores é Preto e Branco juntamente com um Cor de destaque. O preto e o branco são simples e garantem o maior contraste e legibilidade possíveis. As diferentes cores de destaque, apresentadas como um gradiente linear, dão um toque de energia e refletem as formas divertidas como o Smart Chip facilita a vida.
Preto
CMYK (preto intenso)
60/40/40/100
Hex
#000000
Branco
CMYK
0/0/0/0
Hex
#ffffff informar
Cores de destaque
As cores de destaque complementam e ampliam as cores primárias. São uma parte essencial da nossa identidade visual dinâmica. Usamo-las para dar variedade aos designs e dar vida à nossa linguagem visual.
Tem em conta o ambiente ou o tom do teu design quando escolheres uma cor. Cada gradiente transmite uma sensação diferente. Por exemplo, Roxo Fixe é uma cor tranquila, o que a torna ideal para temas mais descontraídos. Por outro lado, Laranja vibrante é uma cor viva e enérgica, perfeita para conteúdos dinâmicos ou orientados para a ação. Pensa na mensagem que queres transmitir e escolhe a cor que melhor se adequa a essa narrativa.
Há uma regra muito importante: não uses mais do que uma cor no mesmo layout. Cada cor de destaque deve destacar-se por si só.
Laranja vibrante
CMYK
0/46/78/0 > 0/86/70/0
Hex
#ffa041 inform > #fc3a3c
Deep Blue
CMYK
79/24/6/2 > 90/69/0/0
Hex
#0393bc > #004cd5
Roxo Fixe
CMYK
47/59/0/0 > 80/82/0/0
Hex
#9d77c4 > #554195
Cobre
CMYK
0/46/78/0 > 24/58/86/15
Hex
#ffa041 inform > #b26e31
Azul Elétrico
CMYK
65/0/0/0 > 70/54/0/0
Hex
#23c8fe > #647cff informar
Roxo Quente
CMYK
40/72/0/0 > 68/74/0/0
Hex
#a85fa2 > #6e539e
Rosa Bonito
CMYK
5/54/34/0 > 0/85/69/0
Hex
#ea9091 > #ed4343
Verde Calmo
CMYK
62/0/92/0 > 86/29/88/16
Hex
#71b541 > #197642
Alerta Vermelho
CMYK
0/76/55/0 > 0/100/68/0
Hex
#ff5a5a inform > #e6003c
Gradientes e curvas
Sempre que possível, usamos gradientes nas nossas cores de destaque, combinados com um elemento central do design chamado Curvas. Aqui vais aprender a criá-los e a usá-los.
Curvas
As curvas são usadas principalmente nos fundos. Dão-lhes mais interesse visual, profundidade e uma sensação de movimento.
As curvas são criadas ao redimensionar, rodar e recortar o ícone do chip. A escala, a rotação e o recorte ficam ao teu critério, mas não mostres demasiado do ícone. Devem parecer curvas e riscas abstratas, não o ícone propriamente dito.
As curvas estão sempre colocadas sobre um fundo. O fundo usa o mesmo gradiente das curvas, mas numa direção diferente.
A direção dos gradientes não é imutável. Podes alterá-los à vontade em cada novo design e até animá-los. Isso mantém as curvas dinâmicas e com um toque de novidade.
Não precisas de usar todo o gradiente, do início ao fim. Podes “ampliar” apenas uma parte dele. Isso amplia ainda mais a nossa paleta de cores, mantendo as cores reconhecíveis.
Mas tem cuidado para que ainda se reconheça como um gradiente. Não escolhas uma parte tão pequena que pareça uma cor sólida.
As curvas não são obrigatórias – às vezes, menos é mais. Evita usá-las em elementos mais pequenos, como botões ou imagens pequenas.
Criar novas cores
A paleta de cores de destaque foi concebida para combinar bem entre si e em muitos contextos diferentes. Mas se nenhum gradiente se adequar ao teu design específico, podes criar o teu próprio.
Criar novos gradientes é especialmente útil quando se combina um título com imagens. Neste exemplo, usa-se um gradiente personalizado para o título que combina na perfeição com a imagem.
As cores foram criadas através da amostragem da imagem e, em seguida, aumentando a saturação e o brilho. Isto faz com que o novo gradiente se integre na paleta de cores existente.
Existem algumas regras a seguir quando se criam novas cores:
Não exageres! Tenta seguir a paleta de cores aprovada e só cria novas cores se for preciso.
Não crie um novo gradiente que seja muito parecido com um já existente. Se uma cor já existente funcionar, fica por essa.
Mantém tudo na mesma tonalidade. Não passes do vermelho para o azul, passa do vermelho vivo para o vermelho médio.
Mantém os valores em consonância com os gradientes já existentes. Não os tornes demasiado saturados, desbotados, claros ou escuros.
Princípios Básicos da Cor
Ao criar um novo layout, podes escolher entre usar um fundo preto ou um fundo branco. Um fundo branco transmite uma sensação de limpeza, abertura e convidatividade. Um fundo preto evoca tecnologia, elegância e poder. Escolhe aquele que fizer mais sentido para o teu projeto, mensagem e público-alvo pretendido.
Seja qual for a tua escolha, usa uma cor de destaque para dar mais vida ao layout, realçar certas informações, guiar o olhar ou dar ênfase a um ponto.
Quando criares layouts com várias páginas, não saltes de uma cor para outra sem ordem. Estrutura o teu design em tópicos ou capítulos, e atribui a cada um a sua própria cor. Mantém essa cor em cada capítulo. Isso garante consistência e evita que as páginas fiquem desorganizadas.
Podes usar cores em fundos, títulos, ícones ou em qualquer outro elemento em que um toque de cor seja adequado.
Para manter um design limpo e coerente, nunca mistures cores diferentes na mesma página, exceto quando for necessário para elementos funcionais (como mensagens de erro ou alertas).
O que não deves fazer
Por favor, evita os seguintes erros.
Não uses cores diferentes no mesmo layout.
Não uses as curvas sem um fundo.
Não uses as curvas num fundo com uma cor diferente.
Não mostres demasiado do ícone do chip.
Não mistures um gradiente com uma cor diferente.
Não crie novos gradientes que não sigam as regras.
Não uses cores para marcações ou blocos inteiros de texto.
Não uses cores sólidas, a não ser que seja absolutamente necessário.
Exemplos
Aqui estão alguns exemplos de como usar a cor e as curvas. Repara nas diferenças de escala, fator de recorte, rotação e amplitude do gradiente das curvas.
