Hardware and gadgets
If you make a physical thing, draw it. Showing how it's put together sells it better than any photo filter ever could.
Remember those big blue drawings engineers used to unroll across a table? This style turns your website into one. White lines, neat little notes, and everything measured. It makes whatever you're building look like someone really thought it through.
Before computers, every building, bridge and engine started out as a drawing. People drew them in white on deep blue paper, measured every edge, and wrote notes right on the sheet so the builder knew exactly what to do.
This style borrows all of that for your website. You get a frame around the page, a quiet grid behind it, one clean drawing of what you make, and small notes pointing at the parts that matter.
It's calm. It's careful. And people trust it before they've read a word.
| When | What happened |
|---|---|
| 1842 | The blue printing process is invented. Blue paper, white lines. |
| 1940s | Blue lines on white paper start taking over. Cheaper, same idea. |
| 1980s | Computers start doing the drawing. The blue look sticks around anyway. |
| Now | Your homepage. |
Blueprint works best when you've got something real to draw. A product, a machine, a building, a system. Here's where it really shines.
If you make a physical thing, draw it. Showing how it's put together sells it better than any photo filter ever could.
APIs, servers, the plumbing nobody sees. This style makes all of it look solid and carefully made.
Architects and product designers already speak this language. Clients get it right away.
Every section becomes its own numbered sheet, so long pages stay easy to follow.
Numbers feel more believable when they look measured, not just thrown on a screen.
A blue grid on its own isn't a blueprint. It's just a blue grid.
These are the bits that make it feel real. Every line has a job, and it does that same job everywhere on the page. That's what makes it read as built instead of decorated.
| No. | Piece | What it does | Looks like |
|---|---|---|---|
| 01 | The frameWraps the whole page, like the border on a real drawing. | Wraps the whole page, like the border on a real drawing. | |
| 02 | The gridSits quietly in the back so everything lines up. | Sits quietly in the back so everything lines up. | |
| 03 | The main drawingOne honest picture of your product, drawn in lines. | One honest picture of your product, drawn in lines. | |
| 04 | Measuring linesShow sizes and numbers the way an engineer would. | Show sizes and numbers the way an engineer would. | |
| 05 | Little notesPoint at the parts that matter and say why. | Point at the parts that matter and say why. | |
| 06 | The info boxTakes the place of your footer with a tidy block of details. | Takes the place of your footer with a tidy block of details. | |
| 07 | Dashed linesMean something's coming soon or switched off. | Mean something's coming soon or switched off. | |
| 08 | Red marksSaved for mistakes, changes and your one main button. Use them sparingly. | Saved for mistakes, changes and your one main button. Use them sparingly. |
Grab the skill, tell Claude what you're making, and get a page that looks like it came straight off a drafting table.