Blueprint / technical drawing

The engineering-plan look: crisp pale linework on cyan blue, with grids, callouts, section marks, and dimension arrows.

white lines on blue paperarchitect plan lookIKEA instruction booklet drawingdiagram with measurement arrowscyan grid schematicdrawing with all the sizes written on itlabelled cutaway drawinginstruction manual exploded diagramblue print drawing

See it

Live demo coming soon

What it is

The blueprint look turns an object into precise white or pale linework on a cyan-blue ground, surrounded by dimensions, leaders, section marks, and small technical notes. Real blueprints came from the cyanotype process introduced by John Herschel in 1842, which reproduced drawings as light lines on a blue field.

Reach for it when structure, construction, or engineered precision is the story: product launches, architecture, instruction screens, diagrams, and behind-the-scenes features. Choose an orthographic view, decide whether the views sit in first-angle or third-angle projection and stay consistent, set a clear line-weight hierarchy, and let only a few callouts explain the important parts.

Gotcha: a blue background and random grid do not make a technical drawing. Dimension lines need consistent arrows and offsets, labels need to point to real features, and hidden lines should differ from visible outlines. Dense tiny annotations become texture at phone size, so simplify by breakpoint.

Ask AI for it

Render this as a clean blueprint technical drawing. Use an SVG orthographic view on a deep cyan background, 2px white outer contours, 1px internal lines, dashed hidden edges, and dimension lines with arrowhead marker-end definitions. Add a restrained grid with CSS repeating-linear-gradient(), set vector-effect: non-scaling-stroke on the drawing paths, and label only real parts with aligned leader lines. Keep all notes legible at the final size.

You might have meant

grid overlay layout guideslogo construction gridcalloutvector vs rasterlow poly

Go deeper