Blueprint Grid
also known asgraph paper background · drafting grid · engineering grid
A page-wide background grid of faint horizontal and vertical lines, evoking architectural drafting paper.
A blueprint grid renders a subtle grid pattern across the entire page background — usually 32px or 64px squares, drawn with a single hairline color at low opacity. The aesthetic borrows from architectural and engineering drafting paper, suggesting precision, structure, and 'in-progress' craft.
In 2023–2025 it became a signature look for AI tools, dev platforms, and design tooling — the grid signals 'this is a workshop, not a finished product'. It pairs naturally with monospace typography and hairline UI elements.
- Developer tools, AI products, design platforms
- Marketing pages that want to signal craftsmanship
- Hero sections needing texture without color
- Consumer apps where the grid would feel cold
- Content-heavy pages — the grid competes with text
- +Keep grid line opacity below 8% on light, 12% on dark
- +Use 32px or 64px squares — anything smaller looks like noise
- +Apply a radial mask so the grid fades at the edges
- −Don't use a hard-edged grid behind body text
- −Don't combine with another background pattern
- −Don't animate the grid — it's a static texture
Textbook examples in the directory
Developer infrastructure made invisible. Geist with -2.4px tracking, shadow-as-border philosophy, multi-layer shadow stacks, ligatures everywhere.
Dark-mode-native canvas where content emerges like starlight. Geometric variable sans, the signature 510 weight, semi-transparent white borders, and a single indigo-violet accent.
Dark-mode-native developer platform. Emerald (#3ecf8e) as identity marker, 1.00 line-height hero, depth from layered borders not shadows, mono uppercase labels.
People also ask
How do I make a blueprint grid in CSS?
Use two linear-gradient backgrounds — one horizontal, one vertical — at the same line color and 32px spacing, then layer a radial-gradient mask to fade the edges.