Skip to content
SloplessTry the picker

Base style · 2010s · balanced

Isometric Line

An illustration-led product page built around large isometric line drawings — thin-stroke slabs, cubes and exploded layer stacks at 30° — with numbered callouts, a geometric sans and mono labels.

Use this styleDesigns in this style
Moods
technical, cool, friendly, minimal
Suits
saas, devtools, ai, fintech, science, education
Type
Space Grotesk

Principles

  • Build every section around one large isometric line drawing: hero, how-it-works flow, layer stack, exploded view
  • Draw in true 30° isometric projection with one 1.5 px stroke shared by drawings, borders, dividers and inputs
  • Fill at most one or two blocks per drawing with the accent (the selected part); the rest stays open line
  • Label drawings like a manual: numbered leader-line callouts on the drawing, the same numbers in a mono key beside it
  • Set headlines big in one geometric sans at 600, tight; every label, index and figure caption in mono

Hard rules

  • No perspective 3D, no renders, no clay, glass or soft shadows; no gradient shading on faces — flat fills only.
  • No stock photos, product screenshots or people photos in place of drawings; if a section shows something, draw it.
  • No mixed stroke weights: never 1 px borders next to 2 px drawing lines; never filled icon sets beside line drawings.
  • No more than two accent-filled blocks per drawing, and no accent-coloured body text.
  • No blueprint look: no white lines on a saturated blue field, no dimension lines with arrowheads, no title blocks — this is line illustration on paper or ink, not a construction drawing.
  • No tiny isometric icons in a three-card grid; drawings are large (at least five columns in a hero, one full column per step).

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 Isometric Line 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

  • Draw every `treatment: isometric` image as a true isometric line drawing: x and y axes at 30° from horizontal, verticals upright, no perspective, no vanishing points. Build from slabs (flat boxes), cubes, cylinders, stacked layers and connectors (straight pipes or dashed lines that run along the 30° axes).
  • Use one stroke weight everywhere: 1.5 px (`border.width`) for drawing outlines, card borders, dividers, inputs and underlines; `stroke-linejoin: round`, `stroke-linecap: round`, and `vector-effect: non-scaling-stroke` so lines stay 1.5 px at every drawing size.
  • Stroke in the `heading` colour on the page colour; fill top faces with `bg`, left faces with `surface` and right faces with `surfaceAlt` so blocks read as solid without shading gradients.
  • Fill at most one or two blocks per drawing with `accent` (the selected block — the layer, step or product the section is about) and, if needed, one small part with `accent2`. Everything else stays line-only.
  • Label drawings: thin leader lines (1 px, `textMuted`) from a part to a small numbered mono tag (`01`, `02` …) in the `link` colour; the same numbers start each item in the key next to the drawing (`features`, `items`, `steps` repeats).
  • Exploded views pull layers apart along the vertical axis with dashed 1.5 px connectors between them; keep 24–40 px of air between layers at desktop.
  • Draw the page texture as a faint dot grid (`texture: dot-grid`, dots at 24 px, `border` colour at ~60 %) behind sections; drawings sit straight on it without a frame unless the tree says `frame: border`.
  • Set headlines in the heading sans at weight 600, `tracking: tight`, hero display at step 7–8, section titles at step 5–6. Labels, step numbers, figure captions (`FIG. 01 — …`), versions and units are mono, uppercase, 0.06em tracking.
  • Keep corners nearly square (radius 2 px) on buttons, inputs and frames — isometric blocks have sharp edges and so does the UI.
  • Primary button: solid `accent` with `onAccent` text; secondary: 1.5 px `heading` outline on `bg`. On hover, the button shifts 2 px up-right along the 30° axis (translate(2px, −1px)), 260 ms; nothing auto-plays, and `prefers-reduced-motion` removes it.
  • Optional motion: an exploded view may separate its layers as it scrolls into view (`scroll-pinned-story`); with reduced motion, show it already exploded.
  • At 375 px: drawings move under their headline at full width and keep their aspect; numbered keys stack under the drawing; callouts drop their leader lines and keep their numbers.

Don't

  • No perspective 3D, no renders, no clay, glass or soft shadows; no gradient shading on faces — flat fills only.
  • No stock photos, product screenshots or people photos in place of drawings; if a section shows something, draw it.
  • No mixed stroke weights: never 1 px borders next to 2 px drawing lines; never filled icon sets beside line drawings.
  • No more than two accent-filled blocks per drawing, and no accent-coloured body text.
  • No blueprint look: no white lines on a saturated blue field, no dimension lines with arrowheads, no title blocks — this is line illustration on paper or ink, not a construction drawing.
  • No tiny isometric icons in a three-card grid; drawings are large (at least five columns in a hero, one full column per step).
  • No centred hero over a gradient; heroes are split or drawing-led as in the patterns below.
  • No rounded pill buttons or radii above 4 px; no serif or script faces; no weights above 600 in the sans.

Heroes (4)

Exploded wide

hero.isometric-exploded-wide · hero

Desktop, 1440 px
Phone, 390 px
Rule
Display headline in 1–8 with lead and buttons bottom-aligned in 9–12; under them a full-width 21:9 exploded isometric view and a four-column numbered key, one column per layer.
Slots
eyebrow, headline, subhead, cta, cta2, heroImage, features[4..4]
Grid
headline 1-8 · lead 9-12 · drawing 1-12 · key 1-12
Notes
The 21:9 drawing shows the product's layers pulled apart vertically along the 30° axis with dashed connectors; each key column names one layer, top to bottom.

Row 1: eyebrow and display headline at step 7 (≤22 ch) in 1–8; a muted line and primary + ghost buttons bottom-aligned in 9–12. Row 2: a full-width 21:9 exploded view in a 1.5 px frame — four layers pulled apart vertically with dashed connectors, the active layer in the accent. Row 3: a four-column key on top rules (mono number, title, one line), one column per layer, two per row on phones.

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

Isometric stack split

hero.isometric-stack-split · hero

Desktop, 1440 px
Phone, 390 px
Rule
Headline, lead and a three-item numbered callout key in 1–5; one large isometric line drawing (1:1) fills 6–12 under a mono figure caption. The key numbers match labelled parts of the drawing.
Slots
eyebrow, headline, subhead, cta, cta2, features[3..3], caption, index, heroImage
Grid
message 1-5 · drawing 6-12
Notes
The drawing is the hero: 30° projection, 1.5 px strokes in the heading ink, one block filled with the accent. Numbered leader labels on the drawing repeat the key's numbers.

Columns 1–5: mono eyebrow in the link colour, display headline at step 7 (600, tight, ≤13 ch), a muted lead (≤40 ch) and primary-with-arrow plus secondary buttons; pinned to the bottom, a ruled key of three numbered items (mono number, title at step 1, a muted line). Columns 6–12: a mono figure caption and index on one row, then a 1:1 isometric drawing of the product as a stack of slabs with the three key numbers as leader labels on it, one slab filled with the accent. At least 85 vh.

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

Line callout board

hero.line-callout-board · hero

Desktop, 1440 px
Phone, 390 px
Rule
Headline across 1–9 with lead and button in 10–12; below, a 1:1 isometric drawing in 4–9 flanked by two numbered callouts on the left (1–3) and two figure callouts on the right (10–12), all on top rules.
Slots
eyebrow, headline, subhead, cta, features[2..2], heroImage, stats[2..2]
Grid
headline 1-9 · lead 10-12 · calloutsLeft 1-3 · drawing 4-9 · calloutsRight 10-12
Notes
Draw a thin leader line from each callout's top rule to the part it names on the drawing; on phones the callouts stack under the drawing.

Row 1: eyebrow and display headline (step 7, ≤22 ch) across 1–9; a muted line and a primary button bottom-aligned in 10–12. Row 2: a 1:1 drawing in 4–9, two numbered feature callouts in 1–3 and two figure callouts (number at step 5 over a mono label) in 10–12, each on a top rule and vertically centred. Draw leader lines from each callout's rule to the part it names. Phone: headline, drawing, then the callouts stacked.

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

Drawing first

hero.isometric-drawing-first · hero

Desktop, 1440 px
Phone, 390 px
Rule
A 1:1 isometric drawing fills 1–6; 7–12 holds the eyebrow, a display headline (≤14 ch), the lead, an inline email form and a three-figure row on hairline dividers.
Slots
heroImage, eyebrow, headline, subhead, newsletter, stats[3..3]
Grid
drawing 1-6 · message 7-12

The drawing leads: a 1:1 isometric drawing in 1–6, vertically centred with the message in 7–12 — mono eyebrow, display headline at step 7 (≤14 ch), muted lead, an inline email form and a row of three figures (number at step 4, muted caption) on hairline dividers. At least 80 vh.

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

Navigation (2)

Content blocks (14)

Isometric flow steps

features.isometric-flow-steps · features

Desktop, 1440 px
Phone, 390 px
Rule
How-it-works as a flow: title in 1–6 and a muted line in 8–12, then four steps in a row, each a 1:1 isometric drawing over a mono step number, title and line, with hairline connectors between columns.
Slots
label, title, subhead, steps[4..4]
Notes
Each step drawing shows the same object in its next state (raw block → sliced → stacked → shipped) so the row reads as one sequence left to right.

How it works. Mono label and h2 at step 5 (≤22 ch) in 1–6, a muted line bottom-aligned in 8–12. Then four steps in one row with 1.5 px hairlines between them: each a 1:1 drawing of the same object in its next state (raw block → sliced → stacked → shipped), then the mono step number and title on one baseline and a muted line. Two steps per row on phones.

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

Isometric layer stack

features.isometric-layer-stack · features

Desktop, 1440 px
Phone, 390 px
Rule
Architecture stack: an exploded layer drawing in a bordered surface plate in 1–6 (mono figure caption on top); 7–12 holds the label, title, a line and a ruled, numbered legend of four or five layers.
Slots
caption, index, diagram, label, title, body, features[4..4]
Notes
Legend numbers are the leader-label numbers on the drawing; the accent fill marks the layer the section is about.

Architecture. Columns 1–6: a bordered surface plate (16 px padding) with a mono figure caption and index on top and a 1:1 exploded layer drawing. Columns 7–12, vertically centred: mono label, h2 at step 5, a muted line (≤52 ch) and a ruled legend of four layers — mono number, then title and line beside it (kept side by side on phones). Legend numbers are the leader labels on the drawing.

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

Isometric exploded view

content.isometric-exploded-view · content

Desktop, 1440 px
Phone, 390 px
Rule
Title (step 6) left with an underline link right on one row; below, a 16:9 exploded drawing in a bordered frame across 1–9 and a five-part ruled key in 10–12.
Slots
label, title, cta2, diagram, items[5..5]

On `surfaceAlt`. One row: mono label and h2 at step 6 (≤18 ch) left, an underline link with arrow right. Below, a 16:9 exploded drawing in a 1.5 px frame on `surface` across 1–9 and a five-part ruled key in 10–12 (mono number, title at body size 600, a muted meta line).

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

Isometric volume figures

stats.isometric-volume-figures · stats

Desktop, 1440 px
Phone, 390 px
Rule
Intro in 1–4 (label, title, line, link); four figures across 5–12 on hairline dividers, each a 1:1 drawing whose cube count shows the quantity, over a big number and a muted caption.
Slots
label, title, body, cta2, stats[4..4]

Columns 1–4: label, h2 at step 5 (≤16 ch) and a muted line at the top, a link with arrow at the bottom. Columns 5–12: four figures on vertical hairlines, each a 1:1 drawing whose cube count or stack height shows the quantity, then the number at step 6 (600, tight, tabular) and a muted caption. Two per row on phones.

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

Isometric plates

gallery.isometric-plates · gallery

Desktop, 1440 px
Phone, 390 px
Rule
Drawings as numbered plates: a big 4:3 plate in 1–8 over two rows and two 4:3 plates stacked in 9–12, each in a hairline frame with a mono FIG. caption.
Slots
title, label, caption, index, image1, caption2, image2, caption3, image3

Drawings as numbered plates. Row 1: h2 at step 5 and a mono label, space between. Rows 2–3: a big plate in 1–8 (1.5 px frame, 16 px padding, mono `FIG.` caption and index over a 4:3 drawing) and two smaller framed plates stacked in 9–12, each a mono caption over a 4:3 drawing. Gaps 16 px.

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

Isometric quote block

testimonial.isometric-quote-block · testimonial

Desktop, 1440 px
Phone, 390 px
Rule
A 1:1 drawing of the customer's setup in 1–5; the quote at step 4 in 6–12 with the name and a mono role on a top rule under it.
Slots
drawing, label, quote, author, role

A 1:1 drawing of the customer's setup (their stack, with your block in the accent) in 1–5; in 6–12, a mono label, the quote at step 4 (500, tight leading, ≤34 ch) and, on a top rule, the name at 600 beside a mono role.

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

Isometric tier rows

pricing.isometric-tier-rows · pricing

Desktop, 1440 px
Phone, 390 px
Rule
Plans as ruled rows, not cards: each row has a small drawing (more cubes per tier) in 1–2, mono tag and plan name in 3–6, the line in 7–9 and the price over a button in 10–12.
Slots
label, title, body, plans[3..3]

Mono label and h2 at step 5 in 1–7 with a muted line in 8–12. Then three plans as ruled rows (never cards): a small 1:1 drawing in 1–2 that grows by tier (one cube, a stack, a grid of stacks), mono tag and plan name at step 3 in 3–6, the plan line in 7–9, and the price at step 5 over a small secondary button, right-aligned in 10–12. On phones the drawing is hidden and the row stacks.

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

Line ruled index

faq.line-ruled-index · faq

Desktop, 1440 px
Phone, 390 px
Rule
Title, a 1:1 drawing and a support line in 1–4; five or six numbered questions as a ruled list in 5–12, answers always visible.
Slots
label, title, drawing, body, faqs[5..6]

Columns 1–4: mono label, h2 at step 5, a 1:1 drawing and a muted support line. Columns 5–12: five or six questions as a ruled list, each an 8-column row — mono number in 1, question at step 1 (600) and the answer in muted body in 2–8. All answers visible.

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

Isometric build panel

cta.isometric-build-panel · cta

Desktop, 1440 px
Phone, 390 px
Rule
One bordered surface panel: title at step 6, a line and an inline email form in 1–7; a drawing of the finished build (accent block on top) fills 8–12 on surfaceAlt.
Slots
label, title, body, newsletter, meta, drawing

One `surface` panel with a 1.5 px border. Columns 1–7 (40 × 32 px padding): mono label, h2 at step 6 (≤18 ch), a muted line, an inline email form and a mono note. Columns 8–12: the finished build drawn large on `surfaceAlt`, filling the panel height, its top block in the accent.

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

Line integration grid

logos.line-integration-grid · logos

Desktop, 1440 px
Phone, 390 px
Rule
Label, title and a line in 1–4; eight integration names in a ruled four-column grid across 5–12, each cell a name over a mono tag.
Slots
label, title, body, clients[8..8]

Mono label, h3 at step 4 and a muted line in 1–4. Eight integrations in a ruled four-column grid across 5–12 (hairlines between cells, no fills): name at step 1 (600) over a mono tag. Two columns on phones.

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

Isometric notes

blog.isometric-notes · blog

Desktop, 1440 px
Phone, 390 px
Rule
Title and an underline link on one row; three posts as ruled rows: a 4:3 drawing in 1–3, mono date in 4–5, title in 6–9, summary in 10–12.
Slots
title, cta2, posts[3..3]

h2 at step 5 and an underline link with arrow on one row. Three posts as ruled rows: a framed 4:3 drawing in 1–3, mono date in 4–5, title at step 2 (600) in 6–9 and a muted summary in 10–12.

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

Isometric crew

team.isometric-crew · team

Desktop, 1440 px
Phone, 390 px
Rule
Title and a muted line on one row; four people as framed 1:1 isometric desk drawings with the name and a mono role under each.
Slots
label, title, body, team[4..4]

Mono label and h2 at step 5 in 1–6, a muted line in 8–12. Four people as framed 1:1 drawings of their desk or tool of choice (never portraits), name at step 1 and a mono role under each. Two per row on phones.

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

Isometric office desk

contact.isometric-office-desk · contact

Desktop, 1440 px
Phone, 390 px
Rule
Title, line and a name/email/message form in 1–5; a 4:3 drawing of the office in 7–12 over two ruled contact cells (email + address, phone + hours).
Slots
label, title, body, contact, drawing, email, address, phone, hours

Columns 1–5: mono label, h2 at step 5, a muted line and the name/email/message form with 1.5 px inputs. Columns 7–12: a framed 4:3 drawing of the office block, then two ruled contact cells — email over address, phone over hours.

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

Isometric spec table

list.isometric-spec-table · list

Desktop, 1440 px
Phone, 390 px
Rule
Dense explainer: title in 1–6 and a line in 7–12; a 4:3 drawing in a hairline frame in 1–5 beside six to eight spec cells in a ruled two-column grid across 6–12.
Slots
label, title, body, diagram, items[6..8]

The dense explainer. Mono label and h2 at step 5 in 1–6, a muted line in 7–12. Then a framed 4:3 drawing in 1–5, vertically centred beside six or eight spec cells (20 × 16 px padding) in a ruled two-column grid across 6–12: mono number and mono meta on one row, title at step 1, a muted line.

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

Footers (2)

Isometric ground plane

footer.isometric-ground-plane · footer

Desktop, 1440 px
Phone, 390 px
Rule
Top hairline; wordmark and tagline in 1–4, stacked links in 5–7, a mono newsletter label and inline form in 8–12; a ruled bottom row with the mono legal line and contact email.
Slots
siteName, tagline, pages, newsletter, legal, email

A 1.5 px top hairline, then: boxed wordmark and a muted tagline in 1–4, stacked links in 5–7, a mono newsletter label and inline form in 8–12. Under a second rule, the mono legal line and the contact email in the link colour, space between.

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

Line compact rule

footer.line-compact-rule · footer

Desktop, 1440 px
Phone, 390 px
Rule
One row on a top hairline: boxed wordmark, slash-separated links and the mono legal line, space between.
Slots
siteName, pages, legal

One row on a 1.5 px top hairline: boxed wordmark, slash-separated links and the mono legal line, space between; wraps on phones.

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

Hero library heroes that suit Isometric Line

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.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 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.Product, centred shothero.product-centered-shot · productProduct launch layout on one axis: a short product-name headline, a wide 16:9 product shot that dominates the hero, a row of 3–4 specs divided by rules, then price and one CTA.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.Hover tile gridhero.interactive-grid-hover · interactiveIntro in 1–5 (headline top, subhead + CTA bottom); a 3-column grid of 6–9 bordered tiles (number + label) fills 6–12 and inverts tile by tile under the cursor.

Signature looks that suit it

Pinned scroll storyscroll · about 45 KB JSParallax layersscroll · about 45 KB JSGenerative grid patterngenerative · about 1 KB JSMagnetic buttonscursor · about 28 KB JS