Guía de marca
Para socios, integradores y cualquier persona que escriba sobre Kalea: qué logo usar, qué colores y fuentes aplicar, y las pocas reglas que mantienen la marca reconocible.
Cada logo y elemento de esta página enlaza a sus archivos SVG y PNG. Descarga el archivo que necesitas en lugar de redibujarlo, o llévate el kit completo.
PDF · 208 kB
ZIP · 839 kB
Logos y elementos en SVG y PNG, tokens.json y esta guía en PDF en inglés, español y portugués.
La idea
El euskera es el único origen del nombre.
Logo
El logotipo completo combina el símbolo con el wordmark en curvas, así que no necesita ninguna fuente. Usa solo el símbolo cuando el espacio sea reducido.
Color
Alrededor de 60 % neutros, 30 % Ocean (o Deep en páginas oscuras) y 10 % acentos, con Apricot primero. Suele bastar un toque de Apricot por vista.
Principal
Edificios del símbolo, acciones principales, enlaces y títulos sobre fondos claros.
Texto sobre blanco: sí.vs. blanco 7.46:1
Acento
La calle del símbolo, destacados y un detalle por ícono.
Texto sobre blanco: nunca.vs. blanco 2.18:1
Acento de apoyo
Ilustraciones, gráficos y destacados secundarios.
Texto sobre blanco: apenas cumple; mejor Ocean.vs. blanco 4.52:1
Acento de apoyo
Ilustraciones y gráficos. No es un color de éxito.
Texto sobre blanco: no.vs. blanco 2.35:1
Superficie oscura
Portadas oscuras, fondos de hero y superficies en modo oscuro.
Texto sobre blanco: sí.vs. blanco 14.84:1
Texto
Texto corrido y logo monocromo sobre fondos claros.
Texto sobre blanco: sí.vs. blanco 17.57:1
Apricot nunca se usa para texto sobre blanco: solo llega a 2,18:1. Úsalo para la calle, los destacados y los acentos, o como texto sobre Deep (6,81:1) o Ink (8,06:1).
El contraste es la relación WCAG 2.x. El texto corrido necesita al menos 4,5:1; el texto grande y las formas de interfaz, al menos 3:1.
Los neutros, los tintes y los colores semánticos están en tokens.json. Toma los valores de ahí en lugar de copiarlos a mano.
Tipografía
Las tres son familias de código abierto de Fontsource. Kalea las sirve desde su propio sitio, sin llamadas a CDN de fuentes.
Display
Funnel Display
Titulares, números destacados y el wordmark.
Pesos: 700
La calle con una corona escondida.
Texto
Golos Text
Etiquetas de interfaz, botones y párrafos.
Pesos: 400 · 500 · 600
Texto claro y sereno para etiquetas, botones y párrafos.
Mono
Sometype Mono
Datos, tasas, código, ID de transacciones y antetítulos en mayúsculas.
Pesos: 400 · 500
#1E578F · 0123456789
Usa números tabulares en montos y tasas para que las columnas queden alineadas.
Elementos gráficos
Estos elementos nacen de la geometría del símbolo. Úsalos para enmarcar y dar ritmo al contenido; el logo sigue firmando la página.
Cuadrícula urbana
Una textura de fondo discreta que sugiere manzanas de la ciudad.
Franja de skyline
Siluetas de edificios recortadas del símbolo, para separadores de sección y pies de página.
Flechas de señalización vial
Flechas direccionales marcadas para pasos y llamados a la acción.
Resaltado de calle y carriles
Una barra Apricot o un carril punteado bajo una palabra clave. La palabra conserva su color.
Qué hacer y qué no
Otro color
Estirado
Rotado
Con sombra
Preguntas
Abre un issue en GitHub y cuéntanos dónde y cómo piensas usar la marca. Para co-branding, usa solo archivos del kit de prensa oficial de cada socio, y nunca redibujes ni cambies el color del logo de un socio.
