list.dot-numbered-specs · Numbered specs

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

Rule
A spec sheet: label, title and a line in 1–4; six ruled rows across 5–12, each a mono index in the link colour, the spec name and a muted value.
Slots
sectionLabel, title, body, features[6..6]
Grid areas
intro 1-4 · rows 5-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

  • A spec sheet. Columns 1–4: pill label, title at step 5 (≤12 ch) and a muted line. Columns 5–12: six rows ruled with 1 px hairlines, each a 12-column sub-grid: mono index in the link colour in 1–2, the spec name (body face, 700) in 3–6, the muted value in 7–12, all on one baseline.

Index

Services

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.

05

Product naming

Names that survive trademark search and a noisy trade show.

06

Brand governance

Guidelines as a living site, not a forgotten PDF.