hero.dot-transparent-device · Transparent device

A hero pattern from Dot Matrix, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="hero.dot-transparent-device". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Copy in 1–5, a device-framed halftone picture with four numbered callouts in 6–9, and the numbered key (01–04, title and one line) as a ruled list in 10–12.
Slots
eyebrow, headline, subhead, cta, cta2, heroImage, features[4..4]
Grid areas
copy 1-5 · device 6-9 · key 10-12 (12-column grid, 1-based inclusive spans)
Notes
The device frame reads as clear hardware: a thin bezel on the dot grid. Callout tags 01–04 match the key on the right exactly; the key is mono numbers in the link colour, titles in the body face.
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)
Section
vertical padding step 6

Pattern notes

  • At least 88 vh, vertically centred. Columns 1–5: signal dot and mono eyebrow, display headline at step 7 (≤11 ch), lead (≤36 ch), the two pills at medium size. Columns 6–9: the halftone picture in a thin device bezel (9:16) with four numbered callout tags (01–04) and leader lines. Columns 10–12: the matching key as a ruled list: mono index in the link colour, the title in the body face (700) and one muted line. Leaders hide on phones; the key follows the device.

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

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": "hero.dot-transparent-device",
  "kind": "hero",
  "grid": {
    "copy": "1-5",
    "device": "6-9",
    "key": "10-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "heroImage",
    "features[4..4]"
  ],
  "notes": "The device frame reads as clear hardware: a thin bezel on the dot grid. Callout tags 01–04 match the key on the right exactly; the key is mono numbers in the link colour, titles in the body face.",
  "tree": {
    "el": "grid",
    "gap": 8,
    "align": "center",
    "minVh": 0.88,
    "children": [
      {
        "el": "box",
        "span": "1-5",
        "gap": 6,
        "justify": "center",
        "children": [
          {
            "el": "box",
            "mobile": "keep",
            "dir": "row",
            "gap": 3,
            "align": "center",
            "children": [
              {
                "el": "shape",
                "kind": "circle",
                "size": "sm",
                "fill": "accent"
              },
              {
                "el": "text",
                "color": "text",
                "slot": "eyebrow",
                "role": "label",
                "font": "mono"
              }
            ]
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 7,
            "weight": 700,
            "leading": "tight",
            "maxCh": 11
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "subhead",
            "role": "lead",
            "maxCh": 36
          },
          {
            "el": "box",
            "dir": "row",
            "gap": 3,
            "wrap": true,
            "children": [
              {
                "el": "button",
                "slot": "cta",
                "variant": "primary",
                "size": "md"
              },
              {
                "el": "button",
                "slot": "cta2",
                "variant": "secondary",
                "size": "md",
                "arrow": true
              }
            ]
          }
        ]
      },
      {
        "el": "media",
        "span": "6-9",
        "slot": "heroImage",
        "aspect": "9/16",
        "treatment": "dot-matrix",
        "frame": "device",
        "callouts": 4
      },
      {
        "el": "repeat",
        "span": "10-12",
        "alignSelf": "center",
        "slot": "features",
        "min": 4,
        "max": 4,
        "layout": "list",
        "divider": true,
        "of": {
          "el": "box",
          "gap": 1,
          "pad": [
            3,
            0
          ],
          "children": [
            {
              "el": "text",
              "color": "link",
              "slot": "number",
              "role": "label",
              "font": "mono"
            },
            {
              "el": "text",
              "slot": "title",
              "role": "h4",
              "weight": 700,
              "font": "body"
            },
            {
              "el": "text",
              "color": "textMuted",
              "slot": "body",
              "role": "small",
              "maxCh": 30
            }
          ]
        }
      }
    ]
  }
}

Other patterns in this design

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