# Industrial / blueprint / engenharia

Também chamado de: design blueprint, UI de engenharia, estilo de desenho técnico, estética CAD, web esquemática  
Era: blueprints dos anos 1840; uso na web de 2016 em diante (startups de hardware, robótica, ferramentas de desenvolvedor)  
Página: https://designforai.dev/pt/style/industrial-blueprint-engineering

## Traços

- azul blueprint ou branco de papel milimetrado com uma grade fina e linhas de cota
- labels monospace com medidas, números de peça, tags de revisão, tolerâncias
- linhas finas de 1px, miras, marcas de canto, marcas de registro
- ilustrações de produto em vista explodida ou wireframe
- texto pequeno em caixa alta com tracking largo; títulos numa grotesca condensada
- uma cor de sinalização (laranja de segurança ou amarelo de aviso) para o elemento ativo
- movimento: linhas se desenham, valores contam, a mira segue o cursor

Paleta: #0b2a4a azul blueprint (ou #f7f7f4 papel), #dbe7f3 linha sobre azul, #1c1c1c tinta sobre papel, #ff6a00 laranja de segurança, #ffd400 amarelo de aviso, #8a97a8 atenuado

Tipografia: JetBrains Mono, IBM Plex Mono ou Space Mono para labels (11-13px em caixa alta 0.08em); Barlow Condensed, Archivo Narrow ou Oswald para títulos (600 a 40-72px); IBM Plex Sans para o corpo a 16px

## Faça

- desenhe a grade com dois repeating-linear-gradients em camadas (menor de 8px a 5% de alpha, maior de 80px a 12%)
- anote elementos reais com linhas de cota e labels (linhas SVG com tiques nas pontas, texto mono)
- use colchetes de canto nos cards em vez de bordas completas

## Evite

- não adicione sombras, gradientes nem raio; desenhos são chapados
- não use dados falsos decorativos; cada número deve ser real ou claramente um placeholder
- não use mais de uma cor de sinalização

Conhecido por: Teenage Engineering, laptop Framework, Rivian (parcial), Leica, Field Notes

## Semente 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

Construa o site em estilo engenharia blueprint. Fundo #0b2a4a com uma grade de dois níveis: linhas repeating-linear-gradient a cada 8px em rgba(219,231,243,0.06) e a cada 80px em rgba(219,231,243,0.14), nos dois eixos. Texto #dbe7f3, atenuado #8a97a8, uma cor de sinalização #ff6a00. Fontes: Barlow Condensed 600 em caixa alta para títulos a 64/40/24px com tracking 0.02em, IBM Plex Sans 400 a 16px para o corpo, JetBrains Mono 12px em caixa alta 0.08em para labels, números de peça e cotas. Cards: sem preenchimento, só colchetes de canto (quatro traços de 1px em L com 16px) mais um label mono no canto superior esquerdo como "FIG. 02 / REV B". A imagem do hero é um SVG em wireframe ou vista explodida do produto com linhas de cota (linhas de 1px, tiques de 6px nas pontas, medidas em mono). Botões: contorno 1px #dbe7f3, texto mono em caixa alta, o hover preenche com #ff6a00 e texto #0b2a4a. Movimento: as linhas SVG se desenham via stroke-dashoffset ao longo de 900ms; os números contam ao longo de 600ms. Sem raio, sem sombras.