Slopless Design

stats.dot-counter-tiles · Counter tiles

A stats pattern from Dot Matrix, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 4; about page, section 2. Give the section root data-pattern="stats.dot-counter-tiles". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

Four reading tiles in a row, each a mono label at the top and a dot-matrix number at step 7 with a muted note at the bottom; the intro sits above in 1–6 with the title.

Slots

sectionLabel, title, stats[4..4]

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

Signal label and title at step 5 (≤20 ch) above four reading widgets in a row (two per row on phones): a mono label at the top, the dot-matrix number at step 7 and a muted note at the bottom. No red tile here; the numbers carry it.

By the numbers

Twelve years in numbers

launches shipped

140+

Since 2014

years independent

2025

clients return

9 of 10

Audited

average lift in demo requests

31%

Last 12 months