Sistema de diseño Elogia Pharma
Todo lo que necesitas para producir un activo de Elogia Pharma sin pedir permiso: color, tipografía, componentes, iconos, fotografía y tono. Si algo no está aquí, no se inventa: se propone y se documenta.
Logo
Elogia Pharma usa la versión horizontal en negro sobre bone. Es la única combinación por defecto.
Primario · negro sobre bone · alto 38–44 px en web
Negativo · solo sobre negro o rojo Elogia
Área de respeto = altura de la “E” en los cuatro lados
Sí
- Logo siempre alineado a la izquierda en la navbar.
- En presentaciones, logo en la esquina superior derecha de todas las diapositivas.
- Escalar de forma proporcional, mínimo 24 px de alto.
No
- Recolorear el logo en azul, sage o degradados.
- Aplicar sombras, contornos o efectos.
- Colocarlo sobre fotografía sin caja de color sólida detrás.
Color
Cuatro colores Elogia más un sub-acento sanitario. El rojo es la marca madre; el azul es la voz de Pharma. Haz clic en una muestra para copiar el hex.
Proporción de uso
70% bone · 15% negro · 10% azul Pharma · 5% rojo Elogia. El sage entra solo por debajo del 2%, en detalles de sector.
Tipografía
Space Grotesk para todo lo que se lee; Space Mono en mayúsculas y con tracking para etiquetas, cifras y metadatos.
Space Grotesk
Pesos 400 / 500 / 600 / 700. Titulares con tracking negativo (-0.02em) y line-height corto.
Space Mono
Solo en mayúsculas, peso 700, tracking +0.08 a +0.12em. Etiquetas, numeración y datos.
Prohibido en titulares
- Punto final en los titulares.
- Kickers o chips de categoría encima del titular.
- Mayúsculas completas en textos largos.
Jerarquía tipo
- Titular en negro, subtitular en azul Pharma, párrafo en negro al 75%.
- Un solo H1 por página.
- Cifra grande en Space Grotesk 700, unidad en Space Mono.
Componentes
Bordes rectos por defecto; solo pills (999px) y tarjetas (16px) llevan redondeo. Un único CTA principal por vista.
Botones
cta-highlight · btn-blue · btn-red · btn-outline
Chips
Solo como etiqueta de contenido, nunca como kicker
Tarjeta
01
Título de tarjeta
Filete de 1 px, radio 16, padding 24–40 según densidad.
.card · .card--dark para fondo negro
Bloque de dato
72%
Cifra en azul sobre negro, descripción corta debajo. Máximo dos por fila.
Sección de color
Espaciado y rejilla
- Sección: 96 px vertical / 60 px lateral (56/24 en móvil).
- Ancho máximo de contenido: 1240 px.
- Escala de gaps: 8 · 12 · 16 · 24 · 32 · 64.
- Split editorial 60/40 con imagen a altura completa.
Iconografía
Set propio: trazo de 1,5 px, remates redondeados, sin relleno y heredando color del texto. Nunca se importan iconos de Lucide, Heroicons o Font Awesome.
viewBox 24 · strokeWidth 1.5 · strokeLinecap round · fill none · currentColor
Fotografía
Salud real, no stock clínico. Personas, laboratorio, farmacia y producto con luz natural y encuadre editorial.
Sí
- Luz natural, tonos cálidos que convivan con el bone.
- Esquinas redondeadas (16 px) y recorte a altura completa de la columna.
- Blanco y negro cuando la foto compite con un bloque de color.
- Personas trabajando, no posando.
No
- Batas blancas sonriendo a cámara con fondo azul degradado.
- Iconografía 3D, píldoras flotando o renders genéricos.
- Filtros saturados o duotonos fuera de la paleta.
- Texto incrustado dentro de la imagen.
Tono de voz
Hablamos a CMOs y equipos de marketing de laboratorio. Operadores, no agencia: el cliente es el sujeto y la cifra va antes que el adjetivo.
Cómo escribimos
- Frases cortas y afirmativas. Una idea por frase.
- Dato concreto antes que promesa.
- Vocabulario del sector sin jerga de agencia.
- El cliente es el sujeto: “tu marca”, no “nosotros”.
Palabras vetadas
- Revolucionario, disruptivo, sinergia, 360º, partner estratégico.
- “En el mundo actual…”, “no es solo X, es Y”.
- Emojis y signos de exclamación.
- Promesas de plazo o resultado que no podamos garantizar.
Tokens
Copia estas variables en cualquier pieza digital. Son las mismas que gobiernan esta web.
--color-brand-bone: #FBF5E9; --color-brand-black: #232323; --color-brand-red: #E80013; --color-brand-blue: #90B9D5; --color-pharma-sage: #6B8E7F; --font-display: "Space Grotesk"; --font-data: "Space Mono"; --radius-pill: 999px; --radius-card: 16px; --radius-block: 40px; --section-padding: 96px 60px; --max-width: 1240px;