Skip to content
SloplessTry the picker

Base style · 1900s-1930s · balanced

Blueprint

A cyanotype drafting sheet as a website: white line work on blueprint blue over a fine and major grid, orthographic drawings with dimension lines and callouts, ruled title blocks, condensed caps and mono notes.

Use this styleDesigns in this style
Moods
technical, serious, cool, retro
Suits
devtools, architecture, science, saas, ai, real-estate
Type
IBM Plex Sans Condensed + IBM Plex Sans

Principles

  • Draw every page on blueprint blue over a fine and major grid; line work is white or pale cyan, never filled shapes
  • Show the product as orthographic drawings with dimension lines, arrows and numbered callout bubbles, not photographs
  • Close every sheet with a title block: ruled cells of project, sheet, scale, revision and date in mono
  • Set headings in condensed capitals and every annotation, label and figure in a monospace face
  • Divide the page with thin 1 px rules and ruled cells only: no rounded corners, no shadows, no gradients
  • Name sections like drawings (SECTION A–A, DETAIL 3, ELEVATION, GENERAL NOTES) and number everything

Hard rules

  • No rounded corners anywhere (radius 0), no drop shadows, no glows, no gradients, no blur, no glass.
  • No photographs as decoration and no filled illustrations: images are line drawings, plans, maps or screenshots set inside a ruled frame.
  • No isometric or 3/4 perspective views: drawings are orthographic (straight-on front, side, plan, section).
  • No floating cards with gaps between them; cells share rules inside one frame.
  • No proportional body-face labels or numbers: if it is an annotation, a key or a figure, it is mono.
  • No lowercase or light-weight headlines, and no script, serif or rounded faces.

Full page preview with sample copy, rendered from the same tokens and layout the agent receives.

For coding agents

Rules and live patterns

Every pattern Blueprint owns, drawn by the same renderer as the picker with the style's default tokens and sample copy. Each has an anchor (#<pattern id>). A design's own DESIGN.md and tokens.json stay the source of truth; this page shows what the patterns look like.

Reference render of the default designllms.txt

Do

  • Paint the page `bg` (blueprint blue in the base) and draw the blueprint grid on it: a 1 px fine line every 24 px in the `text` colour at about 9 % and a major line every 120 px at about 22 %. Sections without a fill of their own show the grid; panels on `surface` cover it.
  • Draw all structure as thin line work in the `border` colour: 1 px frames, 1 px rules between rows and shared 1 px rules between cells. Cells in a set share their rules (no gaps between them), exactly like the cells of a title block.
  • Show the product as orthographic technical drawings: front, side and section views in 2 px outlines with 1 px dimension lines, arrowheads, centre lines (long-short dash), hidden lines (short dash) and numbered callout bubbles in the accent. Number every callout and repeat the numbers in the copy next to it.
  • Put a title block on every big sheet (hero, footer, approval CTA): ruled cells with a muted mono key over a mono value, e.g. PROJECT, SHEET 02/06, SCALE 1:4, REV C, DRAWN, DATE.
  • Set headings in the condensed sans in capitals (weight 600, tight tracking, tight leading); hero headlines at step 7–8, section titles at step 4–6. Set every annotation, label, number, key, date, price tag and caption in the mono face, uppercase for labels.
  • Name sections the way a drawing set does: `SECTION A–A`, `DETAIL 3`, `ELEVATION`, `PLAN VIEW`, `GENERAL NOTES`, `PARTS LIST`, `REVISIONS`; number items `01`, `02`, … and sheets `02/06`.
  • Write figures as dimensions: a value with a rule on each side of its label (`|←— 1 320 MM —→|`), sizes with units and tolerances where they are true (`± 0.05`).
  • Use the accent for the primary button fill, callout bubbles, item numbers and the current nav item; links are `link` (pale cyan); everything else is `text` / `textMuted` on blue.
  • Keep motion to line work: drawings may stroke in once (`stroke-dashoffset`, 600 ms), hover underlines draw left to right; nothing moves under `prefers-reduced-motion`.
  • At 375 px keep the grid texture and ruled cells: title blocks drop to two columns, dimension lines stay on one row, drawings stay full width above their text.

Don't

  • No rounded corners anywhere (radius 0), no drop shadows, no glows, no gradients, no blur, no glass.
  • No photographs as decoration and no filled illustrations: images are line drawings, plans, maps or screenshots set inside a ruled frame.
  • No isometric or 3/4 perspective views: drawings are orthographic (straight-on front, side, plan, section).
  • No floating cards with gaps between them; cells share rules inside one frame.
  • No proportional body-face labels or numbers: if it is an annotation, a key or a figure, it is mono.
  • No lowercase or light-weight headlines, and no script, serif or rounded faces.
  • No more than one accent on screen (the redline variant's red is that accent; white stays the line colour).
  • No centred hero with three cards below it: heroes are a drawing sheet, a callout drawing or a title-block split.

Heroes (4)

Drawing sheet

hero.blueprint-drawing-sheet · hero

Desktop, 1440 px
Phone, 390 px
Rule
One ruled drawing sheet: a header strip (sheet number left, meta right); condensed-caps headline, lead and buttons on 1–5; a 4:3 orthographic drawing with dimension lines on 6–12; a four-cell title block bottom right, general notes beside it.
Slots
eyebrow, meta, headline, subhead, cta, cta2, heroImage, caption, features[3..3], stats[4..4]
Grid
message 1-5 · drawing 6-12 · notes 1-5 · titleBlock 6-12
Notes
The strip reads like a sheet header ("SHEET 02/06 — GENERAL ARRANGEMENT" left, "SCALE 1:4 · REV C" right). The drawing shows front and side views with dimension lines and three numbered callout bubbles; the notes list matches them.

The whole hero is one drawing sheet in a 1 px frame. Header strip (rule under it, padded 2 × 4 units): the sheet number in mono accent on the left (`SHEET 02/06 — GENERAL ARRANGEMENT`), muted `SCALE 1:4 · REV C` right (hidden at phone width). Inside, padded 5 × 4: on 1–5 the headline at step 7 in condensed caps (600, max 14 ch), the lead in `textMuted` (max 44 ch) and a primary button with an arrow plus a ghost button; on 6–12 a 4:3 orthographic drawing (front and side views, dimension lines, three callout bubbles) with a dimension line under it naming the overall size. Second row, bottom-aligned: on 1–5 the general notes, three rows split by rules (mono callout number in the accent, bold title, muted line); on 6–12 a four-cell title block on `surface` (muted mono key over a bold mono value). At 375 px everything stacks: headline, drawing and the title block in two columns; the general notes hide.

Open alone, full size (desktop, tablet, phone; layout tree included)

Section callouts

hero.blueprint-section-callouts · hero

Desktop, 1440 px
Phone, 390 px
Rule
A giant condensed-caps headline on 1–9 with the lead and buttons on 10–12, then a full-width 21:9 technical drawing framed by a ruled border, a full-width dimension line under it and a four-column numbered callout key.
Slots
eyebrow, headline, subhead, cta, cta2, heroImage, caption, features[4..4]
Grid
headline 1-9 · lead 10-12 · drawing 1-12 · key 1-12
Notes
The drawing is a wide elevation of the product; the callout key numbers (01–04) are the numbers in the bubbles on the drawing. The dimension line names the overall size ("1 320 mm OVERALL").

On one bottom-aligned row: the mono annotation and the headline at step 8 in condensed caps (max 18 ch) on 1–9, the muted lead and the buttons on 10–12. Below, a full-width 21:9 drawing in a 1 px frame (a wide elevation with numbered callouts), a full-width dimension line under it, then a four-column key: each column opens with its mono number in the accent followed by a rule to the column edge, then the part name in caps at step 1 and a muted line. Two columns at phone width.

Open alone, full size (desktop, tablet, phone; layout tree included)

Title block split

hero.blueprint-title-block-split · hero

Desktop, 1440 px
Phone, 390 px
Rule
Message on 1–7 (annotation, condensed-caps headline, lead, buttons, a dimension line); on 8–12 a tall title block of stacked ruled cells: the project name, a 1:1 detail drawing, then four key/value rows.
Slots
eyebrow, headline, subhead, cta, cta2, caption, siteName, index, heroImage, facts[4..4]
Grid
message 1-7 · titleBlock 8-12
Notes
The title block reads like the corner of a real drawing: PROJECT, DETAIL view, then DRAWN / CHECKED / SCALE / DATE style rows; keep every cell ruled, no gaps between them.

Two columns of the same height. On 1–7: the annotation, the headline at step 7 in condensed caps (max 15 ch), the lead (max 46 ch) and the buttons, with a dimension line pinned to the bottom. On 8–12 a tall title block on `surface` in a 1 px frame: a top cell with the wordmark and the mono sheet number, a cell holding a 1:1 detail drawing, then four key/value rows split by rules (muted mono key left, bold mono value right).

Open alone, full size (desktop, tablet, phone; layout tree included)

Elevation stack

hero.blueprint-elevation-stack · hero

Desktop, 1440 px
Phone, 390 px
Rule
A tall 3:4 elevation drawing in a ruled frame on 1–5; on 6–12 the annotation, a condensed-caps headline, the lead, buttons and a ruled specification table of four key/value rows with a three-cell title block under it.
Slots
eyebrow, headline, subhead, cta, cta2, heroImage, caption, facts[4..4], stats[3..3]
Grid
drawing 1-5 · message 6-12
Notes
The elevation is the product standing upright with height and width dimensions; the caption under it is the view name ("ELEVATION A — SCALE 1:10").

A tall 3:4 elevation drawing in a 1 px frame on 1–5 with the view name under it in muted mono capitals (`ELEVATION A — SCALE 1:10`). On 6–12, vertically centred: the annotation, the headline at step 7 in condensed caps (max 16 ch), the lead (max 50 ch), the buttons, a four-row spec table (muted mono key on 4 of 12 columns, mono value on the rest, rules between rows) and a three-cell title block on `surface`.

Open alone, full size (desktop, tablet, phone; layout tree included)

Navigation (2)

Content blocks (13)

Detail callouts

features.blueprint-detail-callouts · features

Desktop, 1440 px
Phone, 390 px
Rule
Section head row, then a ruled sheet of six detail cells (3 × 2) sharing 1 px rules: each cell has a mono DETAIL number strip, a 16:9 technical drawing, a condensed-caps title and a muted line.
Slots
label, title, subhead, features[6..6]
Notes
Number the cells "DETAIL 01" … "DETAIL 06", each drawing a different part view. Keep exactly six so no cell is empty.

A heading row: the mono annotation (`DETAILS 01–06`) and the title in condensed caps at step 5 on 1–7, the muted lead on 8–12, bottom-aligned. Then one 1 px frame holding six cells (3 × 2) that share 1 px rules: each padded 4 units with a strip (`DETAIL 01` in the accent left, a muted mono tag right), a 16:9 technical drawing of one part, the title in caps at step 1 and a muted line. Two columns at phone width, where the muted line hides.

Open alone, full size (desktop, tablet, phone; layout tree included)

Section view

content.blueprint-section-view · content

Desktop, 1440 px
Phone, 390 px
Rule
A 16:9 section drawing in a ruled frame on 1–8 with a dimension line under it; on 9–12 the SECTION A–A annotation, a condensed-caps title, a paragraph and a ruled key/value spec list.
Slots
heroImage, caption, label, title, body, facts[4..4], cta2
Grid
drawing 1-8 · text 9-12
Notes
The drawing is a cut-through, hatched where material is cut.

A 16:9 section drawing (a cut-through with hatching where the material is cut) in a 1 px frame on 1–8, a dimension line under it. On 9–12: the annotation (`SECTION A–A`), the title in condensed caps at step 4 (max 18 ch), a muted paragraph (max 46 ch), four key/value rows split by rules (muted mono key, bold mono value) and an underline link with an arrow.

Open alone, full size (desktop, tablet, phone; layout tree included)

Dimension figures

stats.blueprint-dimension-figures · stats

Desktop, 1440 px
Phone, 390 px
Rule
Four figures on a ruled strip: each a condensed numeral at step 6 over a dimension line holding its mono label, cells divided by 1 px rules; the section label and title sit above on 1–7.
Slots
label, title, stats[4..4]
Notes
Each figure reads like a measured dimension: its label between two rules, with arrowheads if you can draw them ("|←— UPTIME —→|").

The annotation and a step-4 caps title above, then one 1 px frame holding four cells that share rules: each padded 5 × 4, the figure at step 6 in the condensed heading face (600), and under it a dimension line: a rule, the label in mono `link`, a rule. Two columns at phone width.

Open alone, full size (desktop, tablet, phone; layout tree included)

Parts schedule

list.blueprint-parts-schedule · list

Desktop, 1440 px
Phone, 390 px
Rule
A bill of materials in a ruled frame: a header strip, then rows split by 1 px rules: mono item number on 1, condensed-caps part name on 2–5, description on 6–10, mono quantity/tag right-aligned on 11–12.
Slots
label, title, meta, items[5..6]
Notes
A parts list (ITEM · PART · DESCRIPTION · QTY). On phones the description stays and the tag drops under the name.

A parts list. Heading row: annotation and a step-4 caps title left, a muted mono note right. Then a 1 px frame of five or six rows split by rules, padded 3 × 4, on one baseline: the mono item number in the accent on 1, the part name in caps at step 1 on 2–5, the muted description on 6–10, a mono tag in `link` right-aligned on 11–12 (quantity, status or price).

Open alone, full size (desktop, tablet, phone; layout tree included)

Revision notes

testimonial.blueprint-revision-notes · testimonial

Desktop, 1440 px
Phone, 390 px
Rule
Quotes as a revision table in a ruled frame: a REV letter or number in mono on 1–2, the quote at step 2 on 3–9, the author and role in mono on 10–12, rows split by 1 px rules.
Slots
label, title, quotes[3..3]
Notes
Each row is a customer's revision note; the number column reads "REV A / B / C".

The annotation (`REVISIONS`) and a step-4 caps title, then a `surface` panel in a 1 px frame with three rows split by rules, padded 5 × 4: the revision mark in mono accent on 1–2 (`REV A`), the quote at step 2 on 3–9 (max 56 ch), the author in bold mono with the role in muted mono under it on 10–12.

Open alone, full size (desktop, tablet, phone; layout tree included)

Vendor schedule

logos.blueprint-vendor-schedule · logos

Desktop, 1440 px
Phone, 390 px
Rule
Clients as a ruled schedule of six cells in one row sharing 1 px rules: a muted mono index over each name set in mono capitals; the label sits above.
Slots
label, clients[6..6]

A row with the annotation (`APPROVED VENDORS`) and a rule running to the right edge, then a 1 px frame of six cells in one row sharing rules, padded 4 units: a muted mono index over the client name in bold mono capitals. Two columns at phone width.

Open alone, full size (desktop, tablet, phone; layout tree included)

Approval block

cta.blueprint-approval-block · cta

Desktop, 1440 px
Phone, 390 px
Rule
A ruled approval panel on surface: a condensed-caps title at step 6 and a line on 1–8 with the buttons; on 9–12, divided by a rule, an inline email form over three ruled approval cells (key over value).
Slots
label, title, body, cta, cta2, newsletter, facts[3..3]
Notes
The right cell is the drawing's APPROVED / CHECKED box: the form is the signature line.

A `surface` band split by one vertical rule. On 1–8, padded 8 × 6: the annotation, the title at step 6 in condensed caps (max 18 ch), a muted line (max 52 ch) and the buttons. On 9–12: the inline email form as the signature line, then three key/value rows split by rules (`APPROVED`, `CHECKED`, `DATE` style keys in muted mono, values in bold mono).

Open alone, full size (desktop, tablet, phone; layout tree included)

General notes

faq.blueprint-general-notes · faq

Desktop, 1440 px
Phone, 390 px
Rule
Questions as a drawing's GENERAL NOTES: label and title on 1–4 (sticky feel); numbered notes on 5–12, each a mono number, the question in bold and the answer under it, split by 1 px rules, all answers visible.
Slots
label, title, body, faqs[5..6]

On 1–4: the annotation (`GENERAL NOTES`), the title in condensed caps at step 5 (max 16 ch) and a small muted line. On 5–12: five or six numbered notes split by rules: the mono number in the accent, then the question in bold body at step 0 with the answer under it (max 72 ch), every answer visible.

Open alone, full size (desktop, tablet, phone; layout tree included)

Spec sheets

pricing.blueprint-spec-sheets · pricing

Desktop, 1440 px
Phone, 390 px
Rule
Three plans as ruled spec sheets sharing 1 px rules: each opens with a dimension line holding the mono plan tag, then the condensed-caps plan name, the price at step 6, a muted description and a button.
Slots
label, title, subhead, plans[3..3]

A heading row like the features block, then one 1 px frame holding three plan sheets that share rules. Each sheet, padded 5 × 4: a dimension line holding the mono plan tag (`FOR STARTING OUT`), the plan name in caps at step 3, the price at step 6 in the condensed face, a muted description and a secondary button. One column at phone width.

Open alone, full size (desktop, tablet, phone; layout tree included)

Drawing register

blog.blueprint-drawing-register · blog

Desktop, 1440 px
Phone, 390 px
Rule
A drawing register, rows split by 1 px rules: a small 4:3 technical-drawing thumbnail on 1–2, the mono drawing number on 3, condensed-caps title and muted summary on 4–9, the mono date right-aligned on 10–12.
Slots
label, title, cta2, posts[4..4]

A heading row (annotation and step-4 caps title left, underline link right), then a 1 px frame of four rows split by rules, padded 3 × 4, vertically centred: a 4:3 drawing thumbnail in a 1 px frame on 1–2 (hidden at phone width), the mono drawing number in the accent on 3, the title in caps at step 1 with a muted summary on 4–9, the mono date right-aligned on 10–12.

Open alone, full size (desktop, tablet, phone; layout tree included)

Drafters

team.blueprint-drafters · team

Desktop, 1440 px
Phone, 390 px
Rule
The team as the DRAWN BY / CHECKED BY cells of a title block: a ruled grid of four cells sharing 1 px rules, each a mono index, the name in condensed caps, the role in mono and a muted line.
Slots
label, title, subhead, team[4..4]

A heading row, then one 1 px frame of four cells sharing rules, padded 5 × 4: a mono index in the accent, the name in condensed caps at step 2, the role in muted mono and a muted line. Two columns at phone width.

Open alone, full size (desktop, tablet, phone; layout tree included)

Site plan

contact.blueprint-site-plan · contact

Desktop, 1440 px
Phone, 390 px
Rule
A site-plan map in a ruled frame on 1–7 with a mono caption; on 8–12 the label, a condensed-caps title, a line, ruled address/hours rows and the contact form.
Slots
map, caption, label, title, body, facts[3..3], contact

A site-plan map in a 1 px frame on 1–7 (line-drawn streets in the `border` colour, the site marked with the accent) and its mono caption under it. On 8–12: the annotation, the title in condensed caps at step 5, a muted line, three key/value rows split by rules (address, hours, phone) and the contact form with square 1 px fields and mono labels.

Open alone, full size (desktop, tablet, phone; layout tree included)

Plate set

gallery.blueprint-plate-set · gallery

Desktop, 1440 px
Phone, 390 px
Rule
Work as a set of drawing plates: a large 4:3 plate on 1–8 and two 4:3 plates stacked on 9–12, each in a ruled frame with a mono plate number and title strip under it.
Slots
label, title, image1, image2, image3, caption1, caption2, caption3, index
Notes
Plates are drawings or screenshots set as drawings, never a photo in a soft frame.

The annotation and a step-4 caps title, then plates: a large 4:3 drawing in a 1 px frame on 1–8 with a ruled strip under it (mono plate title in `link` left, muted plate number right), and two 4:3 plates stacked on 9–12, each framed with its mono caption in a ruled strip under the drawing.

Open alone, full size (desktop, tablet, phone; layout tree included)

Footers (2)

Title block footer

footer.blueprint-title-block · footer

Desktop, 1440 px
Phone, 390 px
Rule
The sheet's title block: a ruled frame of cells sharing 1 px rules: wordmark and tagline on 1–4, links in a column on 5–7, four key-over-value rows on 8–12, then a bottom row, legal line left and sheet reference right.
Slots
siteName, tagline, pages, facts[4..4], legal, meta

The footer is the sheet's title block on `surface` in a 1 px frame. Top row of three cells split by vertical rules: the wordmark with the muted tagline on 1–4, links in a column on 5–7, and on 8–12 four key-over-value rows split by rules (muted mono key over the bold mono value). Bottom row under a rule: the mono legal line left, the drawing number in `link` right.

Open alone, full size (desktop, tablet, phone; layout tree included)

Sheet edge

footer.blueprint-sheet-edge · footer

Desktop, 1440 px
Phone, 390 px
Rule
One ruled line along the sheet edge: the mono legal line left, slash-separated links centre, the sheet reference right.
Slots
legal, pages, meta

One line along the sheet edge under a 1 px rule: the mono legal line left, slash-separated links in the middle, the mono drawing number in `link` right.

Open alone, full size (desktop, tablet, phone; layout tree included)

Hero library heroes that suit Blueprint

Product with flanking specshero.product-floating-specs · productA square product shot in 4–9 is flanked by spec callouts: 2–3 feature labels in 1–3 and 2–3 numbers in 10–12, each with a top rule; the headline runs 1–8 underneath, price and CTA in 10–12.Split, media righthero.split-media-right · splitCopy in columns 1–6, vertically centred; the image fills columns 7–12 at the full hero height. A hairline and a muted meta line close the copy column.Editorial indexhero.editorial-index · editorialThe hero is a table of contents: headline, subhead and link in 1–5 (sticky), and a ruled list of 4–7 numbered entries (number, title, meta) in 7–12; column 6 stays empty.Statement, bottom-lefthero.minimal-statement-left · minimalA tall, quiet hero: a mono index top-left and meta top-right on one row, and a two-to-three-line statement as the h1 at step 5 sitting on the bottom-left (1–9), with one underline link under it.Split, media lefthero.split-media-left · splitThe image fills columns 1–7 at full hero height; column 8 stays empty; a narrow copy column in 9–12 sits on the bottom edge and ends in a ruled facts list and one CTA.Info posterhero.poster-grid · collageBuilt like an event poster: a giant numeral or date in 1–4 beside an uppercase headline in 5–12; a large circle under the numeral; a 4-column grid of facts (when, where, price, who) with top rules in 5–12; subhead and CTA last.

Signature looks that suit it

Generative grid patterngenerative · about 1 KB JSText scramblekinetic-type · about 31 KB JSPinned scroll storyscroll · about 45 KB JSPage transitionstransition · about 1 KB JSBlend-mode cursorcursor · about 28 KB JS