# Industrial / blueprint / ingeniería

También llamado: diseño blueprint, UI de ingeniería, estilo de dibujo técnico, estética CAD, web esquemática  
Época: cianotipos de 1840; uso web de 2016 en adelante (startups de hardware, robótica, herramientas de desarrollo)  
Página: https://designforai.dev/es/style/industrial-blueprint-engineering

## Rasgos

- azul blueprint o blanco de papel milimetrado con una retícula fina y líneas de cota
- etiquetas monospace con medidas, números de pieza, marcas de revisión, tolerancias
- trazos finos de 1px, retículas de puntería, marcas de esquina, marcas de registro
- ilustraciones en vista explosionada o en alambre de los productos
- texto pequeño en mayúsculas con tracking amplio; títulos en una grotesk condensada
- un color de señal (naranja de seguridad o amarillo de advertencia) para el elemento activo
- movimiento: las líneas se dibujan, los valores cuentan hacia arriba, la retícula sigue al cursor

Paleta: #0b2a4a azul blueprint (o #f7f7f4 papel), #dbe7f3 línea sobre azul, #1c1c1c tinta sobre papel, #ff6a00 naranja de seguridad, #ffd400 amarillo de advertencia, #8a97a8 apagado

Tipografía: JetBrains Mono, IBM Plex Mono o Space Mono para etiquetas (11-13px en mayúsculas 0.08em); Barlow Condensed, Archivo Narrow u Oswald para títulos (600 a 40-72px); IBM Plex Sans para el cuerpo a 16px

## Haz

- dibuja la retícula con dos repeating-linear-gradient en capas (menor de 8px al 5% de alfa, mayor de 80px al 12%)
- anota elementos reales con líneas de cota y etiquetas (líneas SVG con marcas en los extremos, texto mono)
- usa corchetes de esquina en las tarjetas en lugar de bordes completos

## Evita

- no añadas sombras, gradientes ni radio; los planos son planos
- no uses datos falsos decorativos; cada número debería ser real o claramente un placeholder
- no uses más de un color de señal

Conocido por: Teenage Engineering, portátil Framework, Rivian (parcial), Leica, Field Notes

## Semilla CSS

```css
:root{--bg:#0b2a4a; --fg:#dbe7f3; --muted:#8a97a8; --accent:#ff6a00; --grid:rgba(219,231,243,0.08); --radius:0; --stroke:1px; --font:'IBM Plex Sans',sans-serif; --font-mono:'JetBrains Mono',monospace}
```

## Prompt

Construye el sitio en estilo de ingeniería blueprint. Fondo #0b2a4a con una retícula de dos niveles: líneas con repeating-linear-gradient cada 8px a rgba(219,231,243,0.06) y cada 80px a rgba(219,231,243,0.14), en ambos ejes. Texto #dbe7f3, apagado #8a97a8, un color de señal #ff6a00. Fuentes: Barlow Condensed 600 en mayúsculas para títulos a 64/40/24px con tracking 0.02em, IBM Plex Sans 400 a 16px para el cuerpo, JetBrains Mono 12px en mayúsculas 0.08em para etiquetas, números de pieza y cotas. Tarjetas: sin relleno, solo corchetes de esquina (cuatro trazos de 1px en forma de L de 16px) más una etiqueta mono arriba a la izquierda tipo "FIG. 02 / REV B". La imagen del hero es un SVG en alambre o en vista explosionada del producto con líneas de cota (líneas de 1px, marcas de 6px en los extremos, medidas en mono). Botones: contorno 1px #dbe7f3, texto mono en mayúsculas, el hover rellena en #ff6a00 con texto #0b2a4a. Movimiento: las líneas SVG se dibujan mediante stroke-dashoffset durante 900ms; los números cuentan hacia arriba durante 600ms. Sin radio, sin sombras.