hero.dot-widget-home · Widget home screen

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-widget-home". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A home screen of widgets: the message tile in 1–7 over two rows, a red reading tile in 8–10, a round halftone widget in 11–12, a wide status widget in 8–12, and a dock of four numbered widget tiles across the full width.
Slots
eyebrow, headline, subhead, cta, cta2, caption, number, heroImage, date, meta, features[4..4]
Grid areas
message 1-7 · reading 8-10 · dial 11-12 · status 8-12 · dock 1-12 (12-column grid, 1-based inclusive spans)
Notes
Every widget is a solid tile (radius 24 px) or a full pill; gaps are 12 px both ways like a phone home screen. Only the reading tile is red; the status widget carries a ring and a dot like a toggle.
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 4

Pattern notes

  • A phone home screen. Columns 1–7 over two rows: the message widget (padding 40 × 32 px) with an outlined mono pill eyebrow, the display headline at step 7 (≤13 ch), the lead and the two pills. Columns 8–10 row 1: the red reading widget (mono caption and number at step 7 in `onAccent`). Columns 11–12 row 1: a round halftone widget. Columns 8–12 row 2: a `surfaceAlt` status widget with a mono date left and a ring plus a dot right (a toggle) at the top, and a short status line (body face, 700) at the bottom. Row 3: a dock of four numbered widgets (mono index in the link colour at the top, the title in the body face at 700 at the bottom), two per row on phones.

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

Corvid Robotics — identity

140+

Apr 3, 2026

Booking projects from June 2026

01

Positioning

02

Identity systems

03

Websites

04

Sales enablement

Layout tree (as in design/layout.json)
{
  "pattern": "hero.dot-widget-home",
  "kind": "hero",
  "grid": {
    "message": "1-7",
    "reading": "8-10",
    "dial": "11-12",
    "status": "8-12",
    "dock": "1-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "caption",
    "number",
    "heroImage",
    "date",
    "meta",
    "features[4..4]"
  ],
  "notes": "Every widget is a solid tile (radius 24 px) or a full pill; gaps are 12 px both ways like a phone home screen. Only the reading tile is red; the status widget carries a ring and a dot like a toggle.",
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 3,
    "align": "stretch",
    "children": [
      {
        "el": "box",
        "span": "1-7",
        "rowSpan": "1-2",
        "bg": "surface",
        "gap": 8,
        "pad": [
          10,
          8
        ],
        "justify": "between",
        "radius": "md",
        "children": [
          {
            "el": "box",
            "alignSelf": "start",
            "dir": "row",
            "pad": [
              1,
              4
            ],
            "align": "center",
            "border": "all",
            "radius": "full",
            "children": [
              {
                "el": "text",
                "color": "text",
                "slot": "eyebrow",
                "role": "label",
                "font": "mono"
              }
            ]
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 7,
            "weight": 700,
            "leading": "tight",
            "maxCh": 13
          },
          {
            "el": "box",
            "gap": 6,
            "children": [
              {
                "el": "text",
                "color": "textMuted",
                "slot": "subhead",
                "role": "lead",
                "maxCh": 44
              },
              {
                "el": "box",
                "dir": "row",
                "gap": 3,
                "wrap": true,
                "children": [
                  {
                    "el": "button",
                    "slot": "cta",
                    "variant": "primary",
                    "size": "lg"
                  },
                  {
                    "el": "button",
                    "slot": "cta2",
                    "variant": "secondary",
                    "size": "lg",
                    "arrow": true
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "el": "box",
        "span": "8-10",
        "rowSpan": "1-1",
        "bg": "accent",
        "gap": 6,
        "pad": [
          5,
          5
        ],
        "justify": "between",
        "radius": "md",
        "children": [
          {
            "el": "text",
            "color": "onAccent",
            "slot": "caption",
            "role": "label",
            "font": "mono"
          },
          {
            "el": "text",
            "color": "onAccent",
            "slot": "number",
            "role": "number",
            "step": 7,
            "weight": 700,
            "leading": "tight"
          }
        ]
      },
      {
        "el": "media",
        "span": "11-12",
        "rowSpan": "1-1",
        "alignSelf": "center",
        "slot": "heroImage",
        "treatment": "dot-matrix",
        "frame": "circle"
      },
      {
        "el": "box",
        "span": "8-12",
        "rowSpan": "2-2",
        "bg": "surfaceAlt",
        "gap": 6,
        "pad": [
          5,
          6
        ],
        "justify": "between",
        "radius": "md",
        "children": [
          {
            "el": "box",
            "mobile": "keep",
            "dir": "row",
            "gap": 4,
            "align": "center",
            "justify": "between",
            "children": [
              {
                "el": "text",
                "color": "textMuted",
                "slot": "date",
                "role": "label",
                "font": "mono"
              },
              {
                "el": "box",
                "mobile": "keep",
                "dir": "row",
                "gap": 2,
                "align": "center",
                "children": [
                  {
                    "el": "shape",
                    "kind": "ring",
                    "size": "sm",
                    "fill": "heading"
                  },
                  {
                    "el": "shape",
                    "kind": "circle",
                    "size": "sm",
                    "fill": "heading"
                  }
                ]
              }
            ]
          },
          {
            "el": "text",
            "slot": "meta",
            "role": "h4",
            "weight": 700,
            "maxCh": 26,
            "font": "body"
          }
        ]
      },
      {
        "el": "repeat",
        "span": "1-12",
        "slot": "features",
        "min": 4,
        "max": 4,
        "layout": "grid",
        "cols": 4,
        "phoneCols": 2,
        "gap": 3,
        "of": {
          "el": "box",
          "bg": "surface",
          "gap": 8,
          "pad": [
            4,
            5
          ],
          "justify": "between",
          "radius": "md",
          "children": [
            {
              "el": "text",
              "color": "link",
              "slot": "number",
              "role": "label",
              "font": "mono"
            },
            {
              "el": "text",
              "slot": "title",
              "role": "h4",
              "weight": 700,
              "maxCh": 18,
              "font": "body"
            }
          ]
        }
      }
    ]
  }
}

Other patterns in this design

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