Marca Elogia
La referencia única de Elogia. Cuatro colores, dos tipografías y un conjunto cerrado de elementos para mantener una imagen coherente en cualquier entorno: presentaciones, redes, documentos o nuevos productos.
Logotipo
El isotipo y el logotipo completo son los elementos primarios de la marca. Respeta siempre un área de protección generosa y no deformes, recolorees ni añadas sombras.
Horizontal — color
Horizontal — antracita
Horizontal — claro
Apilado — color
Apilado — antracita
Apilado — claro
Isotipo — rojo
Isotipo — antracita
Isotipo — claro
Wordmark — antracita
Wordmark — claroSí
- ✳Área de protección mínima igual a la altura del isotipo
- ✳Usar la versión que mejor contraste con el fondo
- ✳Mantener las proporciones originales
No
- ✳Deformar, rotar o aplicar sombras y contornos
- ✳Recolorear fuera de la paleta de marca
- ✳Colocar sobre fondos con poco contraste
El isotipo y el logotipo son orgánicos y redondeados; el resto del sistema (tipografía, iconos, componentes) sigue una lógica geométrica y técnica. Es una decisión consciente, no una inconsistencia: el logo identifica, el sistema opera. Por eso el logo vive siempre aislado — cabecera, portada, footer — y nunca se coloca junto a un grid de iconos ni dentro de una tarjeta.
Paleta de cuatro colores
Exactamente cuatro colores, sin excepciones: bone como base, rojo Elogia como acento puntual, azul para recursos gráficos, documentos y datos, y negro para texto y fondos oscuros. No se admiten grises ni ningún tono fuera de la paleta. Para hover o profundidad se mezclan estos mismos colores, nunca uno nuevo.
Nunca pongas texto en rojo sobre fondo oscuro (#232323): el contraste es insuficiente y resulta ilegible. Sobre fondos oscuros, labels, datos y marcadores (incluido el ✳) van en azul o en bone. El rojo como texto se reserva para fondos claros. Las superficies grandes oscuras usan negro #232323, nunca rojo.
Space Grotesk + Space Mono
Space Grotesk es la familia principal para titulares y cuerpos: H1 Bold (700) a 86px, H2 Bold (700) a 52px, H3 Semibold (600) y Body Regular (400) a 18px. Space Mono (Space Grotesk Mono) se usa en los Labels a 12px en MAYÚSCULAS, y en datos (cifras, %, KPIs), papers, títulos de personas con quote y textos muy pequeños: siempre en MAYÚSCULAS y siempre en Bold, por pequeña que sea la pieza, para que siempre se lea. Los titulares van en sentence case y nunca terminan en punto.
Duotono puntual
El duotono rojo se permite de forma puntual, como en el fondo de videollamada aportado; no se aplica automáticamente a toda fotografía. La dirección fotográfica está pendiente de definir con el equipo de marca. Cuando se use, se aplica con la clase .photo-duotone.
.photo-duotone — tratamiento de marca.Elementos de interfaz
Las chips y las tarjetas de caso son siempre redondeadas (chips pill 999px, tarjetas radio 16px). El resto de superficies y paneles mantienen esquinas rectas (radio máximo 4px). Sin gradientes ni sombras: la profundidad la dan los bordes de 1px en negro. El hover cambia color, opacidad o borde — nunca escala ni desplazamiento.
Botones — un sistema, seis roles
Norma: el rojo #E80013 se reserva a «Hablemos», sin flecha. Todos los demás botones —acceso a contenido, descargas, envío de formularios— van en azul #90B9D5 con texto negro #232323 (sobre bone o antracita). Texto y flecha siempre del mismo color; envíos, contacto y Menú/Cerrar no llevan flecha. Un solo botón por bloque compacto. El botón estándar de acción y exploración es el pill azul (.cta-cases). El pill oscuro (.cta-nav) y el outline (.cta-secondary) cubren casos puntuales. Un solo CTA principal por vista; no mezcles roles ni colores fuera de esta tabla.
Estándar · Azul + texto y flecha en negro
.cta-cases
Usar: acción y exploración por defecto — «Ver todos los casos», «Ver estudios», navegación entre secciones.
No: como CTA de conversión de contacto.
Contacto · Rojo sin flecha
.cta-talk
Usar: solo «Hablemos» / contacto en el cuerpo de página.
No: para descargas, envíos ni acceso a contenido.
Descarga y envío · Azul
.cta-primary / .btn-yellow
Usar: descargas, envío de formularios y acceso a contenido: azul con texto negro, sin flecha en envíos.
No: en rojo. El botón rojo de descarga con flecha es exclusivo de emails.
Destacado cabecera · Rojo
.cta-highlight
Usar: exclusivamente el «Hablemos» del menú de navegación — pill rojo con texto bone en Space Mono.
No: en el cuerpo de la página; ahí se usa .cta-talk.
Navegación · Pill oscuro
.cta-nav
Usar: casos puntuales de navegación o descarga secundaria.
No: como CTA principal de conversión.
Terciario · Outline
.cta-secondary
Usar: acción alternativa — enviar CV, descartar.
No: como acción principal de la sección.
Chips
Siempre pill (999px) y en MAYÚSCULAS. El KPI azul va relleno para diferenciar el dato de los tags. Cuando la chip enlaza a una página —las capacidades de Full Digital Commerce— se usa .chip--lift, que añade la flecha diagonal del sistema.
Chip enlace (capacidades) — .chip.chip--lift
Enlaces con flecha
Norma única: todas las flechas de botones, enlaces y componentes son la diagonal de .arrow-ico y heredan el color del texto. Solo se gira (--left, --down, --up) para navegación pura: anterior / siguiente de un carrusel, desplegables y envío. Nunca la flecha recta →.
Tres elementos tipográficos
No usamos librerías de iconos. Todos los elementos gráficos son caracteres Unicode: el asterisco ✳, la comilla de apertura y la flecha diagonal ↗. Las formas —asteriscos, comillas y labels— van siempre en azul #90B9D5, tanto sobre bone como sobre fondo oscuro; la flecha hereda el color del texto. Ningún otro símbolo está permitido.
Asterisco (U+2733)
Bullets de lista, separadores del ticker y marcadores de sección. Siempre en azul #90B9D5, sobre fondo claro y oscuro. Nunca sustituido por *.
Comilla (U+201C)
Marca de apertura en bloques de cita. Siempre en azul #90B9D5.
Flecha (U+2197)
Una sola flecha en todo el sistema: la diagonal ↗ de la clase .arrow-ico, siempre del mismo color que el texto que acompaña. Se gira solo para navegación pura (anterior, siguiente, desplegar). Nunca la flecha recta →.
Set de iconos de marca
Conjunto propio de 47 iconos sobre grid de 24×24 y trazo de 1,5. Se insertan siempre como SVG inline (nunca como imagen) para que hereden el color de marca vía currentColor: negro por defecto y azul cuando el icono representa un dato o documento. Escalan proporcionalmente a 16, 24, 32 y 48px. No añadas iconos fuera de este set.
Tamaños
Color por función
Negro — por defecto
Uso general del icono.
Azul — acento / activo
Destacado o estado seleccionado.
Azul — dato / documento
Cuando representa un dato o un informe.
Haz clic en cualquier icono para descargar su SVG con el color de marca.
Iconos de capacidades
Un icono por cada capacidad de Full Digital Commerce, con el mismo grid de 24×24 y trazo de 1,5 que el resto del set. Sirven para identificar la capacidad en presentaciones, propuestas, documentos y piezas de contenido. Se usan en negro por defecto y en azul cuando marcan la capacidad protagonista de la pieza.
Haz clic en cualquier icono para descargar su SVG con el color de marca.
Score de optimización
Medidor para representar el nivel de optimización de un activo digital. Cinco tramos de 20 en 20: los tramos alcanzados se rellenan y el resto queda en bone con trazo negro. Los tramos alcanzados van en azul.
Cómo hablamos
Directos
Frases cortas y afirmativas. Decimos lo que hacemos sin rodeos ni jerga vacía.
Operadores
No somos agencia: somos operadores de comercio digital. El tono refleja responsabilidad sobre resultados.
Sobrios
Elegancia editorial. La jerarquía la marcan la tipografía y el espacio, no los adornos.
Aire, márgenes y puntero
El aire es parte de la marca: cada sección respira siempre lo mismo, y el puntero es también un elemento de identidad.
Márgenes laterales
60px en escritorio y 24px en móvil, iguales en todas las secciones. Ningún bloque se sale de ese eje, tampoco los carruseles.
Aire vertical
88px arriba y 96px abajo en móvil, para todas las secciones sin excepción. En escritorio, 80px de base y 180px en los bloques destacados como «Por qué nosotros».
Cursor
El puntero es la misma flecha diagonal del sistema, sin borde: negro sobre fondos bone y crema sobre superficies oscuras o rojas. Se mantiene en todos los elementos, también en carruseles arrastrables; solo lo deshabilitado cambia de señal.
Logos de cliente
En fichas de caso y tarjetas de testimonio los logos no se colocan al mismo alto: se calibran por densidad de tinta para que pesen lo mismo a la vista, tomando Cofidis como referencia. Sobre foto van en blanco; sobre bone, en negro.
Lo que nunca hacemos
Reglas duras: cualquier pieza que incumpla algo de esta lista está fuera de marca. Ante la duda, vuelve a la paleta de cuatro colores y a la jerarquía tipográfica.
Colores fuera de los cuatro de marca, o grises (#EDEDED, #555, #D0D0D0…).
Texto rojo sobre fondo oscuro: ilegible y off-brand (usa azul o bone).
Etiquetas tipo «kicker», líneas o divisores entre bloques y subrayados de énfasis.
Gradientes y sombras: la profundidad se da con bordes de 1px en negro.
Chips o tarjetas de caso con esquinas cuadradas; esquinas >4px en otras superficies.
Librerías de iconos (Lucide, Heroicons…): solo ✳, “ y la flecha diagonal ↗.
La flecha recta → en botones o enlaces, o una flecha de color distinto al del texto.
Asteriscos, comillas o labels en rojo: todas las formas van en azul #90B9D5.
Botones rojos que no sean «Hablemos»: descargas, envíos y accesos van en azul con texto negro.
Barras, KPIs, gráficos o franjas de cifras en rojo: usa negro y azul.
Errores de formulario en rojo: van en azul, debajo del campo, explicando cómo corregirlos.
Texto y flecha de distinto color, o flecha en envíos, contacto y Menú/Cerrar.
OffBit (retirada) y pesos de Space Grotesk fuera de 400 / 600 / 700.
Space Mono que no vaya en MAYÚSCULAS + bold o fuera de labels, datos, papers y textos pequeños.
Secciones sin aire: nunca por debajo de 88px arriba y 96px abajo en móvil.
Logos de cliente colocados al mismo alto: se calibran por densidad de tinta, no por tamaño de archivo.