Design for AI

Industrial / blueprint / engineering: UI design prompt

Palette, type rules and a pasteable prompt for industrial / blueprint / engineering. Also called blueprint design, engineering UI, technical drawing style, CAD aesthetic, schematic web. 1840s blueprints; web usage 2016 onward (hardware startups, robotics, developer tools).

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
: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.
For design.md, .cursorrules or AGENTS.md
## Design direction
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.

## Tokens
: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 }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.