features.isometric-layer-stack · Isometric layer stack

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 3. Give the section root data-pattern="features.isometric-layer-stack". A guide only: DESIGN.md and tokens.json are the source of truth.

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

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

Corvid Robotics — identity

06

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-layer-stack",
  "kind": "features",
  "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.",
  "tree": {
    "el": "grid",
    "gap": 8,
    "align": "center",
    "children": [
      {
        "el": "box",
        "span": "1-6",
        "bg": "surface",
        "gap": 3,
        "pad": 4,
        "border": "all",
        "children": [
          {
            "el": "box",
            "mobile": "hide",
            "dir": "row",
            "justify": "between",
            "children": [
              {
                "el": "text",
                "color": "link",
                "slot": "caption",
                "role": "label",
                "font": "mono"
              },
              {
                "el": "text",
                "color": "textMuted",
                "slot": "index",
                "role": "label",
                "font": "mono"
              }
            ]
          },
          {
            "el": "media",
            "slot": "diagram",
            "aspect": "1/1",
            "treatment": "isometric",
            "frame": "none"
          }
        ]
      },
      {
        "el": "box",
        "span": "7-12",
        "gap": 4,
        "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": 20
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "body",
            "role": "body",
            "maxCh": 52
          },
          {
            "el": "repeat",
            "slot": "features",
            "min": 4,
            "max": 4,
            "layout": "list",
            "gap": 3,
            "divider": true,
            "of": {
              "el": "box",
              "mobile": "keep",
              "dir": "row",
              "gap": 5,
              "align": "start",
              "children": [
                {
                  "el": "text",
                  "color": "link",
                  "slot": "number",
                  "role": "label",
                  "font": "mono"
                },
                {
                  "el": "box",
                  "gap": 1,
                  "children": [
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "h4",
                      "step": 1,
                      "weight": 600
                    },
                    {
                      "el": "text",
                      "color": "textMuted",
                      "slot": "body",
                      "role": "small"
                    }
                  ]
                }
              ]
            }
          }
        ]
      }
    ]
  }
}
Component example: reference/features.isometric-layer-stack.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>features.isometric-layer-stack — Isometric Line</title>
<link rel="stylesheet" href="base.css">
<style>
section { padding: var(--section) 0; }
  .grid { align-items: center; }
  .plate { grid-column: 1 / 7; background: var(--surface); padding: 16px; }
  .plate header { display: flex; justify-content: space-between; margin-bottom: 12px; }
  .copy { grid-column: 7 / 13; }
  .copy h2 { font-size: var(--step-5); max-width: 20ch; margin: 12px 0 16px; }
  .legend { list-style: none; padding: 0; margin-top: 24px; }
  .legend li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; border-top: var(--stroke) solid var(--border); }
  .legend strong { display: block; color: var(--heading); font-size: var(--step-1); font-weight: 600; }
</style>
</head>
<body>
<section class="wrap"><div class="grid">
  <figure class="plate frame"><header><span class="mono link">Fig. 03 — exploded stack</span><span class="mono muted">4 layers</span></header><svg class="iso" viewBox="0 0 518 560" role="img" aria-label="Exploded isometric view of four layers pulled apart with dashed connectors, the second layer from the top selected"><polygon class="l" points="16.0,424.0 223.8,544.0 223.8,526.0 16.0,406.0"/><polygon class="r" points="431.6,424.0 223.8,544.0 223.8,526.0 431.6,406.0"/><polygon class="t" points="223.8,286.0 431.6,406.0 223.8,526.0 16.0,406.0"/><polygon class="l" points="16.0,334.0 223.8,454.0 223.8,436.0 16.0,316.0"/><polygon class="r" points="431.6,334.0 223.8,454.0 223.8,436.0 431.6,316.0"/><polygon class="t" points="223.8,196.0 431.6,316.0 223.8,436.0 16.0,316.0"/><line class="cn" x1="223.8" y1="526.0" x2="223.8" y2="454.0"/><line class="cn" x1="16.0" y1="406.0" x2="16.0" y2="334.0"/><line class="cn" x1="431.6" y1="406.0" x2="431.6" y2="334.0"/><polygon class="l" points="16.0,244.0 223.8,364.0 223.8,346.0 16.0,226.0"/><polygon class="r" points="431.6,244.0 223.8,364.0 223.8,346.0 431.6,226.0"/><polygon class="a" points="223.8,106.0 431.6,226.0 223.8,346.0 16.0,226.0"/><line class="cn" x1="223.8" y1="436.0" x2="223.8" y2="364.0"/><line class="cn" x1="16.0" y1="316.0" x2="16.0" y2="244.0"/><line class="cn" x1="431.6" y1="316.0" x2="431.6" y2="244.0"/><polygon class="l" points="16.0,154.0 223.8,274.0 223.8,256.0 16.0,136.0"/><polygon class="r" points="431.6,154.0 223.8,274.0 223.8,256.0 431.6,136.0"/><polygon class="t" points="223.8,16.0 431.6,136.0 223.8,256.0 16.0,136.0"/><line class="cn" x1="223.8" y1="346.0" x2="223.8" y2="274.0"/><line class="cn" x1="16.0" y1="226.0" x2="16.0" y2="154.0"/><line class="cn" x1="431.6" y1="226.0" x2="431.6" y2="154.0"/><line class="gl" x1="275.8" y1="46.0" x2="67.9" y2="166.0"/><line class="gl" x1="327.7" y1="76.0" x2="119.9" y2="196.0"/><line class="gl" x1="379.7" y1="106.0" x2="171.8" y2="226.0"/><circle class="dot" cx="327.7" cy="205.0" r="3"/><line class="lead" x1="327.7" y1="205.0" x2="467.6" y2="205.0"/><text class="tag" x="473.6" y="209.0">01</text><circle class="dot" cx="327.7" cy="295.0" r="3"/><line class="lead" x1="327.7" y1="295.0" x2="467.6" y2="295.0"/><text class="tag" x="473.6" y="299.0">02</text><circle class="dot" cx="327.7" cy="385.0" r="3"/><line class="lead" x1="327.7" y1="385.0" x2="467.6" y2="385.0"/><text class="tag" x="473.6" y="389.0">03</text><circle class="dot" cx="327.7" cy="475.0" r="3"/><line class="lead" x1="327.7" y1="475.0" x2="467.6" y2="475.0"/><text class="tag" x="473.6" y="479.0">04</text></svg></figure>
  <div class="copy">
    <span class="mono link">Architecture</span>
    <h2>Four layers, each one replaceable.</h2>
    <p class="muted" style="max-width:52ch">Every layer talks to the one below through a typed contract, so you can swap the store or the runtime without touching the rest.</p>
    <ol class="legend">
      <li><span class="mono link">01</span><span><strong>Interface</strong><span class="small muted">Routes, auth and rate limits at the edge.</span></span></li>
      <li><span class="mono link">02</span><span><strong>Runtime</strong><span class="small muted">Isolated workers, scaled per request. Selected.</span></span></li>
      <li><span class="mono link">03</span><span><strong>Queue</strong><span class="small muted">Ordered, durable, replayable for seven days.</span></span></li>
      <li><span class="mono link">04</span><span><strong>Store</strong><span class="small muted">Objects and tables, replicated across two zones.</span></span></li>
    </ol>
  </div>
</div></section>
</body>
</html>

Other patterns in this design

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