<helmet>
</helmet>
Design systems

# Industry

A blueprint wireframe

Steel blue on a technical light ground, condensed headings, square corners and registration-marked frames.

Your name·July 2026

## Contents

01

## Principles

01 · Principles

## Working rules

- Everything on the board is a wireframe object — square, hairline-framed, marked.
- Condensed headings label the drawing; Barlow carries the notes.
- Steel blue is the one color, and the primary action is the one solid object.

01 · Principles

## Two columns

### Two bays of the board

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.

### Seated, not floated

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.

01 · Principles

## Three columns

### One module each

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 note’s measure

A module runs about twenty-six characters — notes and specifications, not essays. Keep each entry short.

### Still seated

Heads on the group rule, notes on the caption rule — the narrow measure changes nothing about where type sits.

01 · Principles

## Quadrants

### Napkin sketch

Small, rough — where every drawing starts.

### Schematic

Small, precise — every line means it.

### Mock-up

Big, rough — shape first, dimensions later.

### Production drawing

Big, precise — the one the shop builds from.

← roughermore precise →
02

## The ramps

02 · The ramps

## Color roles

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

02 · The ramps

14.8:1

Body text against the technical light ground — the drawing is ink on paper, and the steel stays in the linework.

02 · The ramps

## Contrast by ramp step

WCAG contrast of each accent-ramp step against the ground — the dashed line marks the 3:1 interface minimum.

02 · The ramps

## Weekly sessions

Desktop
Mobile

Sample data, in thousands — the steel line is the one accent in the figure; the second series stays ink and dashes.

03

## Imagery

03 · Imagery

## The duotone treatment

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.

03 · Imagery

## Full bleed

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.

03 · Imagery

## Half bleed

- The photograph bleeds to three edges and holds half the stage
- The copy keeps the content rhythm — same gridlines as every slide
- Marks still hang left of the text, whatever sits behind them

03 · Imagery

## Mirrored

The flip class changes the photograph’s side and the copy returns to the text axis — one pattern, both directions.

03 · Imagery

> “Cards and figures stay transparent line drawings; the primary button is the one solid object on the board.”

— the Industry readme
04

## Roadmap

04 · Roadmap

## The year, by milestone

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.

Design systems

## Thank you

Copy this folder for your next deck — the tokens and markup patterns carry the look.

you@example.com