Manual demarca 2.0,nacido de la web
Este manual no describe la marca: la ejecuta. Cada regla de color, forma, fotografía y movimiento se demuestra con la pieza real del sitio v4 funcionando en la página. Lo permanente del manual de 2018 se conserva; lo nuevo que trajo la web se documenta aquí por primera vez.
Su sistema tiene activado «reducir movimiento»: la intro y las demos animadas quedan en su estado final.
Índice del manual
Siete capítulos, del porqué de la marca a cómo se aplica en un documento. Los capítulos 04, 05 y 06 son los que el PDF de 2018 no podía tener: fotografía con tratamiento, movimiento y componentes web.
Identidad
Marca, pilares heredados de 2018, voz y tono, cifras como prueba.
Abrir capítulo →02Color y tipografía
Paleta con contraste calculado en vivo, Saira, Instrument Sans e IBM Plex Mono.
Abrir capítulo →03Forma
Imagotipo, área de respeto, hexágono, filetes, esquinas rectas y sombras azul-teñidas.
Abrir capítulo →04 DEMOS VIVASFotografía
Duotono azul horneado, ken burns y la regla del 40–50 % de fotos vivas.
Abrir capítulo →05 DEMOS VIVASMotion
Intro de llegada, portal, loop de hero, vista explosionada y cuboide. Tiempos y curvas.
Abrir capítulo →06 DEMOS VIVASComponentes web
Heroes editoriales, carrusel showcase, retícula, coverflow de casos y capa agent-first.
Abrir capítulo →07Aplicaciones
Papelería y documentos: antes y después, márgenes, membrete hexagonal, firma y presentaciones.
Abrir capítulo →TXTPara agentes
llms.txt, JSON-LD por página y sitemap: el manual también se lee por máquinas, como el sitio.
Abrir llms.txt →Cómo usar este manual
Tres ideas ordenan todo lo demás. Si una pieza nueva contradice este manual, gana el manual; si el manual contradice al sitio publicado, se corrige el manual.
La web manda
Los colores, tipos, sombras y tiempos viven como tokens CSS en el sitio v4 (site.css). Este manual importa esos mismos tokens: lo que usted ve aquí es exactamente lo que corre en ingelmec.pages.dev.
Cada regla se toca
Pase el cursor por una foto para ver el original, reproduzca la intro, arrastre la vista explosionada. Si su sistema pide reducir movimiento, todas las demos quedan quietas y legibles.
El PDF deriva de aquí
La versión PDF del manual y las plantillas de documentos se generan a partir de estas páginas. Un cambio de marca se hace primero en la web y después se exporta; nunca al revés.
Qué se hereda y qué es nuevo
El Manual de Identidad Visual de 2018 (Visuell, 71 páginas) sigue vigente en lo que define a la marca. La versión 2.0 no lo reemplaza: lo traduce a pantalla y lo extiende donde no llegaba.
| Elemento | Manual 2018 | Manual 2.0 (web v4) | Capítulo |
|---|---|---|---|
| Imagotipo | Isotipo + logotipo Zemestro, versión horizontal principal y vertical secundaria (B 1.0). | Se conserva intacto. Se añaden mínimos digitales en píxeles y control de fondos sobre foto duotono. | 03 |
| Área de respeto | Ancho de la «N» (horizontal) o alto de la «N» (vertical) (B 7.1). | Misma regla, medida sobre el archivo oficial: la «N» equivale al 8.6 % del ancho del imagotipo. | 03 |
| Colores | Seis colores sólidos, sin degradados (B 3.0). | Los mismos hex de marca. La tinta #1A353D se afina a #17282f para pantalla y se suman neutros de papel. | 02 |
| Tipografía | Zemestro (titulares) y Akkurat (textos) (B 4.0). | Zemestro queda en el logotipo. En pantalla y documentos editables: Saira, Instrument Sans e IBM Plex Mono. | 02 |
| Motivo | Piezas separadas del isotipo, terminaciones cuadradas (B 9.0). | El motivo digital es el hexágono: contenedor de fotos, numerador, nodo y portal en wireframe. | 03 |
| Aplicaciones | «Predominará el color blanco con acentos de color» (C). | Se mantiene: papel #f8f7f3 en pantalla, blanco en impresión, el azul como acento dominante. | 07 |
| Fotografía | Sin capítulo. | Duotono azul horneado, ken burns y regla del 40–50 % de fotos vivas. | 04 |
| Movimiento | Sin capítulo. | Intro de llegada, portal hexagonal, loop de video, vista explosionada, cuboide, curvas y tiempos. | 05 |
| Web y agentes | Sin capítulo. | Componentes del sitio, retícula de 1280 px, JSON-LD, llms.txt y HTML semántico. | 06 |
Los tokens en una vista
Para quien construye: estas variables son la marca en código. Están en assets/css/site.css del sitio v4 y este manual las usa sin modificarlas.
/* Color */ --ix-azul: #0567AD; --ix-verde: #05B290; --ix-ambar: #FAAF2C; --ix-rojo: #E32856; --ix-tinta: #17282f; --ix-tinta-deep: #132229; --ix-paper: #f8f7f3; --ix-border: #e0ded6; /* Tipo */ --font-display: 'Saira'; --font-body: 'Instrument Sans'; --font-mono: 'IBM Plex Mono'; /* Forma */ --ix-hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); --ix-cut: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); --elev-2: 0 2px 4px -2px rgba(5,103,173,.10), 0 22px 40px -20px rgba(5,103,173,.36); /* Movimiento */ --ease-out: cubic-bezier(.22,.61,.36,1); --ease-reveal: cubic-bezier(.16,1,.3,1); --layout-max: 1280px; --page-pad-x: 40px;