Slopless Design

stats.synthwave-hiscore-board · Hi-score board

A stats pattern from Synthwave Retro-Future, 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.synthwave-hiscore-board". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

A centred neon-outlined scoreboard on 2–11: HIGH SCORES title at step 4, then ranked rows of rank, name and a right-aligned mono score at step 5.

Slots

title, stats[3..5]

Grid areas

board 3-10 · rank 1-2 · name 3-8 · score 9-12 (12-column grid, 1-based inclusive spans)

Notes

Rows inside the board use their own 12-column grid. The first row's score may glow in accent.

Tokens

bg #0E0B1F · text #EDE6FF · heading #FFFFFF · accent #FE2D6D · accent2 #00A59F · Orbitron / Space Grotesk · radius 2px · space unit 8px (full list in design/tokens.json)

Pattern notes

A neon-outlined board centred on 2–11, padded 48 px: a chrome "high scores" title at step 4 centred, then 3–5 ruled rows, each one line on every width: the mono rank/tag (link colour) stacked over the mono name at body size on the left, the mono score right-aligned at step 5. The top score may glow.

Twelve years in numbers

Since 2014

launches shipped

140+

2025

years independent

Audited

clients return

9 of 10

Last 12 months

average lift in demo requests

31%