Slopless Design

stats.athletic-scoreboard · Scoreboard

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

Rule

A full-bleed accent2 band: italic title across the grid, then three or four giant italic figures (step 7) in a four-column row, each behind a 4 px left rule, with an uppercase label pinned to the bottom of its column.

Slots

title, stats[3..4]

Grid areas

title 1-12 · scores 1-12 (12-column grid, 1-based inclusive spans)

Tokens

bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #FF3B00 · accent2 #00A1BA · Barlow Condensed / Barlow · radius 0px · space unit 8px (full list in design/tokens.json)

Section

background accent2 · full-bleed

Pattern notes

A full-bleed accent2 band. The italic caps title at step 4 across the grid, then three or four scores in a four-column row, each behind a 4 px left rule: the figure at step 7 (italic, weight 900) on top and an italic caps label pinned to the bottom of the column so labels line up, all onAccent2.

Twelve years in numbers

140+

launches shipped

years independent

9 of 10

clients return

31%

average lift in demo requests