Sistema de Identidad Digital

01 / Color — Núcleo

Paleta base: acero y Naranja MIM.

El naranja hereda el color histórico del grupo (presente en logotipos como VITSA). Los aceros aportan la seriedad industrial. La tinta, el papel y la línea sostienen el contenido técnico: fichas, normas y tablas.

Naranja MIM

#F26A21✓ Copiado

Acento principal: CTAs, destacados, detalles.

Naranja Intenso

#FF7E38✓ Copiado

Hover y estados activos sobre oscuro.

Acero 950

#081320✓ Copiado

Fondos principales oscuros: héroes, footer, barra de utilidad.

Acero 900

#0D2036✓ Copiado

Secciones oscuras alternas, barra de navegación.

Acero 800

#14314F✓ Copiado

Hover en filas y botones sobre fondo oscuro.

Acero 700

#1D4569✓ Copiado

Enlaces y acentos secundarios sobre fondo claro.

Tinta

#10161D✓ Copiado

Texto principal sobre fondo claro.

Texto secundario

#5B6B7C✓ Copiado

Texto de apoyo, metadatos, placeholders.

Papel

#F5F7F9✓ Copiado

Fondo base de páginas claras.

Línea

#DBE2EA✓ Copiado

Bordes, divisores, rejillas técnicas.

Regla de uso 60 / 30 / 10

60% neutros

30% acero

10%

60% neutros (papel/blanco), 30% acero, 10% naranja o acento. El acento nunca domina la vista: aparece en CTAs, íconos y detalles.

Acero con alfa — veladuras y vidrio

steel-950/90

steel-950/85

steel-950/70

steel-950/60

steel-950/40

steel-950/30

Se usan en degradados de héroe (90% → 30%), tarjetas de vidrio y veladuras sobre fotografía — nunca filtros de color.

02 / Color — Acentos regionales

Un acento por sucursal.

Cada sitio de sucursal usa la misma base de acero, pero reemplaza el naranja por su propio acento. Así los 7 sitios se reconocen como familia sin perder personalidad local. El acento se inyecta como variable CSS --accent en <html> de cada sitio.

M

MIM

Cuautitlán Izcalli, Estado de México

CTA

VI

VITSA

Lerma, Estado de México

CTA

MG

MIGSA

Tlaquepaque, Jalisco

CTA

MC

MICSA

Coatzacoalcos, Veracruz

CTA

MS

MIS

Puebla

CTA

MT

MIMTY

Santa Catarina, Nuevo León

CTA

MB

MIBQRO

El Pueblito (Corregidora), Querétaro

CTA

Regla de oro

Un solo acento por sitio de sucursal.

Nunca mezclar dos acentos regionales en la misma vista.

✓ Correcto

— Un solo acento por sitio de sucursal.
— Acento en CTAs, íconos y detalles — nunca en fondos completos de texto.
— Contraste mínimo AA (4.5:1) en texto.

✗ Evitar

— Mezclar dos acentos regionales en la misma vista.
— Degradados multicolor o sombras de colores.
— Naranja sobre naranja o texto claro sobre acento claro.

03 / Tipografía

Industrial, técnica y legible.

Tres familias con roles claros: Archivo para titulares con carácter, Inter para texto corrido, IBM Plex Mono para datos técnicos, especificaciones y etiquetas.

Aa

Archivo

font-display · Titulares, nav, CTAs

Pesos 700–900. Mayúsculas para navegación y CTAs. Tracking cerrado (-0.02em) en titulares grandes.

Construir 700

Construir 800

Construir 900

Aa

Inter

font-body · Párrafos y UI

Párrafos de 14–16px, interlineado 1.6. Pesos 400–600 únicamente.

La tubería, válvulas y conexiones son de las marcas más prestigiadas del mercado y cumplen con las normas de calidad más exigentes.

Aa

IBM Plex Mono

font-tech · Datos técnicos

Especificaciones, tablas de catálogo, etiquetas en mayúsculas con tracking amplio (+0.2em).

Cédula 40 · 1/2" – 4"

Clase 150 – 2500

/ Productos

Escala tipográfica

Material industrial

Display XL · 60px · Archivo Black · font-display text-6xl font-black

Medio siglo moviendo la industria

H2 · 36px · Archivo ExtraBold · font-display text-4xl font-extrabold

Amplio inventario, entrega inmediata

H3 · 24px · Archivo Bold · font-display text-2xl font-bold

Distribuidor líder de tubería, válvulas y conexiones.

Body · 16px · Inter Regular · font-body text-base

ASTM A-53 / NMX B-177

Label · 12px · IBM Plex Mono · font-tech text-xs uppercase tracking-[0.2em]

La selección de texto se tiñe de naranja: ::selection { background: var(--orange); color: #fff }

04 / Marca

El bloque M.

Cada empresa conserva su logotipo histórico: es la pieza de marca visible en el encabezado de su sitio. El bloque naranja "M" queda como monograma del grupo para favicon, avatar y documentos internos.

Logotipos legados — en uso en los 7 sitios

Logotipo de Materiales Industriales de México

MIM

grupo-mim.com

Logotipo de Válvulas Industriales de Toluca

VITSA

vitsa.com.mx

Logotipo de Materiales Industriales de Guadalajara

MIGSA

migsa.com.mx

Logotipo de Materiales Industriales de Coatzacoalcos

MICSA

micsacv.com

Logotipo de Materiales Industriales del Sureste

MIS

materialesdelsureste.com

Logotipo de Materiales Industriales de Monterrey

MIMTY

mimty.com.mx

Logotipo de Materiales Industriales del Bajío

MIBQRO

mibqro.com

Reglas de uso

— Altura en navbar: 40–44px; nunca estirar ni recolorear.
— Sobre acero (footer): siempre sobre chip blanco, esquinas rectas.
— Mantener área de respeto = altura de una letra del logotipo.
— Originales en /assets/img/logos-sites/originals/.

Primario · sobre acero

M GRUPO MIM Conducción · Control · Fluidos

Anatomía y construcción

— Bloque: cuadrado de 40×40px en el acento del sitio, letra "M" en Archivo Black blanca.
— Pin: cuadrado Acero 950 de 10×10px anclado a -4px abajo-derecha, con contorno de 2px en color Papel.
— Wordmark: Archivo ExtraBold 18px, tracking cerrado.
— Descriptor: IBM Plex Mono 10px, mayúsculas, tracking +0.22em.
— En sucursal: el bloque toma --accent y el descriptor pasa a "Ciudad · Estado".

M MIM Cuautitlán Izcalli, Estado de México

grupo-mim.com · #F26A21

M VITSA Lerma, Estado de México

vitsa.com.mx · #D97706

M MIGSA Tlaquepaque, Jalisco

migsa.com.mx · #0E9488

M MICSA Coatzacoalcos, Veracruz

micsacv.com · #1E7BC8

M MIS Puebla

materialesdelsureste.com · #1E40AF

M MIMTY Santa Catarina, Nuevo León

mimty.com.mx · #6D5BD0

M MIBQRO El Pueblito (Corregidora), Querétaro

mibqro.com · #C2265C

05 / Componentes

Piezas de interfaz.

Geometría recta, sin esquinas redondeadas: la interfaz habla el mismo idioma que el producto. Bordes de 1px, estados hover con desplazamiento y color sólido.

Header del sitio — anatomía aprobada

Tel · CorreoAviso de Privacidad · Términos

LOGO Activo Enlace Enlace Cotizar → ☰

— Barra superior (Acero 950): teléfono, correo y legales; se oculta al hacer scroll (>24px).
— Barra principal blanca y pegajosa (sticky), con sombra de acero al hacer scroll.
— Logotipo legado a 40–44px; nav con subrayado de acento de 3px que crece de izquierda a derecha en hover/activo.
— CTA "Cotizar →" en el acento del sitio; en móvil, panel hamburguesa con "Solicitar cotización".

Botones — 7 variantes

Solicitar cotización →

.btn-primary — CTA principal

(55) 5899 2400

.btn-secondary — acción secundaria

Ver catálogos

.btn-outline-light — contorno sobre claro

No disponible

.btn-disabled — inactivo

Solicitar cotización

.btn-accent — toma --accent del sitio

Solicitar cotización

.btn-outline-dark — vidrio sobre foto

Cotizar

.btn-quote — CTA de navbar

Chips y etiquetas

ASTM A-53 UL / FM Nuevo

.chip · .chip-solid · .chip-accent

/ Productos

.eyebrow — etiqueta de sección sobre claro

Sobre oscuro

/ Red nacional

.eyebrow-dark

Orgullosamente mexicana · Desde 1972

.hero-badge — insignia de héroe con punto de acento

Tarjeta clara

Borde 1px Línea, fondo blanco, p-6.

Hover: sombra de acero 0_14px_40px_-16px. Sin radio, sin sombras de color.

Tarjeta oscura + spec pill

Clase 150 – 2500

Válvulas

Imagen sobre bloque blanco h-44; la spec pill ancla el dato clave.

Formulario

.form-label / .form-input — foco: borde --accent

Tabla de especificaciones

Producto	Norma	Medida	Extra	Disponibilidad
Tubería acero al carbón	ASTM A-53 / NMX B-177	1/2" – 4"	Céd. 40 y 80	Inmediata
Válvula compuerta fundido	ASME / ANSI	2" – 48"	Cl. 150–2500	Inmediata
Conexiones forjadas	ASME B16.11	1/4" – 2"	3000 / 6000#	Inmediata
Sistema ranurado	UL / FM	1" – 60"	—	Bajo pedido

.spec-table — encabezado Acero 950, datos en Plex Mono, puntos de disponibilidad

Banda de estadísticas

53+Años

7Empresas

1,500+SKU

13Ubicaciones

Modal (Alpine.js)

El patrón usado en el "Aviso Importante" anti-phishing de los 7 sitios.

Aviso importante

Este es un ejemplo del modal del sistema. Se cierra con Esc, clic fuera o el botón.

06 / Texturas y motivos

Rejilla técnica y franja de seguridad.

Fondos con cuadrícula tipo plano (blueprint) como textura de marca en héroes y pies de página. La franja diagonal de seguridad corona los footers: guiño industrial al marcaje de planta.

.blueprint — rejilla blanca 4.5% / 56px, sobre acero

.blueprint-dark — rejilla acero 5% / 56px, sobre papel

.hazard — diagonal naranja/acero 45°, franja de 10px sobre footers

07 / Layout y espaciado

Geometría de tubo, brida y codo.

Sin redondeces.

Esquinas rectas en botones, tarjetas y campos. La geometría refleja el producto: tubo, brida, codo. border-radius: 0 en todo el sistema.

0px 1px borde acento

Contenedor y ritmo vertical.

— Contenedor: max-w-7xl px-5 (1280px, 20px laterales).
— Secciones mayores: py-20 md:py-28; secundarias py-16.
— Rejillas: productos sm:2 / lg:3, sucursales lg:3 / xl:4, footer 4 columnas.
— Bordes: 1px Línea en claro; white/10–15 en oscuro.

Sombras — siempre teñidas de acero, nunca de color

Imagen destacada

0 24px 60px -24px / 45%

Tarjeta (hover sucursal)

0 18px 50px -18px / 40%

Tarjeta pequeña (hover)

0 14px 40px -16px / 35%

08 / Movimiento

Movimiento discreto, con propósito.

Sin paralaje ni fuegos artificiales: marquesina de marcas, entradas suaves al cargar y micro-interacciones de hover que confirman la acción.

Tenaris Tamsa Ternium Villacero Tubería Laguna Bull Moose Walworth Victaulic Ulma Cifunsa TLV Worcester Nibco Tenaris Tamsa Ternium Villacero Tubería Laguna Bull Moose Walworth Victaulic Ulma Cifunsa TLV Worcester Nibco

.marquee-track — 36s lineal infinito, lista duplicada ×2, separador de diamante naranja

Entradas — .rise con escalonado

Fade + subida de 22px, 0.7s cubic-bezier(0.22,1,0.36,1), retardos de 0.08s. En páginas: x-reveal con IntersectionObserver.

Micro-interacciones hover

Flecha que avanza →

Flecha +1 en X · imagen escala 105% / 500ms · tarjeta eleva sombra de acero.

09 / Fotografía

Estilo fotográfico corporativo.

Imágenes reales de la operación: gente trabajando, producto en contexto y plantas industriales. Tratamiento consistente en todos los sitios.

Soldador con casco naranja y guantes soldando viga de acero con chispas en planta — Gente y operación

Colaboradores con EPP en contexto real. Humaniza la marca y comunica escala y profesionalismo.

Válvula de compuerta azul con volante montada sobre tubería roja bridada — Producto en contexto

Acabados reales, series de producto y detalle industrial. Evitar renders genéricos de catálogo.

Refinería iluminada en hora azul con tanque de almacenamiento y antorchas — Industria y escala

Plantas e instalaciones de clientes al amanecer o anochecer: el entorno donde vive el producto.

Biblioteca curada de 26 fotografías (Pexels License, sin atribución requerida) — créditos en /assets/img/photos/CREDITS.md.

Tratamiento

— Sobre fotografía, veladura de Acero 950 en degradado (90% → 30%) para texto.
— Nunca filtros de color ni sepias; corrección neutra, contraste natural.
— Proporciones: 16:9 en héroes, 4:3 en tarjetas de producto.

Evitar

— Bancos de imágenes genéricos con marcas de agua.
— Manos sin EPP (equipo de protección personal).
— Renders de catálogo sin contexto real.

10 / Voz y tono

Español industrial, directo y normado.

Español mexicano, registro formal-industrial, primera persona plural institucional. El dato técnico va primero: el ingeniero encuentra la norma en 2 clics.

Titulares — frase corta, punto final, una palabra en acento

Material industrial para el México que construye.

Medio siglo moviendo la industria mexicana.

Amplio inventario, entrega inmediata.

Siete sucursales, una misma identidad.

Archivo Black/ExtraBold, interlineado cerrado (0.95–0.98), sentence case.

CTAs — imperativos en mayúsculas

Solicitar cotización Ver catálogo Cotizar Ver red de sucursales Conocer soluciones

Los CTAs de contacto muestran el dato crudo: "(55) 5899 2400", "ventas@grupo-mim.com".

Anotaciones técnicas — Plex Mono con prefijo de barra

/ El grupo / Productos / Red nacional / Cotizaciones

Eyebrows, especificaciones, horarios y pies legales siempre en mono-mayúsculas: el registro del plano de ingeniería.

Marcadores de confianza

"Certificación ISO 9001:2015" · "Orgullosamente mexicana · Desde 1972" · "inventario real" · "entrega inmediata" · "asesoría técnica" · normas "ASTM A-53 / NMX B-177" · "requisitos PEMEX y CFE".

Referencia rápida de tokens

Variable CSS	Valor	Token Tailwind	Uso
--steel-950	#081320	steel-950	Fondos oscuros, footer, navbar
--steel-900	#0D2036	steel-900	Secciones oscuras alternas
--steel-800	#14314F	steel-800	Hover sobre oscuro
--steel-700	#1D4569	steel-700	Enlaces secundarios en claro
--ink	#10161D	ink	Texto principal
--paper	#F5F7F9	paper	Fondo base
--line	#DBE2EA	line	Bordes y divisores
--muted-txt	#5B6B7C	muted-txt	Texto secundario
--orange	#F26A21	orange	Acento grupo (MIM)
--orange-hot	#FF7E38	orange-hot	Hover / acento en oscuro
--accent	por sitio	[var(--accent)]	Acento dinámico del sitio
—	Archivo	font-display	Titulares, nav, CTAs
—	Inter	font-body	Párrafos y UI
—	IBM Plex Mono	font-tech	Specs, etiquetas, legal

¿Implementando una pieza nueva?

Revisa primero esta guía y el brand book vivo de cada sitio en /marca/. Las clases de componentes viven en src/styles/main.css.

Ver los 7 sitios →

11 / Código

Estándares de implementación.

Cómo están construidos los sitios: el stack, qué se usa de cada tecnología y las reglas que cualquier cambio debe respetar. Para el pipeline de build completo ver Arquitectura & Build.

Eleventy 3 · SSG Nunjucks Tailwind CSS 3.4 Alpine.js 3 HTMX 2 Vanilla JS (site.js) 0 frameworks de cliente 0 CDN en runtime Fuentes y libs auto-hospedadas

HTML — semántica, accesibilidad y SEO

Estructura

— Landmarks: <header> <nav> <main> <footer> en cada página.
— Un solo <h1> por página (auditado en QA).
— lang="es", <address> en datos de contacto.
— Elementos nativos primero: <details> para FAQs, <select>, tel:/mailto:.

Accesibilidad

— Enlace "Saltar al contenido" (sr-only visible al foco).
— aria-current="page" en nav; aria-expanded/controls/label en botones toggles.
— alt descriptivo (decorativas: alt=""); <label> en todo control; title en iframes.
— Contraste AA en texto (tabla de ratios en QA).

SEO por página

— Título {Página} | {Empresa} y descripción única (60–160) interpolada por sitio.
— Canonical absoluto, OG/Twitter cards, og:image por sitio.
— JSON-LD: Organization (MIM) y LocalBusiness por ubicación (13).
— sitemap.xml + robots.txt por dominio; noindex en /marca/ y /terminos/.

CSS — tokens, utilidades y clases de componente

Reglas

— Tokens como variables CSS; --accent y --accent-hot se inyectan inline en <html> por sitio — una sola hoja para los 8 sitios.
— Utility-first (Tailwind) para layout/espaciado; clases de componente solo para recetas repetidas.
— Valores arbitrarios (shadow-[…], tracking-[0.2em]) solo para casos únicos.
— Sin border-radius; sombras solo teñidas de acero; ::selection naranja.

Clases de componente

.container-site
.btn-primary
.btn-secondary
.btn-accent
.btn-outline-light
.btn-outline-dark
.btn-quote
.btn-disabled
.chip(-solid/-accent)
.eyebrow(-dark/-accent)
.card-light/-dark
.hero-badge
.spec-pill
.spec-table
.form-label
.form-input

Texturas y motion

— .blueprint / .blueprint-dark / .hazard (CSS puro, sin imágenes).
— Animaciones CSS: mim-marquee, mim-rise, heroFade/slowZoom (crossfade del héroe), ticker.
— [x-cloak]{display:none} obligatorio junto a x-cloak de Alpine.
— scroll-behavior: smooth + scroll-mt-28 en anchors.

JavaScript — Alpine.js, HTMX y vanilla

Qué usa cada pieza

Elemento	Técnica
Header (menú móvil, ocultar barra, sombra)	Alpine `x-data @scroll.window :class`
Subrayado animado del nav	CSS (`scale-x` + `group-hover`), sin JS
Modal "Aviso importante"	Alpine `$store.aviso` + `x-transition`
Búsqueda + tabs de catálogos	Alpine sobre JSON embebido (filtro cliente)
Lightbox de galerías	Alpine `mimGallery` (site.js)
Revelado al hacer scroll	Directiva `x-reveal` + IntersectionObserver
FAQ	`<details>` nativo, sin JS
Marquesina / crossfade del héroe	CSS puro, sin JS
Formulario de contacto	HTMX `hx-post` (futuro) / fallback mailto (Alpine) con flag `forms.live`

Orden de carga (regla dura)

<script src="htmx.min.js" defer></script>
<script src="/assets/js/site.js" defer></script>
<script src="alpine.min.js" defer></script>

site.js registra stores y directivas en alpine:init — debe cargar ANTES de Alpine o los componentes fallan de forma intermitente.

Contrato HTMX (fase ERP)

<form hx-post="/api/contacto" hx-target="#form-status">
GET  /api/catalogos?categoria=&q=&marca= → parcial HTML
GET  /api/catalogos/{id}/download      → PDF

Mismo origen, sin CORS. El host ASP.NET consulta PostgreSQL con la DLL compartida MimPortal.Entities (ver docs/ARCHITECTURE.md).

Mejora progresiva

Todo el contenido es legible sin JavaScript: catálogo renderizado en servidor, FAQs con <details>, marquesina y crossfade en CSS. Alpine/HTMX solo enriquecen.

Convenciones de código

— Contenido SIEMPRE en src/_data/ (nada de cadenas por sitio hardcodeadas en plantillas).
— Copy de UI en español mexicano; comentarios de código en inglés.
— Archivos en kebab-case; parciales Nunjucks para todo bloque repetido.
— URLs internas siempre por los filtros | url / | href (path prefix).
— Nada de JS inline fuera de atributos Alpine/HTMX.

Antes de hacer merge

npm run build   # 8 sitios en verde
npm run qa      # datos, enlaces, meta, html,
                # a11y, contraste, sitemap, perf

La batería completa debe terminar en verde. Las capturas Playwright viven en qa/shots/ (no versionadas).

Una identidad de acero, un acento por ciudad.