Elementos básicos de identificación.
Ink de base, electric de acento.
Cuatro colores, dos tipografías y tres versiones autorizadas del logotipo.
- Estado
- Borrador
- Tipografía
- Centra Nº2 y Geist
- Colores
- Ink y electric
Logo
Tres versiones autorizadas: electric, ink y blanco.
Lockups
Electric sobre inkLa versión principal. Ink sobre creamPara documentos claros. 
Blanco sobre electricPara placas electric y sobre fotos.
Clear space
El margen de protección es la altura de una letra del logotipo, en los cuatro lados.
- Clear space
- 1 × the height of the mark, all four sides
- Measured from
- The height of the supplied file. A bitmap carries no cap height, so nothing inside the letterforms is measured here.
- At a 64px-tall mark
- 64 px on every side
Misuse
No redibujar ni estirar el logotipo.
Se usa el archivo tal cual.
No recolorear el logotipo.
Solo electric, ink y blanco.
No usar sombras, degradados ni esquinas redondeadas.
El sistema es plano.
Colour
Cuatro colores: ink, electric, deep y cream.
Paleta
Ink
Role: ink
Placas y texto.
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 1.00:1, Fail
Electric
Role: accent
El acento: logotipo, kickers y barras.
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 3.22:1, AA Large
Deep
Role: signal
Acento secundario, en la franja inferior.
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 2.57:1, Fail
Fondos
Cream
Role: background
El fondo claro.
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 16.48:1, AAA
Tarjeta
Role: surface
Las tarjetas sobre cream.
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 15.47:1, AAA
CMYK is converted from RGB with no colour profile, so it is an approximation. A print value needs a profile and a proof.
Rules
- Ink es el color de las placas y del texto; electric es el acento.
- Barras de acento electric arriba de las tarjetas.
- Franja inferior bicolor: deep y electric.
- Páginas cream con tarjetas en #E3E1DB.
- Kickers en electric, mayúsculas espaciadas.
Typography
Centra Nº2 Bold en títulos y Geist en texto.
The family
Centra No2
- Foundry
- Sharp Type
- Source
- Local files
- Fallback
- system-ui, sans-serif
- Licence
- Licencia de Sharp Type. Los archivos no se redistribuyen.
- Uppercase
- ABCDEFGHIJKLMNOPQRSTUVWXYZ
- Lowercase
- abcdefghijklmnopqrstuvwxyz
- Numerals
- 0123456789
- Punctuation
- . , : ; ! ? ‘ ’ “ ” ( ) [ ] – — … / & @ # % + = < >
Roles
| Role | Weight | Optical size | Tracking | Size | Usage |
|---|---|---|---|---|---|
| Display | 700 | not set | 0em | 48–69px | Centra Nº2 Bold, en portadas y títulos. |
| Texto | 400 | not set | 0em | 16px | Geist Regular, en cuerpo de texto. |
| Kicker | 500 | not set | +0.14em | 12px | Geist Medium, mayúsculas, en electric. |
The scale
Infraestructura crítica
Infraestructura crítica
Infraestructura crítica
Infraestructura crítica
Infraestructura crítica
Infraestructura crítica
Infraestructura crítica
Optical corrections
Centra Nº2 viene en pesos estáticos, sin eje óptico.
| Plane | Ground | Weight | Tracking | Calibrated |
|---|---|---|---|---|
| Ink |
| not calibrated | no date | |
| Cream |
| not calibrated | no date | |
| Electric |
| not calibrated | no date | |
La marca se escribe siempre en mayúsculas: KEBLAN.
Movimiento
Lo chico frena suave; el menú toma carrera.
En movimiento
Mover
Botones, flechas y filas que se corren.
400ms
Impulso
El rulo de los links del menú y su botón.
600ms
Entrar
El aviso de cookies, que sube y aparece.
400ms
En uso
Links del menú
Filas
Botón
Aviso de cookies
La curva
Mover
Impulso
Entrar
La curva de mover corre a tres velocidades: 300 ms para el color de los links, 400 para los botones y 450 para las filas.
El preloader y el hero entran una sola vez; con reduced-motion todo queda quieto de entrada.
Imágenes
Escenas de centros de datos, energía y fibra, siempre en par: una versión para la noche y otra para el día.
Escenas producidas para la marca, no fotografías de obras ni de clientes: los heroes, las escenas de cada capacidad, las cabeceras de proyecto y la ilustración del pie. Cada una existe en dos archivos, uno por tema.
Tratamiento
- Par noche y día
- Cada imagen se publica en dos archivos, uno por tema, y se muestra el que corresponde. La versión de noche no es la de día oscurecida con filtros: es otra escena, iluminada de noche.
- Recorte
- Las fotos van a sangre con object-fit: cover. El hero se ancla en center 35%, la escena del pie en center bottom, y cada marco fija su proporción: 4 / 4.6 la foto de historia, 16 / 7 las cabeceras de detalle, 4 / 3 y 4 / 2.9 las vistas previas.
- Velo del hero
- El texto va sobre tres degradados de rgba(6, 6, 10): una banda superior de 0,42 que muere a los 200 px, una subida desde abajo de 0,92 a 0,35 al 30 por ciento que llega a 0 al 55, y una diagonal a 100 grados de 0,75 a 0,3 al 42 que llega a 0 al 66. El texto del hero queda blanco en los dos temas.
- Sobra de escala
- Ninguna imagen se posa a escala 1: el hero queda en 1,06, la foto de historia en 1,12 y las vistas previas en 1,15, así el paralaje nunca descubre el borde. La llegada es un zoom que afloja: el hero entra de 1,14 a 1,06; la vista previa del menú, de 1,25 a 1,05; la de capacidades, de 1,18 a 1,06.
- Paralaje
- Al hacer scroll el hero baja un 12 por ciento mientras el texto sube otro tanto y se apaga a 0,25; la foto de historia recorre de −8 a 6 por ciento aflojando de 1,14 a 1,05.
- Epígrafe sobre foto
- El epígrafe va en blanco al 75 por ciento sobre una banda rgba(6, 6, 10, 0.45) con blur de 4 px, apoyado en la esquina inferior izquierda de la foto.
- Las marcas ajenas van planas
- Los logos de partners se aplanan a blanco con filter: brightness(0) invert(1) y corren al 72 por ciento de opacidad, 100 al pasar el mouse; en el tema día se aplanan a negro al 66. Las certificaciones van al 78 por ciento con saturación 0,85.
- La escena del pie
- La ilustración del pie se ancla abajo y su cielo se disuelve en el fondo de la página con un degradado que muere al 44 por ciento, así solo las lomas quedan a la vista en la banda final.
El material
Accessibility
Medido con WCAG 2.1 sobre los colores de esta página.
Commitments
- Cada fondo tiene su versión del logotipo
- Electric sobre ink, ink sobre cream, blanco sobre electric.
- El electric no es color de texto sobre ink
- Mide 3,22:1. Sirve para kickers grandes, barras y el logotipo.
- El deep solo se lee sobre cream
- Sobre ink mide 2,57:1 y sobre electric, 1,25:1.
Contrast
1 of 12 pairs falls short: Deep sobre ink measures 2.57:1 against a required 3:1.
| Pair | Specimen | Foreground | Background | Measured | Required | Result |
|---|---|---|---|---|---|---|
| Deep sobre ink | Visual sample | #3835D8 | #06060A | 2.57:1 | 3.0:1 | Fail |
| Blanco sobre ink | Visual sample | #FFFFFF | #06060A | 20.23:1 | 4.5:1 | PassAAA |
| Texto secundario sobre ink | Visual sample | #D6D6D2 | #06060A | 13.88:1 | 4.5:1 | PassAAA |
| Electric sobre ink | Visual sample | #4845EC | #06060A | 3.22:1 | 3.0:1 | PassAA Large |
| Ink sobre cream | Visual sample | #06060A | #E9E8E2 | 16.48:1 | 4.5:1 | PassAAA |
| Texto secundario sobre cream | Visual sample | #5E5E66 | #E9E8E2 | 5.23:1 | 4.5:1 | PassAA |
| Texto secundario sobre tarjeta | Visual sample | #5E5E66 | #E3E1DB | 4.91:1 | 4.5:1 | PassAA |
| Electric sobre cream | Visual sample | #4845EC | #E9E8E2 | 5.12:1 | 4.5:1 | PassAA |
| Deep sobre cream | Visual sample | #3835D8 | #E9E8E2 | 6.41:1 | 4.5:1 | PassAA |
| Blanco sobre electric | Visual sample | #FFFFFF | #4845EC | 6.29:1 | 4.5:1 | PassAA |
| Cream sobre electric | Visual sample | #E9E8E2 | #4845EC | 5.12:1 | 4.5:1 | PassAA |
| Ink sobre electric | Visual sample | #06060A | #4845EC | 3.22:1 | 3.0:1 | PassAA Large |
Ratios use the WCAG 2.1 relative-luminance formula and are computed from the hex values on this page, so they move the moment a colour does. A required 3:1 applies to large display type and non-text marks; everything else is held to 4.5:1.
Focus
Press Tab. The outline that lands on the control below is the focus-visible style the whole system uses: 2px of the accent colour, offset 3px, on a 1px radius. This section does not restyle it.
Assets
Los archivos.
Centra Nº2 se licencia de Sharp Type y no se redistribuye. Geist es gratuita, con licencia OFL.
Marcas
PNG con fondo transparente, salvo la placa.
- Electric
- keblan_electric.png
- Blanco
- keblan_white.png
- Placa electric
- keblan_plate_electric.png
Íconos
El iso en blanco sobre un cuadrado electric. Los dos archivos vienen del sitio. No hay .ico.
- Vector
- icon.svg
- Apple touch
- apple-icon.png — 180 × 180
Tipografía
Centra Nº2 de Sharp Type y Geist de Vercel.
- Centra Nº2 Bold
- 700 — títulos
- Geist Regular
- 400 — texto
- Geist Medium
- 500 — kickers