Geometríade máquina,esquinas rectas
La forma de Ingelmec nace de las terminaciones cuadradas de su imagotipo y de la geometría de los equipos que instala. En 2018 eso fue un motivo de piezas; en la web es el hexágono, el filete fino y la sombra teñida de azul.
Imagotipo: intacto
El imagotipo no se redibuja en 2.0. Se usa el archivo oficial y se respetan las reglas de 2018; este capítulo solo agrega los mínimos de pantalla.
Versión principal y piezas
- Versión horizontal a color: la principal, en el header del sitio y en todo documento.
- Versión vertical: para espacios que la requieran, con la misma composición (archivo oficial de Mercadeo).
- El isotipo puede usarse por separado.
- El logotipo (la palabra) no puede usarse por separado.
Isotipo solo: permitidoÁrea de respeto y tamaño mínimo
Ningún elemento entra en el espacio circundante del imagotipo. La medida sale de la propia marca: la letra «N» de INGELMEC.
Respeto = ancho de la «N»
Versión horizontal: el área de restricción es proporcional al ancho de la «N». Versión vertical: al alto de la «N».
Medido sobre el archivo oficial, la «N» mide 113 de 1313 px: el respeto horizontal es el 8.6 % del ancho del imagotipo. La zona rayada se recalcula en vivo al cambiar el tamaño de la ventana.
x = ancho de la «N» · 8.6 % del ancho del imagotipo.
Tamaño mínimo de reproducción
- Impresión, horizontal: 3 × 0.7 cm.
- Impresión, vertical: 1.2 × 1.6 cm.
- Pantalla, horizontal: 120 px de ancho (el header del sitio lo usa a 141 × 32 px). 2.0
- Pantalla, isotipo solo: 24 px de alto. 2.0
Control de fondos
Reglas de 2018 aplicadas a los fondos reales del sitio: papel, superficies, azul, tinta y fotografía duotono.
Qué versión sobre qué fondo
- Papel, blanco y fotos claras homogéneas: versión a color.
- Azul sólido, tinta y fotos oscuras homogéneas: versión blanca (pluma negativa).
- Fondos de K40 a K60: versión pluma (negro). De K61 a K99: solo pluma negativa.
- Fondos multicolor o fotos con muchos elementos: siempre contenida en un plano con color corporativo.
CorrectoCorrectoCorrectoCorrecto
CorrectoCorrectoUsos incorrectos
Las mismas prohibiciones de 2018, mostradas con el archivo real alterado por CSS. Ninguna de estas variantes se exporta ni se guarda como archivo.
No condensar ni expandir.
No distorsionar las proporciones establecidas.
No modificar los colores de la marca.
No aplicar efectos sobre la marca.
No rotar ni inclinar el imagotipo.
INGELMECNo modificar la tipografía del logotipo (aquí, Saira en lugar de Zemestro).
El hexágono
El motivo de 2018 separaba las piezas del isotipo para decir «Ingelmec encaja las piezas correctas». La web convierte esa idea en una sola forma repetible: el hexágono de lados planos arriba y abajo, con esquinas vivas.
Construcción
Se define con un único token: --ix-hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%).
- Proporción regular: ancho = 1.155 × alto. En numeradores pequeños (hasta 50 px) se admite caja cuadrada.
- Vértice superior derecho: lugar del nodo ámbar.
- Sin redondear vértices ni rotar a «punta arriba».
- Token
- --ix-hex
- Vértices
- 25 % · 75 % del ancho
- Laterales
- 50 % del alto
- Nodo
- Ámbar #FAAF2C, vértice superior derecho
- Esquinas
- Vivas, sin radio
Cuatro usos, ninguno decorativo
El hexágono siempre trabaja: numera, contiene, marca o enmarca. Si solo «adorna», sobra.
Soluciones, etapas y capítulos. Saira 800.
Fotos destacadas, nunca fichas de producto.
Viñetas de 8 px en listas y servicios.
Contorno de 1 px que gira a 90–120 s por vuelta. Detrás del contenido.
Tamaños
Escala usada en el sitio. Por debajo de 26 px el hexágono no lleva texto.
Filetes y esquinas
La estructura se dibuja con líneas finas, como un plano técnico. No hay esquinas redondeadas en ningún componente.
Cinco filetes
- Filete base: 1 px #e0ded6. Separa tarjetas, filas y secciones.
- Filete de tabla: 1 px tinta sobre la cabecera.
- Filete doble: 6 px de papel + 1 px de filete alrededor de fotos de hero.
- Filete punteado con nodos: cota de 1.5 px entre dos puntos azules.
- Filete de cierre: 5 px azul al pie de cada página.
Esquinas
Recto por defecto. El chaflán de 12 px (--ix-cut) solo para etiquetas. El círculo solo para el sello de años y los puntos de estado.
Por defecto
Etiquetas
Evitar
Sombras teñidas de azul
Las sombras del sistema no son grises: usan el azul de marca con baja opacidad, como luz filtrada por vidrio. Pase el cursor: las tarjetas se elevan 4 px igual que en el sitio.
filas y chips
tarjetas en hover
fotos de hero
paneles oscuros
Nunca gris neutro
Una sombra negra al 30 % ensucia el papel cálido. La sombra azul la integra.
Portal wireframe
La forma en movimiento: anillos hexagonales en profundidad que se abren como un iris. Es la técnica del bloque wireframe-portal-title de HyperFrames portada a canvas 2D, sin WebGL ni dependencias.
Anatomía del portal
- Anillos
- 14 hexágonos, profundidad 14
- Trazo
- tinta; cada cuarto anillo en azul
- Nodo
- ámbar en el vértice de los anillos azules
- Niebla
- opacidad por profundidad (fog²)
- Estela
- 64 trazos radiales azules al 35 %
- Uso
- intro de llegada y portada; nunca detrás de texto largo
Movimiento reducido activo: el portal se muestra como un fotograma fijo.