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 · Saira Extra Condensed 800, italic for hero
Game Night
Pacific Division Standings
Numbers and scores · Oswald 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 (5). No team logos, crests or wordmarks are used anywhere.
Sleeve stripes
Stanley Cups: 5
Oilers navy and orange, in light and dark. Orange fails contrast on white at small sizes, so light mode uses a darker accent ink for text and keeps bright orange for fills with dark text. Dark mode uses navy as the page background.
| 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 | 15.29:1 | Pass ≥4.5 |
| Card texttext / surface-raised | 16.54:1 | Pass ≥4.5 |
| Table stripe texttext / surface-sunken | 13.93:1 | Pass ≥4.5 |
| Secondary texttext-muted / surface | 6.62:1 | Pass ≥4.5 |
| Secondary text on cardstext-muted / surface-raised | 7.17:1 | Pass ≥4.5 |
| Links and accent textaccent-ink / surface | 5.47:1 | Pass ≥4.5 |
| Links on cardsaccent-ink / surface-raised | 5.92:1 | Pass ≥4.5 |
| Header and navheader-text / header-bg | 16.54:1 | Pass ≥4.5 |
| Active nav indicatorheader-accent / header-bg | 4.95:1 | Pass ≥3 |
| Primary buttonbutton-text / button-bg | 4.95: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.35:1 | Pass ≥3 |
| Input borders on cardsborder-strong / surface-raised | 3.63:1 | Pass ≥3 |
| Chart: Oilers markschart-us / surface-raised | 4.30:1 | Pass ≥3 |
| Chart: opponent markschart-them / surface-raised | 5.28: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 | 15.14:1 | Pass ≥4.5 |
| Card texttext / surface-raised | 12.96:1 | Pass ≥4.5 |
| Table stripe texttext / surface-sunken | 16.75:1 | Pass ≥4.5 |
| Secondary texttext-muted / surface | 8.06:1 | Pass ≥4.5 |
| Secondary text on cardstext-muted / surface-raised | 6.90:1 | Pass ≥4.5 |
| Links and accent textaccent-ink / surface | 5.79:1 | Pass ≥4.5 |
| Links on cardsaccent-ink / surface-raised | 4.96:1 | Pass ≥4.5 |
| Header and navheader-text / header-bg | 18.31:1 | Pass ≥4.5 |
| Active nav indicatorheader-accent / header-bg | 5.48:1 | Pass ≥3 |
| Primary buttonbutton-text / button-bg | 5.48:1 | Pass ≥4.5 |
| Win labelwin / surface-raised | 8.13:1 | Pass ≥4.5 |
| Loss labelloss / surface-raised | 6.20:1 | Pass ≥4.5 |
| Input and toggle bordersborder-strong / surface | 4.48:1 | Pass ≥3 |
| Input borders on cardsborder-strong / surface-raised | 3.84:1 | Pass ≥3 |
| Chart: Oilers markschart-us / surface-raised | 4.35:1 | Pass ≥3 |
| Chart: opponent markschart-them / surface-raised | 4.55:1 | Pass ≥3 |