Blueprint.

Every slide is a numbered drawing plate: dimension lines scale out, callouts draw their leaders, the content wipes in from one side.

Look

As designed

Use Blueprint in the Studio Open full screen

How it moves

A drafting-office sheet on deep blue. An 8px and 40px grid, a hairline drawing frame, a plate index down the left, a real bordered title block bottom-right and monospace type throughout. Each plate draws itself in: dimension lines grow from their centres, numbered callouts sprout elbowed leader lines. Use it for technical, engineering or methodical stories that want to feel precisely specified.

This is the specification the Studio sends to the model, written for Blueprint's own look. Change the look in the Studio and every value follows.

Palette

Background#0c1a2b
Text#d7e9ff
Muted#6f8bab
Accent#ffc14d
Surfacergba(215,233,255,.05)
Hairlinergba(215,233,255,.22)

Type: JetBrains Mono. Corners: 2px.

Layout

- The page is a drafting sheet on #0c1a2b. The ground is one fixed layer of stacked gradients: a soft lamp (radial-gradient 115% x 80% at 50% 38%, #d7e9ff at 4%, fading to transparent at 72%), a 40px major grid (#d7e9ff at 11%, 1px lines both directions) and an 8px minor grid (#d7e9ff at 5%). Everything is set in one face, JetBrains Mono (monospace by design; the original uses JetBrains Mono), at small tracked sizes; radius is 2px everywhere (nothing is rounded).

- Drawing frame: a 1px rgba(215,233,255,.22) rectangle inset 2.5vw from the viewport, with a short centring tick (.8vw) on the top edge and the left edge at their midpoints.

- Plate index down the left edge, vertically centred: left 4.4vw, width 9.8vw. A head label "Index" (tiny caps, tracked .2em, #6f8bab) over a 1px rgba(215,233,255,.22) rule, then one button row per slide: a two-digit tabular number and the slide title in caps, #6f8bab. Visited rows lift to a mix of 62% #d7e9ff; hover #d7e9ff; the active row is #d7e9ff with a 1px #ffc14d border and an #ffc14d number.

- Title block bottom-right, flush to the frame: a real bordered table, width clamp(16rem, 31vw, 28rem), three columns 1.6fr 1fr 1fr, cells separated by 1px rgba(215,233,255,.22) gaps, each cell #0c1a2b with a tiny caps label above a value. Cells: Project (deck name), Plate ("A-03" in #ffc14d, live), Scale (1:1), Rev (B), Date (2026-09), Sheet ("03 of 07", live). The micro size everywhere is clamp(.6rem, .68vw, .8rem) caps; raise it on small screens so no label goes under 13px.

- Content block ("plate"): an absolutely placed rectangle at left 19vw, right 17vw, top 16.5vh, bottom 22vh, marked only by eight corner ticks (clamp(14px, 1.35vw, 26px), 1px, 40% #d7e9ff) drawn with background gradients, no border or fill. Inside, a sheet with padding clamp(1rem, 1.9vw, 2.2rem), content vertically centred. Each plate has a kicker (caps, .24em, #ffc14d: Cover, Decisions, Measured, Method...), h1 clamp(1.9rem, 4.2vw, 4.4rem) / 700 / -0.045em (cover) or h2 clamp(1.25rem, 2.2vw, 2.6rem) / 600 / -0.035em, a muted lede, the objects, and a closing "note" line (caps, #6f8bab, 1px top rule).

- Dimension lines: a horizontal one at top 10.5vh spanning frame to frame (label like "1280" centred on a #0c1a2b gap) and a vertical one at left 16.6vw spanning frame to frame (label like "Section B", vertical text), each 1px rgba(215,233,255,.22) with small 45 degree arrowhead ticks at both ends.

- Callouts: 2 or 3 numbered notes per plate hang to the right of the content block (left: block edge + 2.2vw, at a per-callout --y percentage of the block height). Each is a 1.75rem circle with a 1px #ffc14d border and an #ffc14d numeral, a caps label beneath in #6f8bab, and a two-segment elbowed leader drawn back toward the content: a short horizontal shoulder (1.5vw) then a lead of 5.5-8vw rotated by a small per-callout angle (-13deg to +13deg).

- Objects are re-styled as drawing-office parts: cards, compare panels and carousels have radius 2px; bars are hollow 1px-outlined tracks with square fills; stats have 1px top rules and caps labels; journey markers are hollow #ffc14d rings; the "after" compare column outlines in #ffc14d; check bullets are circles. Closing slide "Programme": a check list where the last item is held (done) and the others are hollow, with a note like "Three to draw, one to hold". No special takeover.

Motion

- Plates change by clip-path wipe. Each slide sets --d (signed distance from active). The plate is clipped inset(0 R 0 L) where R = 100% x clamp(--d, 0, 1) and L = 100% x clamp(-d, 0, 1): a plate to the right is fully clipped from its right side, one to the left from its left, the active one is open. Transition clip-path .6s cubic-bezier(.22,1,.36,1), active delayed .08s, so the outgoing plate erases toward one side while the new one draws in from the other. Slides are visibility:hidden except the active (visibility delayed .66s on exit).

- Dimension lines scale out from their centre: each <i> goes scale(0) to 1 (scaleX on the horizontal, scaleY on the vertical) over .5s on the same curve after .12s; the label fades in at .38s; arrowheads at .42s.

- Callout choreography, staggered by index i: shoulder line scaleX 0 to 1 at .46s + i x .12s (origin at the circle), the numbered circle pops (opacity 0 to 1, scale .55 to 1, .42s) at .52s + i x .12s, the lead line grows at .56s + i x .12s, the label fades in at .62s + i x .12s.

- Set body data-reveal-delay="700" data-animate-delay="700". Under 900px the frame narrows to 3vw, the content block widens to left/right 6vw and top 24vh / bottom 20vh, the plate index becomes a wrapped row of titles under the top frame edge, callouts are hidden and the title block collapses to Project, Plate and Sheet.

Navigation. arrows / Space / PageUp / PageDown / Home / End / 1-9; wheel and trackpad move one slide per gesture; every row in the plate index is a button and jumps.