02 — Foundations
Typography
Two typeface roles: Barlow Condensed is the primary headline font — used for all display text, headings, and live scores. Inter handles all UI body text and labels. A 9-level scale ensures consistent hierarchy.
Type Specimen
PREMIER
Barlow Condensed ExtraBold · Display · 80px
CAROLINA
Barlow Condensed Bold · H1 · 56px
Soccer League
Inter Bold · H3 · 28px
CPSL · Week 18 · Charlotte FC 3–1 Raleigh Athletic · Saturday, February 22, 2026
Inter Regular · Body · 15px
Type Scale
| Level | Size | Weight | Line Ht | Tracking | Typeface | Usage |
|---|---|---|---|---|---|---|
| Display | 72px | 700 | 1.0 | -2px | Barlow Condensed | Hero headlines, scoreboard scores |
| H1 | 48px | 700 | 1.05 | -1px | Barlow Condensed | Page titles |
| H2 | 36px | 700 | 1.1 | -0.5px | Barlow Condensed | Section headers |
| H3 | 24px | 700 | 1.2 | -0.3px | Inter | Card titles, subsections |
| H4 | 20px | 600 | 1.3 | -0.2px | Inter | Component headings |
| Body L | 18px | 400 | 1.6 | 0 | Inter | Long-form content |
| Body | 15px | 400 | 1.6 | 0 | Inter | Default body text |
| Small | 13px | 500 | 1.5 | 0 | Inter | Labels, captions |
| Caption | 11px | 600 | 1.4 | 0.5px | Inter | Tags, legal, metadata |
Accessibility Rules
✓ Minimum body 15px
15px for UI labels. 11px only for metadata with sufficient contrast and uppercase treatment.
✓ No font below 11px
Use abbreviations or tags rather than reducing font size further on any surface.
✓ WCAG 4.5:1 for body text
Large text (18px+ regular or 14px+ bold) only requires 3:1. Body always requires 4.5:1.
Responsive Scale
| Level | Mobile (375px) | Tablet (768px) | Desktop (1440px) |
|---|---|---|---|
| Display | 48px | 60px | 72px |
| H1 | 32px | 40px | 48px |
| H2 | 24px | 30px | 36px |
| Body | 15px | 15px | 15px |