A blueprint wireframe
Steel blue on a technical light ground, condensed headings, square corners and registration-marked frames.
Each column takes two modules, and the gutter between them is the drawing’s own — no rules are added, because the ruling is already there.
Heads seat their baselines on a group rule and the notes on the caption rule below, so both columns read line for line across the gutter.
Three columns take one module apiece and leave the fourth empty — on a drawn grid, an empty bay is a statement, not a gap.
A module runs about twenty-six characters — notes and specifications, not essays. Keep each entry short.
Heads on the group rule, notes on the caption rule — the narrow measure changes nothing about where type sits.
Small, rough — where every drawing starts.
Small, precise — every line means it.
Big, rough — shape first, dimensions later.
Big, precise — the one the shop builds from.
| Role | Value | On the ground | Use |
|---|---|---|---|
| Text | #1d1f20 | 14.8:1 | Body copy and headings |
| Accent | #5980a6 | 3.7:1 | Frames, marks and large text |
| Accent 700 | #416180 | 5.8:1 | Accent-colored body copy |
| Surface | #e9e9ea | 1.1:1 | Quiet fills in the wireframes |
14.8:1
Body text against the technical light ground — the drawing is ink on paper, and the steel stays in the linework.
WCAG contrast of each accent-ramp step against the ground — the dashed line marks the 3:1 interface minimum.
Sample data, in thousands — the steel line is the one accent in the figure; the second series stays ink and dashes.
Every photograph is washed in the steel accent by the duotone wrapper — and an on-page figure is a wireframe object, hairline-framed with its registration marks.
One photograph, edge to edge — the scrim is the ground token rising from the foot, and the frame stays behind: a framed figure sits on the board, a bleed is the board.
The flip class changes the photograph’s side and the copy returns to the text axis — one pattern, both directions.
“Cards and figures stay transparent line drawings; the primary button is the one solid object on the board.”
Each milestone keeps one left edge — type and mark aligned — with the spacing opening gently downward from date to note, and the current step the one solid square.
Copy this folder for your next deck — the tokens and markup patterns carry the look.