# Industrial / blueprint / engineering

Also called: blueprint design, engineering UI, technical drawing style, CAD aesthetic, schematic web  
Era: 1840s blueprints; web usage 2016 onward (hardware startups, robotics, developer tools)  
Page: https://designforai.dev/style/industrial-blueprint-engineering

## Traits

- blueprint blue or graph-paper white with a fine grid and dimension lines
- monospace labels with measurements, part numbers, revision tags, tolerances
- thin 1px linework, crosshairs, corner marks, registration marks
- exploded-view or wireframe illustrations of products
- uppercase small text with wide tracking; titles in a condensed grotesk
- one signal colour (safety orange or warning yellow) for the active element
- motion: lines draw in, values count up, crosshair follows the cursor

Palette: #0b2a4a blueprint blue (or #f7f7f4 paper), #dbe7f3 line on blue, #1c1c1c ink on paper, #ff6a00 safety orange, #ffd400 warning yellow, #8a97a8 muted

Type: JetBrains Mono, IBM Plex Mono or Space Mono for labels (11-13px uppercase 0.08em); Barlow Condensed, Archivo Narrow or Oswald for headings (600 at 40-72px); IBM Plex Sans for body 16px

## Do

- draw the grid with two layered repeating-linear-gradients (8px minor at 5% alpha, 80px major at 12%)
- annotate real elements with dimension lines and labels (SVG lines with end ticks, mono text)
- use corner brackets on cards instead of full borders

## Don't

- do not add shadows, gradients or radius; drawings are flat
- do not use decorative fake data; every number should be real or clearly a placeholder
- do not use more than one signal colour

Known for it: Teenage Engineering, Framework laptop, Rivian (partial), Leica, Field Notes

## CSS seed

```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

Build the site in blueprint engineering style. Background #0b2a4a with a two-level grid: repeating-linear-gradient lines every 8px at rgba(219,231,243,0.06) and every 80px at rgba(219,231,243,0.14), both axes. Text #dbe7f3, muted #8a97a8, one signal colour #ff6a00. Fonts: Barlow Condensed 600 uppercase for headings at 64/40/24px with 0.02em tracking, IBM Plex Sans 400 at 16px for body, JetBrains Mono 12px uppercase 0.08em for labels, part numbers and dimensions. Cards: no fill, corner brackets only (four 16px L-shaped 1px strokes) plus a mono label in the top-left like "FIG. 02 / REV B". Hero image is a wireframe or exploded-view SVG of the product with dimension lines (1px lines, 6px end ticks, mono measurements). Buttons: 1px #dbe7f3 outline, uppercase mono text, hover fills #ff6a00 with #0b2a4a text. Motion: SVG lines draw in via stroke-dashoffset over 900ms; numbers count up over 600ms. No radius, no shadows.