content.dot-story-split · Story split

A content pattern from Dot Matrix, drawn alone below with this design's tokens and sample copy. Used in this design on: about page, section 1. Give the section root data-pattern="content.dot-story-split". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Label, title, lead and body in 1–6; a 4:5 halftone picture tile in 7–12 with three numbered readings in a row under it.
Slots
sectionLabel, title, lead, body, image, stats[3..3]
Grid areas
copy 1-6 · picture 7-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #000000 · text #E6E6E6 · heading #FFFFFF · accent #D71921 · accent2 #FFFFFF · Doto / Space Grotesk · radius 24px · space unit 4px (full list in design/tokens.json)

Pattern notes

  • Columns 1–6: pill label, title at step 5 (≤16 ch), lead (≤40 ch) and a muted body (≤56 ch). Columns 7–12: a 4:3 halftone picture tile, and under it three small reading widgets in a row (mono label, number at step 5), three across even on phones.

About

How we think

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.

We hand over everything — source files, a living brand system and a website your team can edit without calling us.

launches shipped

140+

years independent

12

clients return

9 of 10

Layout tree (as in design/layout.json)
{
  "pattern": "content.dot-story-split",
  "kind": "content",
  "grid": {
    "copy": "1-6",
    "picture": "7-12"
  },
  "slots": [
    "sectionLabel",
    "title",
    "lead",
    "body",
    "image",
    "stats[3..3]"
  ],
  "tree": {
    "el": "grid",
    "gap": 8,
    "align": "start",
    "children": [
      {
        "el": "box",
        "span": "1-6",
        "gap": 5,
        "children": [
          {
            "el": "box",
            "alignSelf": "start",
            "dir": "row",
            "pad": [
              1,
              4
            ],
            "align": "center",
            "border": "all",
            "radius": "full",
            "children": [
              {
                "el": "text",
                "color": "text",
                "slot": "sectionLabel",
                "role": "label",
                "font": "mono"
              }
            ]
          },
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "step": 5,
            "weight": 700,
            "leading": "tight",
            "maxCh": 16
          },
          {
            "el": "text",
            "slot": "lead",
            "role": "lead",
            "maxCh": 40
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "body",
            "role": "body",
            "maxCh": 56
          }
        ]
      },
      {
        "el": "box",
        "span": "7-12",
        "gap": 3,
        "children": [
          {
            "el": "media",
            "slot": "image",
            "aspect": "4/3",
            "treatment": "dot-matrix",
            "frame": "rounded"
          },
          {
            "el": "repeat",
            "slot": "stats",
            "min": 3,
            "max": 3,
            "layout": "grid",
            "cols": 3,
            "phoneCols": 3,
            "gap": 3,
            "of": {
              "el": "box",
              "bg": "surface",
              "gap": 4,
              "pad": [
                4,
                4
              ],
              "justify": "between",
              "radius": "md",
              "children": [
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "title",
                  "role": "label",
                  "font": "mono"
                },
                {
                  "el": "text",
                  "slot": "number",
                  "role": "number",
                  "step": 5,
                  "weight": 700,
                  "leading": "tight"
                }
              ]
            }
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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