Horizontal — color (fondo claro)
Variante principal. Leaf brand-primary, texto ink. Para usar en todas partes sobre fondo claro.
Brand kit
Guía de marca
Logos, colores, tipografías. Esta página sirve de referencia para el equipo de Chargekeeper y de kit de marca para nuestros partners que integran nuestros recursos visuales.
¿Una pregunta sobre el uso de la marca? Contáctanos.
Logos
Variantes principales
Usa la variante adaptada al contraste del fondo. Mantén siempre una zona de protección alrededor del logo equivalente a la altura de la hoja.
Horizontal — signature (fondo oscuro)
Variante ADN. Leaf verde signature, texto blanco. Reservar para fondos oscuros y momentos de gran impacto.
Variante signature — hoja en #38E54D (verde ADN). Reservada para fondos oscuros.
Horizontal — monocromo blanco
Todo blanco. Para fondos oscuros muy cargados (fotos oscuras) o soportes monocromos.
Vertical — signature (fondo oscuro)
Variante vertical ADN. Utilizada en el pie de página del sitio.
Variante signature — hoja en #38E54D (verde ADN). Reservada para fondos oscuros.
Vertical — negro (monocromo)
Vertical monocromo negro. Impresión, fax, soportes en blanco y negro.
Uso del logo
Qué hacer & qué evitar
Qué hacer
- Mantener una zona de respiro alrededor del logo (≥ altura de la hoja).
- Usar la variante adaptada al contraste del fondo.
- Mantener las proporciones originales (sin estirar).
- Priorizar el SVG para la web y la impresión.
Qué evitar
- No modificar los colores fuera de la paleta oficial.
- No añadir efectos (sombras, contornos, degradados).
- No rotar ni deformar el logo.
- No colocar el logo sobre un fondo con poco contraste.
Mascota
Keeper
Personaje de marca usado para las ilustraciones amigables, las páginas de error y la comunicación interna.
Keeper es nuestra mascota. Aparece principalmente en contextos lúdicos (página 404, soportes internos, eventos). Usar con moderación en las comunicaciones comerciales — preferir el logo en los contextos formales.
Colores
Paleta
Tres roles distintos: un verde universal para el uso corriente, un verde signature para el ADN sobre fondo oscuro y un acento lima para los resaltados tipográficos. Tokens CSS definidos en global.css — referenciar siempre el token, nunca el valor hexadecimal fijo.
Sobre fondo claro — colores de trabajo
#27a273
Brand primary
--color-brand-primary Universal. Botones, enlaces, acentos UI, leaf del logo «día». Todos los fondos, todos los contextos.
#1a8a5e
Brand primary dark
--color-brand-primary-dark Hover / pressed del brand primary.
#e1ffa0
Accent lime
--color-accent-lime Resaltado tipográfico solo sobre fondo claro (efecto «marcador amarillo» en palabras clave). No es un color de marca.
Sobre fondo oscuro — ADN signature
#38E54D
Vert signature
--color-signature ADN histórico. Reservado a fondos oscuros y momentos de fuerte impacto: logo «noche», badges live, sesiones en curso, acentos hero dark. Nunca sobre fondo claro (legibilidad).
Escala verde
#c8fbe7
green-50
--color-green-50 Fondos muy claros, degradados hero.
#a8eccc
green-100
--color-green-100 Superficies secundarias teñidas.
#5fc99c
green-300
--color-green-300 Ilustraciones y estados intermedios.
#27a273
green-500
--color-green-500 Idéntico al brand primary.
#32735f
green-600
--color-green-600 Texto sobre fondo claro, acentos sobrios.
#1a3e39
green-700
--color-green-700 Superficies oscuras terciarias.
#164038
green-800
--color-green-800 Superficies oscuras secundarias.
#143109
green-900
--color-green-900 Superficies oscuras profundas, secciones premium.
#071412
green-950
--color-green-950 Footer, fondos oscuros signature, hero dark.
#071412
ink
--color-ink Texto principal. Idéntico a green-950.
#ffffff
paper
--color-paper Fondo principal, superficies.
#fafafa
paper-soft
--color-paper-soft Secciones alternas, tarjetas.
#e6e6e6
paper-mute
--color-paper-mute Bordes, separadores, desactivado.
Tipografía
Fuentes
Dos fuentes principales — una display para los títulos, una sans-serif para el texto corriente. Stack mono para el código.
Averta Std
Display — títulos
--font-display Supervisión EV pensada para profesionales
Geometric sans, carácter premium. Reservada a H1–H6.
Fallback: General Sans, Inter, system-ui.
General Sans
Texto — cuerpo & UI
--font-sans La solución de supervisión completa, interoperable y escalable.
Sans-serif neutra, excelente legibilidad en pantalla. Utilizada para todo el texto corriente y la UI.
Fallback: Inter, system-ui, Segoe UI, sans-serif.
ui-monospace
Código, tokens
--font-mono OCPP 2.0.1 · API_KEY=ck_…
Pila de sistema: SFMono-Regular, Menlo, Monaco, Consolas, monospace.
Ninguna fuente personalizada — rendimiento y coherencia con el SO.
Escala tipográfica
H1 — Display 6xl
H2 — Display 5xl
H3 — Display 4xl
H4 — Display 2xl
Párrafo de introducción — lg/xl, text-ink/80.
Texto corriente — base, text-ink/70.
Nota / caption — sm, text-ink/60.
Eyebrow — xs, uppercase, tracking large, brand-primary
¿Eres partner?
Descarga los logos directamente desde esta página. Para formatos adicionales (AI, EPS, vectorial de alta resolución) o co-brandings específicos, contáctanos.