stats.bauhaus-block-figures · Block figures

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

Rule
A lowercase title at step 5 beside an accent circle, then two to four figures in a row; each number (step 7) sits in its own solid square block (accent, accent2, yellow in turn) with a lowercase label beneath.
Slots
title, stats[2..4]
Grid areas
title 1-6 · figures 1-12 (12-column grid, 1-based inclusive spans)
Notes
Cycle the block fill per figure: accent, accent2, surfaceAlt. Text on each block uses the matching on-colour.
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #0050CC · accent2 #AF0029 · Jost / Jost · radius 0px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • Title (h2 at step 5, weight 700, lowercase) on 1–6 with an accent circle beside it. Then two to four figures in one row with a 48 px gap. Each figure is a solid square block (accent / accent2 / yellow, cycling) with the number at step 7, weight 700, in the block's on-colour, bottom-left inside the block; a small lowercase label sits under the block. At phone width the blocks stack full width.

Twelve years in numbers

140+

launches shipped

12

years independent

9 of 10

clients return