Tokens, componentes y guías construidas a partir de los materiales reales de Grupo Tornillín Eléctrico: logo oficial, fuente Mont, fotografías de sucursales, personaje Tornillín y look & feel 2026.
Cinco gestos visuales hacen que una pieza se sienta Tornillin incluso si cubrieras el logo. Todos están codificados en el sistema.
El ribbon paralelogramo (.tor-ribbon) rojo o steel-900. Aparece como kicker, sello de campaña o etiqueta de categoría.
.tor-photo-shear recorta la esquina inferior izquierda. Le da movimiento industrial sin caer en plantilla.
Honeycomb sutil (.tor-bg-hex) en hero y cabezas de catálogo. Evoca tornillería y panel eléctrico.
Mont es la única familia. Bold uppercase con letter-spacing 0.06em. Light sólo para bajadas.
El personaje entra inclinado, acompañado de cajas cardboard o la van. Nunca de frente y plano.
Mismo sistema, distintos contextos. Cada pieza prueba que las decisiones tipográficas, cromáticas y de composición sostienen el tono Tornillin.
Hero industrial · 4 servicios · sucursales · testimonio · CTA band · footer steel.
Lienzo 1080×1080 · foto con shear · ribbon TORNILLIN tilted · bullets rojos · mascota con cajas.
Sidebar steel-900 · stats con sparklines · gráfica 12 meses · tabla densa con badges de estado.
Esquina roja sheared · sidebar de filtros · grid 3 cols de tor-card-product · paginación.
Carga tokens.css antes que tornillin.css. Las fotos,
logo, fuentes y personaje viven todos en assets/.
Si vas a crear algo nuevo con este sistema, sigue esta secuencia. La sección completa vive en DESIGN.md → Agent Prompt Guide.
Leer guía completa
tokens.css antes que tornillin.cssassets/logo/ · nunca rediseñarlo.tor-ribbon si es campaña.tor-bg-hex) en hero/cabezas