stats.seventies-bubble-figures · Bubble figures

A stats pattern from Seventies Psychedelic, 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.seventies-bubble-figures". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A centred step-5 title, then four rounded surface capsules two by two across 1–12 (wide cells, padded 32 px): a step-5 figure in the link colour over a body-size caption; one per row on phone.
Slots
title, stats[4..4]
Grid areas
title 1-12 · bubbles 1-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #F7E8C6 · text #3A1D0C · heading #4A1F08 · accent #D2561E · accent2 #BF8400 · Shrikhand / Nunito · radius 32px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 8

Pattern notes

  • A centred title (step 5), then four rounded `surface` bubbles two by two across 1–12 (wide cells, so a figure like "9 of 10" sets at full size), padded 32 px: a fat orange numeral at step 5 at the top and a body-size centred caption pinned to the bottom, so captions line up across each row. 64 px of section padding. At phone width one per row.

Twelve years in numbers

140+

launches shipped

12

years independent

9 of 10

clients return

31%

average lift in demo requests