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.

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, azul para 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.

Fotos teñidas de rojo

Teñimos las fotos de rojo (duotono de marca) para compensar la descohesión entre documentos y materiales: unifica, camufla y da una imagen consistente. Toda foto editorial lleva el tratamiento mediante la clase .photo-duotone.

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, cinco roles

El botón estándar de acción es el pill rojo con flecha azul (.cta-cases). El CTA de conversión (.cta-primary) se reserva para «Hablemos» / contacto, descargas y el envío de formularios. El «Hablemos» de la cabecera es la excepción: usa el pill azul destacado (.cta-highlight) para resaltar sobre el menú rojo. El pill oscuro y el outline cubren casos puntuales. Un solo CTA principal por vista; no mezcles roles ni colores fuera de esta tabla.

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 ↗ / →. Ningún otro símbolo está permitido.

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, rojo para acento o estado activo, 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

Haz clic en cualquier icono para descargar su SVG con el color de marca.

Cómo hablamos

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.