← all 100 themes
Theme 014 · Typography & graphic systems

Blueprint Drawing

The product is drafted like a machine part on a teal blueprint sheet: exploded views, dimension arrows, numbered callout balloons and a title block on every frame. Pulse "measures" each metric against its tolerance band; the one that falls outside turns coral and gets a revision cloud before a human signs the change.

readability ●●○trust ●●●effort med
1GROWTHUNREAD2REVENUEUNREAD3FUNNELUNREAD4RETENTIONUNREAD5CHECKOUTUNREAD× 38DWG 01 · THE MORNING STACKSCALE 1:38DRAWN38 DASHBOARDSINSPECTED3 / 38FOUNDFRIDAY
How many dashboards did you check today?
1 · HOOK0:00–0:08

The stack explodes upward along the vertical axis, one sheet per beat. Leader lines draw out to the balloons, each "UNREAD" types on an off-beat, and the "× 38" dimension snaps open from its centre on beat 1 of bar 4.

420R 105ASIGNAL DOTDWG 02 · PART AP-01REV AAcme PulsePARTACME PULSEFUNCTIONWATCHESMETRICS14
2 · REVEAL0:08 (drop)

Construction lines draw first (dashoffset, 500 ms), then the mark fills in on the drop. The width dimension snaps out from the centre, balloon A points at the signal dot, and "Acme Pulse" writes on in serif on the next downbeat.

DETAIL A · CHECKOUT CONVERSION● 09:44 LIVEOut of tolerance.UPPER TOLLOWER TOL09:42 · DEPLOY #2231−18%ANOTE A — CHECKOUT CONVERSION BELOW LOWER TOL.SINCE 09:42 · AFTER DEPLOY #2231 · 13 OTHERS IN TOL.P95 212 MS · ERROR RATE 0.4 % · 2,418 EVENTS/SECCHECKED BYPULSEAPPROVED BYYOUROLL BACKRESOLVED IN 6 MIN · REV B
3 · PROOF MOMENT0:12–0:32

The measured line draws left → right inside the tolerance band, then dives past LOWER TOL in coral. The −18% dimension arrow grows from the nominal line on a downbeat, the revision cloud scallops around the drop, and the "ROLL BACK" cell in the title block fills coral when the human approves.

DWG 04 · RELEASEAPPROVEDEvery metric.Every minute.24 H · 7 D · 14 METRICSPRODUCTACME PULSEBYACMESTART FREEYOU SHIP · PULSE WATCHES · CAUGHT BEFORE CUSTOMERS NOTICED
4 · CTA0:36–0:45

The tagline letters draw on as outlines, then fill, one line per bar. The dimension under it snaps open, the title block assembles cell by cell from the left, and "START FREE" floods coral on the final hit.

COMPONENT KIT

MOTION · MUSIC

WHY / RISK · ADAPT IT

Blueprints say "engineered, measured, reviewed" without a word, and a tolerance band is a perfect picture of normal vs. anomaly. The title block gives the human decision a formal home. Risk: hairlines shimmer after video compression, so keep strokes at 2 px or more and limit notes per sheet.

Adapt to your product: draw your UI panels or architecture as exploded plates and your key metric as a measured line with its normal range; put the approval step in the title block.

References: Codrops — SVG stroke drawing technique