Illustration · 1840s–present
Blueprint
Technical drawings on Prussian blue: precise white lines, grid guides, dimension annotations, and the clinical authority of architectural plans.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(24% 0.1 252) - --fg
oklch(94% 0.04 218) - --muted
oklch(72% 0.06 222) - --surface
oklch(28% 0.1 250) - --surface-2
oklch(33% 0.09 248) - --border
oklch(46% 0.1 248) - --accent
oklch(92% 0.05 210) - --accent-fg
oklch(22% 0.09 252) - --focus
oklch(92% 0.05 210)
| Token | Value |
|---|---|
| --font-body | 'Share Tech Mono', 'Courier New', ui-monospace, monospace |
| --font-display | 'Share Tech Mono', 'Courier New', monospace |
| --font-mono | 'Share Tech Mono', 'Courier New', monospace |
| --radius | 0px |
| --radius-sm | 0px |
| --shadow | 0 0 0 1px oklch(46% 0.1 248) |
| --shadow-lg | 0 12px 40px oklch(10% 0.06 252 / 0.7) |
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
:root {
--bg: oklch(24% 0.1 252);
--fg: oklch(94% 0.04 218);
--muted: oklch(72% 0.06 222);
--surface: oklch(28% 0.1 250);
--surface-2: oklch(33% 0.09 248);
--border: oklch(46% 0.1 248);
--accent: oklch(92% 0.05 210);
--accent-fg: oklch(22% 0.09 252);
--focus: oklch(92% 0.05 210);
--font-body: 'Share Tech Mono', 'Courier New', ui-monospace, monospace;
--font-display: 'Share Tech Mono', 'Courier New', monospace;
--font-mono: 'Share Tech Mono', 'Courier New', monospace;
--radius: 0px;
--radius-sm: 0px;
--shadow: 0 0 0 1px oklch(46% 0.1 248);
--shadow-lg: 0 12px 40px oklch(10% 0.06 252 / 0.7);
}Where it came from
Origin: Cyanotype process for architectural and technical drawing reproduction
The cyanotype process, invented by John Herschel in 1842, became the standard for reproducing architectural and engineering drawings. A drawing made on translucent paper was contact-printed onto light-sensitive paper, producing white lines on bright Prussian blue. CAD software replaced the process, but the visual vocabulary — blue field, white lines, annotations, grid — became a cultural shorthand for precision, expertise, and technical planning.
How to spot it
- Prussian blue field with white or light-blue lines
- Fine grid overlay at regular intervals
- Monospace or technical sans-serif annotation typography
- Geometric precision — no organic curves or soft edges
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Communicates technical precision and expertise | Narrow thematic fit — wrong outside technical or architectural contexts |
| Achievable entirely with CSS gradients — no image assets needed | Dark blue background can reduce legibility for dense text |
| Distinctive blue palette stands out from the default web | White-on-blue requires careful contrast management |
In the wild
- Architecture firm and engineering studio websites
- Product documentation and specification pages
- Technical illustration for hardware and manufacturing
Use it when
The product is technical, precise, and the audience responds to signals of engineering rigour.