60
Branco
O espaço de respiro. Fundo de site, embalagem e papelaria. É ele que deixa as cores fortes parecerem vivas em vez de poluídas.
RGB 255 255 255 · CMYK 0 0 0 0 · --color-branco
Identidade visual
Cores
O princípio vem do brand book inicial e continua valendo: cores fortes sobre muito espaço branco. A marca parece viva quando a cor tem onde respirar, e poluída quando todas aparecem ao mesmo tempo.
Por isso a paleta tem dois grupos. A estrutura (branco, Azul Mix, magenta) segue a regra 60-30-10 em toda peça. As cores dos mundos (laranja, amarelo, azul céu) aparecem dentro do produto, dos selos e das ilustrações, e nunca carregam a estrutura.
Estrutura: 60-30-10
30
Azul Mix
A herança da Mix. Logo, títulos, blocos de destaque, rodapé e botões secundários.
RGB 11 60 125 · CMYK 91 52 0 51 · --color-azul
10
Magenta
A faísca. Órbita do símbolo, botão principal, item ativo e detalhes que pedem atenção. Nunca como fundo de página inteira.
RGB 230 0 126 · CMYK 0 100 45 10 · --color-magenta
Como a regra aparece numa tela
Branco no fundo. Azul Mix nos títulos, no logo, no rodapé e no botão secundário. Magenta num único botão principal.
Se o magenta começar a aparecer em vários lugares, ele deixa de apontar para alguma coisa. Um magenta por tela é o bastante.
Tons de apoio
Variações do branco e do azul para texto, bordas e superfícies. Não contam como cores novas.
Tinta
Texto corrido. Azul quase preto, mais confortável que o Azul Mix em parágrafos.
RGB 15 31 61 · CMYK 75 49 0 76 · --color-tinta
Névoa
Texto secundário, legendas e ícones de apoio.
RGB 90 106 133 · CMYK 32 20 0 48 · --color-nevoa
Linha
Bordas, divisórias e campos.
RGB 221 227 238 · CMYK 7 5 0 7 · --color-linha
Nuvem
Superfície alternativa: seções, cartões e fundo de campos.
RGB 244 246 251 · CMYK 3 2 0 2 · --color-nuvem
Cores dos mundos
Laranja, amarelo e azul céu, somados ao magenta e ao Azul Mix, dão cor aos mundos. Cada cor tem uma versão clara, para fundo de etiqueta e de área de produto.
Laranja
Claro
O ponto do símbolo. Alegria e expressão.
RGB 255 138 0 · CMYK 0 46 100 0 · --color-laranja
Amarelo
Claro
Imaginação e destaque.
RGB 255 194 0 · CMYK 0 24 100 0 · --color-amarelo
Azul céu
Claro
Tecnologia e leveza.
RGB 0 182 230 · CMYK 100 21 0 10 · --color-ceu
Cor de mundo dentro do produto
Etiqueta, selo, ilustração, ícone, fundo da área de um tema no personalizador.
Cor de mundo na estrutura
Fundo de página, cabeçalho, texto corrido, botão principal ou logo.
Texto Azul Mix ou Tinta sobre laranja, amarelo e céu
Todos passam do AA para texto.
Laranja, amarelo ou azul céu como cor de texto
Nenhum passa de 2,4:1 sobre branco.
Combinações e contraste
Contraste WCAG 2.1 entre texto e fundo, calculado a partir dos valores da paleta. Texto corrido pede 4,5:1; título grande e ícone, 3:1.
Tinta sobre branco
16,35:1
AAA
Azul Mix sobre branco
10,73:1
AAA
Branco sobre Azul Mix
10,73:1
AAA
Branco sobre magenta (botão)
4,5:1
AA
Névoa sobre branco
5,47:1
AA
Névoa sobre Nuvem
5,06:1
AA
Magenta sobre branco
4,5:1
AA
Magenta sobre Nuvem
4,16:1
Só títulos e ícones
Azul Mix sobre amarelo
6,62:1
AA
Azul Mix sobre laranja
4,54:1
AA
Azul Mix sobre azul céu
4,51:1
AA
Branco sobre azul céu
2,37:1
Não usar
Laranja sobre branco
2,36:1
Não usar
Amarelo sobre branco
1,61:1
Não usar
Regra
Magenta fica em botão e título. Texto branco sobre magenta fica em 4,5:1, exatamente no limite do AA: use peso 600 ou mais. Magenta como cor de texto só a partir de 24 px, e nunca sobre Nuvem.
Pendente
O Azul Mix precisa ser conferido no manual oficial da Mix e ganhar referência Pantone. Os CMYK desta página são conversão direta do RGB: peça prova de cor à gráfica antes de imprimir embalagem e etiqueta. Para impressão digital de etiquetas, o ideal é calibrar o laranja e o magenta na própria máquina da Mix, que é onde elas saem.