features.isometric-flow-steps · Isometric flow steps

A features pattern from Isometric Line, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 2. Give the section root data-pattern="features.isometric-flow-steps". A guide only: DESIGN.md and tokens.json are the source of truth.

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.
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #FF5A2C · accent2 #00ABC9 · Space Grotesk / Space Grotesk · radius 2px · space unit 4px (full list in design/tokens.json)

Pattern notes

  • 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.

What you get

What we do

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

01

Positioning

Find the one sentence your best customers already believe.

02

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

03

Websites

Fast, editable sites built on the CMS your team already knows.

04

Sales enablement

Decks, one-pagers and demos your reps actually use.

Layout tree (as in design/layout.json)
{
  "pattern": "features.isometric-flow-steps",
  "kind": "features",
  "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.",
  "tree": {
    "el": "box",
    "gap": 8,
    "children": [
      {
        "el": "grid",
        "gap": 6,
        "align": "end",
        "children": [
          {
            "el": "box",
            "span": "1-6",
            "gap": 3,
            "children": [
              {
                "el": "text",
                "color": "link",
                "slot": "label",
                "role": "label",
                "font": "mono"
              },
              {
                "el": "text",
                "slot": "title",
                "role": "h2",
                "step": 5,
                "weight": 600,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 22
              }
            ]
          },
          {
            "el": "text",
            "span": "8-12",
            "color": "textMuted",
            "slot": "subhead",
            "role": "body",
            "maxCh": 44
          }
        ]
      },
      {
        "el": "repeat",
        "slot": "steps",
        "min": 4,
        "max": 4,
        "layout": "grid",
        "cols": 4,
        "phoneCols": 2,
        "gap": 4,
        "divider": true,
        "of": {
          "el": "box",
          "gap": 3,
          "pad": [
            0,
            2
          ],
          "children": [
            {
              "el": "media",
              "slot": "image",
              "aspect": "1/1",
              "treatment": "isometric",
              "frame": "none"
            },
            {
              "el": "box",
              "mobile": "keep",
              "dir": "row",
              "gap": 3,
              "align": "baseline",
              "children": [
                {
                  "el": "text",
                  "color": "link",
                  "slot": "number",
                  "role": "label",
                  "font": "mono"
                },
                {
                  "el": "text",
                  "slot": "title",
                  "role": "h4",
                  "step": 1,
                  "weight": 600
                }
              ]
            },
            {
              "el": "text",
              "color": "textMuted",
              "slot": "body",
              "role": "small"
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/features.isometric-flow-steps.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>features.isometric-flow-steps — Isometric Line</title>
<link rel="stylesheet" href="base.css">
<style>
section { padding: var(--section) 0; }
  .head { align-items: end; margin-bottom: 40px; } .head > div { grid-column: 1 / 7; } .head p { grid-column: 8 / 13; }
  .head h2 { font-size: var(--step-5); max-width: 22ch; margin-top: 12px; }
  .steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps li { padding: 0 20px; border-left: var(--stroke) solid var(--heading); } .steps li:first-child { border-left: 0; padding-left: 0; }
  .steps strong { color: var(--heading); font-size: var(--step-1); font-weight: 600; }
  .steps p { margin-top: 10px; } .steps .iso { aspect-ratio: 1 / 1; }
  @media (max-width: 640px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 24px; } .steps li { padding: 0 12px; } .steps li:nth-child(odd) { border-left: 0; padding-left: 0; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="grid head"><div><span class="mono link">How it works</span><h2>From one file to a running stack in four moves.</h2></div>
    <p class="muted">The same block, four states: the drawing in each step is the object after that step has run.</p></div>
  <ol class="steps"><li><svg class="iso" viewBox="0 0 309 268" role="img" aria-label="Raw block"><polygon class="l" points="16.0,172.0 154.6,252.0 154.6,246.0 16.0,166.0"/><polygon class="r" points="293.2,172.0 154.6,252.0 154.6,246.0 293.2,166.0"/><polygon class="t" points="154.6,86.0 293.2,166.0 154.6,246.0 16.0,166.0"/><polygon class="l" points="68.0,166.0 154.6,216.0 154.6,116.0 68.0,66.0"/><polygon class="r" points="241.2,166.0 154.6,216.0 154.6,116.0 241.2,66.0"/><polygon class="t" points="154.6,16.0 241.2,66.0 154.6,116.0 68.0,66.0"/></svg><p><span class="mono link">01</span> <strong>Describe</strong></p><p class="small muted">Write the stack as blocks in one config file.</p></li><li><svg class="iso" viewBox="0 0 309 268" role="img" aria-label="Block sliced into three"><polygon class="l" points="16.0,172.0 154.6,252.0 154.6,246.0 16.0,166.0"/><polygon class="r" points="293.2,172.0 154.6,252.0 154.6,246.0 293.2,166.0"/><polygon class="t" points="154.6,86.0 293.2,166.0 154.6,246.0 16.0,166.0"/><polygon class="l" points="130.4,130.0 217.0,180.0 217.0,80.0 130.4,30.0"/><polygon class="r" points="241.2,166.0 217.0,180.0 217.0,80.0 241.2,66.0"/><polygon class="t" points="154.6,16.0 241.2,66.0 217.0,80.0 130.4,30.0"/><polygon class="l" points="99.2,148.0 185.8,198.0 185.8,98.0 99.2,48.0"/><polygon class="r" points="210.0,184.0 185.8,198.0 185.8,98.0 210.0,84.0"/><polygon class="a" points="123.4,34.0 210.0,84.0 185.8,98.0 99.2,48.0"/><polygon class="l" points="68.0,166.0 154.6,216.0 154.6,116.0 68.0,66.0"/><polygon class="r" points="178.8,202.0 154.6,216.0 154.6,116.0 178.8,102.0"/><polygon class="t" points="92.2,52.0 178.8,102.0 154.6,116.0 68.0,66.0"/></svg><p><span class="mono link">02</span> <strong>Split</strong></p><p class="small muted">Stackyard plans each block into isolated services.</p></li><li><svg class="iso" viewBox="0 0 309 268" role="img" aria-label="Slices stacked"><polygon class="l" points="16.0,172.0 154.6,252.0 154.6,246.0 16.0,166.0"/><polygon class="r" points="293.2,172.0 154.6,252.0 154.6,246.0 293.2,166.0"/><polygon class="t" points="154.6,86.0 293.2,166.0 154.6,246.0 16.0,166.0"/><polygon class="l" points="68.0,166.0 154.6,216.0 154.6,188.0 68.0,138.0"/><polygon class="r" points="241.2,166.0 154.6,216.0 154.6,188.0 241.2,138.0"/><polygon class="t" points="154.6,88.0 241.2,138.0 154.6,188.0 68.0,138.0"/><polygon class="l" points="68.0,130.0 154.6,180.0 154.6,152.0 68.0,102.0"/><polygon class="r" points="241.2,130.0 154.6,180.0 154.6,152.0 241.2,102.0"/><polygon class="t" points="154.6,52.0 241.2,102.0 154.6,152.0 68.0,102.0"/><polygon class="l" points="68.0,94.0 154.6,144.0 154.6,116.0 68.0,66.0"/><polygon class="r" points="241.2,94.0 154.6,144.0 154.6,116.0 241.2,66.0"/><polygon class="a" points="154.6,16.0 241.2,66.0 154.6,116.0 68.0,66.0"/></svg><p><span class="mono link">03</span> <strong>Stack</strong></p><p class="small muted">Services are layered and wired in dependency order.</p></li><li><svg class="iso" viewBox="0 0 326 238" role="img" aria-label="Stack shipped along a connector"><polygon class="l" points="16.0,132.0 154.6,212.0 154.6,206.0 16.0,126.0"/><polygon class="r" points="293.2,132.0 154.6,212.0 154.6,206.0 293.2,126.0"/><polygon class="t" points="154.6,46.0 293.2,126.0 154.6,206.0 16.0,126.0"/><polygon class="l" points="68.0,126.0 154.6,176.0 154.6,116.0 68.0,66.0"/><polygon class="r" points="241.2,126.0 154.6,176.0 154.6,116.0 241.2,66.0"/><polygon class="a" points="154.6,16.0 241.2,66.0 154.6,116.0 68.0,66.0"/><line class="cn" x1="197.9" y1="121.0" x2="258.5" y2="156.0"/><polygon class="l" points="241.2,202.0 275.8,222.0 275.8,182.0 241.2,162.0"/><polygon class="r" points="310.5,202.0 275.8,222.0 275.8,182.0 310.5,162.0"/><polygon class="t" points="275.8,142.0 310.5,162.0 275.8,182.0 241.2,162.0"/></svg><p><span class="mono link">04</span> <strong>Ship</strong></p><p class="small muted">One push rolls the whole stack out, region by region.</p></li></ol>
</section>
</body>
</html>

Other patterns in this design

Whole design · Spec bundle (JSON) · On the style page