Guia de marca
Para parceiros, integradores e quem escreve sobre a Kalea: qual logo usar, quais cores e fontes aplicar e as poucas regras que mantêm a marca reconhecível.
Cada logo e elemento desta página leva aos seus arquivos SVG e PNG. Baixe o arquivo de que você precisa em vez de redesenhá-lo, ou leve o kit completo.
PDF · 209 kB
ZIP · 839 kB
Logos e elementos em SVG e PNG, tokens.json e este guia em PDF em inglês, espanhol e português.
A ideia
O basco é a única origem do nome.
Logo
A assinatura combina o símbolo com o logotipo em curvas, então nenhuma fonte é necessária. Use só o símbolo quando o espaço for pequeno.
Cor
Cerca de 60% neutros, 30% Ocean (ou Deep em páginas escuras) e 10% de destaques, com Apricot em primeiro lugar. Em geral, um toque de Apricot por tela basta.
Principal
Prédios do símbolo, ações principais, links e títulos sobre fundos claros.
Texto sobre branco: sim.vs. branco 7,46:1
Destaque
A rua do símbolo, realces e um detalhe por ícone.
Texto sobre branco: nunca.vs. branco 2,18:1
Destaque de apoio
Ilustrações, gráficos e realces secundários.
Texto sobre branco: passa por pouco; prefira Ocean.vs. branco 4,52:1
Destaque de apoio
Ilustrações e gráficos. Não é uma cor de sucesso.
Texto sobre branco: não.vs. branco 2,35:1
Superfície escura
Capas escuras, fundos de hero e superfícies no modo escuro.
Texto sobre branco: sim.vs. branco 14,84:1
Texto
Texto corrido e logo monocromático sobre fundos claros.
Texto sobre branco: sim.vs. branco 17,57:1
Apricot nunca é usado em texto sobre branco: chega a apenas 2,18:1. Use-o na rua, em realces e detalhes, ou como texto sobre Deep (6,81:1) ou Ink (8,06:1).
O contraste é a razão WCAG 2.x. Texto corrido precisa de pelo menos 4,5:1; texto grande e formas de interface, de pelo menos 3:1.
Neutros, tons e cores semânticas estão em tokens.json. Use os valores de lá em vez de copiá-los à mão.
Tipografia
As três são famílias de código aberto da Fontsource. A Kalea as serve do próprio site, sem chamadas a CDNs de fontes.
Display
Funnel Display
Títulos, números de destaque e o logotipo.
Pesos: 700
A rua com uma coroa escondida.
Texto
Golos Text
Rótulos de interface, botões e parágrafos.
Pesos: 400 · 500 · 600
Texto claro e tranquilo para rótulos, botões e parágrafos.
Mono
Sometype Mono
Dados, taxas, código, IDs de transação e sobretítulos em maiúsculas.
Pesos: 400 · 500
#1E578F · 0123456789
Use números tabulares em valores e taxas para alinhar as colunas.
Elementos gráficos
Esses elementos nascem da geometria do símbolo. Use-os para enquadrar e dar ritmo ao conteúdo; quem assina a página continua sendo o logo.
Malha urbana
Uma textura de fundo discreta que sugere quarteirões.
Faixa de skyline
Silhuetas de prédios recortadas do símbolo, para divisores de seção e rodapés.
Setas de sinalização
Setas direcionais marcantes para etapas e chamadas para ação.
Realce de rua e faixas
Uma barra Apricot ou uma faixa tracejada sob uma palavra-chave. A palavra mantém a própria cor.
O que fazer e o que evitar
Cor alterada
Esticado
Girado
Com sombra
Dúvidas
Abra uma issue no GitHub e conte onde e como você pretende usar a marca. Em co-branding, use apenas arquivos do kit de imprensa oficial de cada parceiro e nunca redesenhe nem mude a cor do logo de um parceiro.
