Design system
Every colour, font and component, in light and dark. The page itself follows the mode you pick in the header; the previews below are fixed.
Display · Rokkitt 800
Game Night
Pacific Division Standings
Numbers and scores · Rokkitt 700
4–2
#97 · #29
UI and body · Barlow 400–600
Clean, industrial body copy that sits comfortably next to the condensed display faces. Semibold for emphasis, italic for asides.
Secondary text at 14px, used for captions and timestamps.
Stat tables · Barlow with tabular numerals
| 1111.11 | 158.730 |
| 22.20 | 3.171 |
| 333.33 | 47.619 |
Sleeve stripes divide sections and a dot beside the name marks each Stanley Cup (24). No team logos, crests or wordmarks are used anywhere.
Sleeve stripes
Stanley Cups: 24
Montreal Canadiens colours (#AF1E2D and #192168) on the Oilers layout, in light and dark. Every colour that carries text was nudged darker (light) or lighter (dark) until it passes the same contrast checks as the Oilers theme; the club's own colours are kept for fills.
| Player | GP | G | A | P |
|---|---|---|---|---|
| Skater A | 10 | 6 | 11 | 17 |
| Skater B | 10 | 7 | 5 | 12 |
| Skater C | 9 | 2 | 8 | 10 |
| Pair | Ratio | AA |
|---|---|---|
| Body texttext / surface | 11.33:1 | Pass ≥4.5 |
| Card texttext / surface-raised | 12.02:1 | Pass ≥4.5 |
| Table stripe texttext / surface-sunken | 10.42:1 | Pass ≥4.5 |
| Secondary texttext-muted / surface | 5.02:1 | Pass ≥4.5 |
| Secondary text on cardstext-muted / surface-raised | 5.32:1 | Pass ≥4.5 |
| Links and accent textaccent-ink / surface | 13.57:1 | Pass ≥4.5 |
| Links on cardsaccent-ink / surface-raised | 14.40:1 | Pass ≥4.5 |
| Header and navheader-text / header-bg | 6.89:1 | Pass ≥4.5 |
| Active nav indicatorheader-accent / header-bg | 6.89:1 | Pass ≥3 |
| Primary buttonbutton-text / button-bg | 14.40:1 | Pass ≥4.5 |
| Win labelwin / surface-raised | 5.42:1 | Pass ≥4.5 |
| Loss labelloss / surface-raised | 6.57:1 | Pass ≥4.5 |
| Input and toggle bordersborder-strong / surface | 3.05:1 | Pass ≥3 |
| Input borders on cardsborder-strong / surface-raised | 3.24:1 | Pass ≥3 |
| Chart: Oilers markschart-us / surface-raised | 14.40:1 | Pass ≥3 |
| Chart: opponent markschart-them / surface-raised | 5.02:1 | Pass ≥3 |
| Player | GP | G | A | P |
|---|---|---|---|---|
| Skater A | 10 | 6 | 11 | 17 |
| Skater B | 10 | 7 | 5 | 12 |
| Skater C | 9 | 2 | 8 | 10 |
| Pair | Ratio | AA |
|---|---|---|
| Body texttext / surface | 13.05:1 | Pass ≥4.5 |
| Card texttext / surface-raised | 11.34:1 | Pass ≥4.5 |
| Table stripe texttext / surface-sunken | 15.47:1 | Pass ≥4.5 |
| Secondary texttext-muted / surface | 6.11:1 | Pass ≥4.5 |
| Secondary text on cardstext-muted / surface-raised | 5.31:1 | Pass ≥4.5 |
| Links and accent textaccent-ink / surface | 5.34:1 | Pass ≥4.5 |
| Links on cardsaccent-ink / surface-raised | 4.64:1 | Pass ≥4.5 |
| Header and navheader-text / header-bg | 17.16:1 | Pass ≥4.5 |
| Active nav indicatorheader-accent / header-bg | 17.16:1 | Pass ≥3 |
| Primary buttonbutton-text / button-bg | 4.69:1 | Pass ≥4.5 |
| Win labelwin / surface-raised | 7.05:1 | Pass ≥4.5 |
| Loss labelloss / surface-raised | 5.38:1 | Pass ≥4.5 |
| Input and toggle bordersborder-strong / surface | 3.47:1 | Pass ≥3 |
| Input borders on cardsborder-strong / surface-raised | 3.02:1 | Pass ≥3 |
| Chart: Oilers markschart-us / surface-raised | 3.14:1 | Pass ≥3 |
| Chart: opponent markschart-them / surface-raised | 4.94:1 | Pass ≥3 |