Grupo IIHEMSA
Resumen ejecutivo Propuesta Research TESEY GTM TESEY GTM KUTRA GTM ARKEO Design system
TESEY
Design System · Grupo IIHEMSA

Precisión industrial, comunicada con la misma exactitud que se fabrica.

Sistema visual construido a partir del logo de TESEY (grupoiihemsa.com.mx/tesey-maquila-industrial) y su industria: maquila industrial, corte láser, soldadura y estructuras metálicas. Base para cotizaciones, catálogos, propuestas y materiales de venta.

Principios de marca
Precisión
Cada dato, tolerancia y especificación se muestra exacta — nunca aproximada sin decirlo.
Confianza
Tono técnico y directo, sin adornos. Se gana credibilidad con evidencia, no con promesas.
Eficiencia
Diseño funcional: cada elemento comunica capacidad, no decoración.
Compromiso
Cumplimiento de tiempos y especificación como parte de la identidad, no solo del servicio.
Color — extraído del logo + paleta industrial
#FD5401 · Naranja TESEY (del logo)
#D64500 · Hover / activo
#FCE4D6 · Naranja tint
#17171A · Grafito
#3A3A3E · Acero
#8A8781 · Aluminio
#C9C5BC · Aluminio claro
#F4F1EC · Canvas
#FFFFFF · Card
#1E7A46 · Éxito / QA ok
#B23A1E · Alerta

Regla 70-20-10: 70% grafito y acero (estructura: headers, footers, specs técnicas), 20% canvas cálido y cards blancas (contenido), 10% naranja TESEY reservado para CTAs, acentos y datos clave — nunca como color de fondo extenso ni como texto de cuerpo sobre blanco (falla contraste AA).

Tipografía
Display / Headings — Archivo 700–800
MAQUILA INDUSTRIAL
Body / UI — Inter 400–500
Integramos tecnología avanzada en corte láser y procesos de soldadura MIG, TIG, electrodo y láser para ofrecer soluciones eficientes, resistentes y adaptadas a cada cliente.
Técnico / Specs — JetBrains Mono 400–500
Espesor: 1.5–12mm · Tolerancia: ±0.2mm · Lead time: 48h
Componentes
Botones
Badges / estado
EN PRODUCCIÓN ENTREGADO EN COTIZACIÓN RETRASO
Card de servicio
Corte láser
Precisión de hasta ±0.2mm en lámina de acero, aluminio e inoxidable.
Card oscura — dato técnico
±0.2mm
Tolerancia de corte
Encabezado de sección (patrón repetido en el sitio)
SERVICIOS
Espaciado, radios y sombras
Escala 4px
4 · 8 · 12 · 16 · 24 · 32
Radios
sm 4 · md 6 (botones) · lg 10 (cards) · xl 16 · full (badges)
Sombras
xs · md · lg — tinte grafito, no negro puro
Estados de interacción
Hover
Naranja se oscurece a #D64500. Cards ganan borde naranja y elevan sombra.
Activo / presionado
scale(0.97) — empuje físico, sin flash de color.
Foco
Outline naranja 2px, offset 3px — accesible en teclado.
Deshabilitado
Aluminio claro + texto aluminio, cursor not-allowed.
Más componentes
Input
Foco: borde #FD5401 + sombra tint naranja suave.
Switch
Notificar por WhatsApp
Notificar por correo
Tabs
Cotización
Producción
Entrega
StatCard
48h
Tiempo de cotización
↓ 3 días vs. el mes pasado
JA
Avatar
Jules Avila
Tags de proceso
Corte láser Soldadura MIG Pintura electrostática
Fondos y textura
TRAMA DIAGONAL · secciones oscuras
CANVAS CÁLIDO · sin blanco puro
SPLIT GRAFITO / CANVAS · para secciones alternadas

Fotografía industrial (piezas reales, planta, proceso) siempre a color, nunca ilustración ni stock genérico. La trama diagonal sutil (naranja al 6% de opacidad) es el único patrón decorativo — reservado a fondos oscuros, nunca sobre canvas claro ni detrás de texto de cuerpo.

Movimiento
Funcional, no decorativo: entradas con fade-up 250ms ease-out, sin bounce ni efectos llamativos — coherente con un producto técnico. Botones responden con scale(0.97) 100ms al presionar. Barras de progreso (producción, cotización) se llenan linealmente, sin easing elástico — comunican avance real, no ánimo.
Iconografía

El sitio actual no define un sistema de iconos propio. Recomendación: línea delgada 1.5–1.8px, currentColor, sin relleno — set sugerido Lucide por su grid consistente y trazo técnico, coherente con la precisión de marca. Nada de emoji: la energía viene del naranja y la tipografía, no de símbolos decorativos.

Voz y contenido
Tono
Técnico, directo, en tercera persona plural ("integramos", "trabajamos"). Sin exclamaciones ni hype — la autoridad viene de la especificación, no del adjetivo.
Mayúsculas
Reservadas a nombres de sección (SERVICIOS, PRODUCTOS) y badges de estado — nunca en párrafos de cuerpo.
Frase modelo
"Precisión y cumplimiento en cada especificación."
Notas y fuente

Extraído de grupoiihemsa.com.mx/tesey-maquila-industrial: logo oficial (naranja #FD5401), servicios (corte láser, limpieza láser, doblado y rolado, pintura electrostática, fabricación de piezas), productos (pérgolas, plataformas, estructuras industriales, celosías, escaleras, barandales) y valores de marca (calidad, precisión, eficiencia, compromiso).

Tipografía sustituida por la más cercana en Google Fonts (Archivo, Inter, JetBrains Mono) — el sitio actual usa la tipografía por defecto del builder (Hostinger), sin especificación propia. Si existen fuentes de marca definidas, compártelas para ajustar.