A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
16tokens
11type steps
1radius steps
8pxspacing base
Espn, in one page
ESPN's iOS app is a live scoreboard that happens to also be a newsroom. Everything in the design serves one goal: get the score in front of the user in under a second. The canvas is a near-black #0E0F11 (deliberately not pure black, so the scores ticker and game cards lift cleanly off it). The first thing on screen is a horizontally scrolling scores ticker — a strip of compact cards, one per game, each showing league, two team abbreviations with logos, scores in tabular numerals, and a status pill (LIVE Q3 / FINAL / 7:05 ET). Below it flows the SportsCenter feed: a mix of live game cards, breaking-news stories, highlights, and analysis. The app is dense, fast, and information-first — it is engineered for a fan glancing at it 30 times a day.
The single brand accent is ESPN Red (#D50A0A — with a brighter #CC0000 for emphatic CTAs and links). It is used with discipline: the ESPN logo block, the primary "Watch Live" / "Watch on ESPN+" call-to-action, the active bottom-tab indicator dot, story category tags ("BREAKING", "ANALYSIS"), and section accents. Red is never decoration — it means "ESPN brand", "watch this", or "this is hot". Live games get a hotter, brighter red (#FF1A1A) with a pulsing dot so a glance instantly separates in-progress from finished. Final scores dim the loser to gray; the winning team's score turns green (#1FAA59) so a result is legible without reading a single word.
The signature surfaces are the scores feed (ticker + game cards + SportsCenter stories) and the game detail screen (a big score header, team records, a live clock, drive/play info, and tabbed sections — Gamecast / Box Score / Plays / News). The defining components are the game card (league header, two team rows with logo + name + record + big tabular score, a footer with the clock and an ESPN+ watch link) and the live status badge (a pulsing-dot LIVE pill). No other sports app packs this much live state into a glanceable card.
Typography is a bold condensed-leaning sans — ESPN's brand face is a custom "ESPN" type; the closest free analog is Archivo (with its expanded weight range and slightly condensed feel). Hierarchy is built for scanning: enormous heavy headlines and scores, tight team names, small dense metadata. Weights concentrate at 400 (body/meta), 700 (team names, story titles), 800 (section headers), and 900 (headlines, screen titles, scores, status badges). Scores always use tabular (monospaced) numerals so digits stay column-aligned across every card — a non-negotiable for a scoreboard. On iOS, Archivo falls back to SF Pro (use SF Pro's .heavy/.black and a tabular numeral feature for scores).
Key Characteristics:
- Near-black canvas (
#0E0F11) — not pure black, so the ticker and cards lift cleanly - Horizontal scores ticker pinned near the top — the fastest path to "what's the score"
- SportsCenter feed — interleaved live game cards, breaking news, highlights, analysis
- Single accent — ESPN Red (
#D50A0A/ bright#CC0000) for logo, CTA, active-tab dot, tags - Live state is a hotter red (
#FF1A1A) with a pulsing dot; finals dim to gray - Winning team's score turns green (
#1FAA59) — a result readable at a glance - Game card — league header, two team rows (logo + name + record + score), clock + ESPN+ footer
- Tabular numerals on every score — digits stay column-aligned across cards
- Archivo (ESPN-style bold condensed sans) — built for scanning, not reading
- Five-tab bottom bar: Home / Scores / Watch / ESPN BET / More, active tab marked by a red dot
- Dense, information-first layout — engineered for the 30-glances-a-day fan
Do's and don'ts
Do
- Use near-black (
#0E0F11) as the canvas — NOT pure black; cards and the ticker must lift off it - Pin a horizontal scores ticker near the top — it's the fastest path to "what's the score"
- Use ESPN Red (
#D50A0A/ bright#CC0000) as the only brand accent — logo, CTA, active-tab dot, tags - Use a hotter red (
#FF1A1A) + a pulsing dot for LIVE games; dim finals to gray - Turn the winning team's score green (
#1FAA59) on finished games — a result readable at a glance - Use tabular numerals on every score, clock, record, and ranking — columns must align
- Build the game card with league header + two team rows (logo/name/record/score) + clock & ESPN+ footer
- Use Archivo (or SF Pro
.black) at heavy weights for headlines, scores, and badges - Mark the active tab with a small red dot — keep the icon white
- Keep the layout dense and information-first — fans want maximum signal per glance
Don't
- Don't use pure black (
#000000) — ESPN's ground is near-black so cards have contrast - Don't introduce a second brand accent — red is it; live red and win green are *status*, not accents
- Don't use proportional numerals for scores — digits will shift and the scoreboard breaks
- Don't hide or bury the scores ticker — it is the product's spine
- Don't use a tint pill for the active tab — ESPN uses a red dot under a white icon
- Don't let metadata (league/time/read-length) use white — it's secondary gray
#9AA0A6 - Don't drop the live pulse — motion is how ESPN says "this is happening now"
- Don't use heavy drop-shadows for structure — use surface-color steps; reserve shadow for floating UI
- Don't dim the winning score — winners are white or green, never gray
- Don't over-space the layout — ESPN's density is intentional; airy layouts feel un-ESPN
- Don't animate aggressively elsewhere — only the pulse and the score-pop are lively; the rest is calm
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Espn design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- ESPN Red: #d50a0a
- Red Bright: #cc0000
- Red Pressed: #a50808
- Near-Black Canvas: #0e0f11
- Surface 1: #18191b
- Surface 2: #212327
- Surface 3: #2b2d31
- Divider: #2a2c30
- Text Primary: #ffffff
- Text Secondary: #9aa0a6
Type:
- families: Archivo, Heavy Display, Numerals, Fallback Stack
- scale: 10, 11, 12, 13, 14, 15, 16, 18, 22
- weights: 400, 700, 800, 900
Shape:
- radius: 6
Spacing: 8, 12, 14, 16
Rules:
- Use near-black (`#0E0F11`) as the canvas — NOT pure black; cards and the ticker must lift off it
- Pin a horizontal scores ticker near the top — it's the fastest path to "what's the score"
- Use ESPN Red (`#D50A0A` / bright `#CC0000`) as the only brand accent — logo, CTA, active-tab dot, tags
- Use a hotter red (`#FF1A1A`) + a pulsing dot for LIVE games; dim finals to gray
- Turn the winning team's score green (`#1FAA59`) on finished games — a result readable at a glance
- Use tabular numerals on every score, clock, record, and ranking — columns must align
Avoid:
- Don't use pure black (`#000000`) — ESPN's ground is near-black so cards have contrast
- Don't introduce a second brand accent — red is it; live red and win green are *status*, not accents
- Don't use proportional numerals for scores — digits will shift and the scoreboard breaks
- Don't hide or bury the scores ticker — it is the product's spine
- Don't use a tint pill for the active tab — ESPN uses a red dot under a white icon
- Don't let metadata (league/time/read-length) use white — it's secondary gray `#9AA0A6`
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- ESPN Red (
#D50A0A): The core brand accent — logo block, active-tab indicator dot, section accents, primary surfaces of brand identity. - Red Bright (
#CC0000): Emphatic CTAs and links — "Watch on ESPN+", story category tags, inline links. - Red Pressed (
#A50808): Pressed state of the red CTA.
Canvas & Surfaces (Dark — the primary mode)
- Near-Black Canvas (
#0E0F11): Primary canvas — not pure black, so cards and the ticker lift. - Surface 1 (
#18191B): Game-card body, story containers. - Surface 2 (
#212327): Ticker chips, card headers, score rows, search field. - Surface 3 (
#2B2D31): Pressed rows, "FINAL" badge fill, chips. - Divider (
#2A2C30): Hairline dividers between team rows, stories, and sections.
ESPN's app is dark-first. A light theme exists in some surfaces but the scoreboard identity (near-black ground, red accent, green-winner) is defined in dark; this spec documents the dark system.
Text
- Text Primary (
#FFFFFF): Headlines, team names, scores, screen titles — pure white. - Text Secondary (
#9AA0A6): Metadata (league · time · read-length), team records, losing-team scores, inactive tab labels. - Text Tertiary (
#6B7075): Disabled actions, "FINAL" label text, very low-emphasis captions.
Brand & Status Accents
| Role | Color | Usage |
|---|---|---|
| ESPN Red | #D50A0A | Logo block, active-tab dot, section accents |
| Red Bright | #CC0000 | "Watch on ESPN+" link, category tags, inline links |
| Live Red | #FF1A1A | LIVE badge fill + pulsing dot — in-progress games |
| Win Green | #1FAA59 | The winning team's score on a finished game |
| Rank Gold | #F2C200 | Top-25 / ranking numerals, "#1 seed" emphasis |
Semantic
- Error Red (
#E5484D): Network/feed-failure banner, destructive confirm (distinct from brand red). - Success / Win (
#1FAA59): Winning score, "Following" confirmation toast. - Live / Alert (
#FF1A1A): Live games, breaking-alert banner pulse. - Pulse Dot: a small filled circle that animates opacity 1 → 0.4 → 1 over ~1.2s beside the LIVE label.
Type scaleRead the full spec
Font Family
- Primary: ESPN's brand face is a proprietary condensed sans. The closest free analog is Archivo (by Omnibus-Type, SIL OFL) — a grotesque with a slightly condensed feel and a wide weight range (400–900), well-suited to dense sports UI.
- Heavy Display:
Archivoweight 900 (Black), occasionally italic — used for headlines, scores, and status badges; the energetic sports voice. - Numerals: Scores and clocks must use tabular (monospaced) figures —
font-variant-numeric: tabular-nums/ SF Pro's.monospacedDigit— so digits stay column-aligned. - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Archivo', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - iOS Note: Without Archivo bundled, fall back to SF Pro
.heavy/.blackand apply.monospacedDigit()on all scores/clocks.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Title | Archivo | 32pt | 900 | 1.1 | -0.5pt | "Scores", "Watch" large nav titles |
| Headline | Archivo | 26pt | 900 | 1.15 | -0.3pt | Lead-story headline |
| Section Header | Archivo | 22pt | 800 | 1.2 | -0.2pt | "Top Headlines", "Today's Games" |
| Team Name | Archivo | 18pt | 700 | 1.2 | 0pt | "Los Angeles Lakers" on the game card |
| Body | Archivo | 16pt | 400 | 1.5 | 0pt | Article body, game summary |
| Story Title | Archivo | 15pt | 700 | 1.3 | 0pt | Feed story headline (compact) |
| Score (large) | Archivo | 26pt | 900 | 1.0 | 0pt | Game-card team score — tabular |
| Score (ticker) | Archivo | 13pt | 700 | 1.0 | 0pt | Ticker team score — tabular |
| Meta Line | Archivo | 14pt | 400 | 1.4 | 0pt | "NBA · 14m ago · 3 min read" |
| Team Record | Archivo | 12pt | 400 | 1.3 | 0pt | "48–34 · Home" |
| Button Label | Archivo | 16pt | 800 | 1.0 | 0.3pt | "Watch Live", "Follow Team" |
| Status Badge | Archivo | 11pt | 900 | 1.0 | 0.5pt | LIVE / FINAL / 7:05 ET (uppercase) |
| Category Tag | Archivo | 10pt | 900 | 1.0 | 0.5pt | "BREAKING", "ANALYSIS" (uppercase, red) |
| Tab Label | Archivo | 10pt | 700 | 1.0 | 0.1pt | Bottom-tab labels |
Principles
- Tabular numerals everywhere there's a number: scores, clocks, records, rankings — non-negotiable for a scoreboard; digits never shift.
- Scanning rhythm, not reading rhythm: enormous 900-weight headlines and scores, tight team names, dense meta — built for a 1-second glance.
- Uppercase only for badges, category tags, and league labels — never for headlines or body.
- Body and meta stay 400 — only headlines, team names, scores, and CTAs get weight.
- Metadata is secondary gray (
#9AA0A6) — league/time/read-length never compete with the headline or score. - Dynamic Type: headlines, body, meta scale; ticker scores, status badges, tab labels, the pulse dot stay FIXED (the ticker is a fixed-height strip).
Components and layoutRead the full spec
Buttons
Primary Button ("Watch Live")
- Shape: Rounded rectangle, 6pt corner radius (ESPN runs tighter radii than most — sharp, sporty)
- Background:
#D50A0A(ESPN Red) - Text + leading play glyph:
#FFFFFF, Archivo 16pt weight 800, 0.3pt tracking - Padding: 14pt vertical, 28pt horizontal (or full-width on detail screens)
- Pressed: background
#A50808+ scale 0.98 - Disabled: background
#212327, text#6B7075
Secondary / Outline Button ("Follow Team")
- Background: transparent
- Border: 1.5pt
rgba(255,255,255,0.35) - Text:
#FFFFFF, Archivo 14pt weight 700 - Padding: 12pt vertical, 20pt horizontal
- Corner radius: 6pt
- Pressed: background
rgba(255,255,255,0.06); once following, fills#D50A0A
Ghost Button ("Gamecast")
- Background:
#212327 - Text:
#FFFFFF, Archivo 14pt weight 700 - Corner radius: 6pt
- Padding: 12pt vertical, 20pt horizontal
Text Button ("Full box score")
- Background: none
- Text:
#CC0000(Red Bright), Archivo 14pt weight 800 - No underline
- Pressed: opacity 0.6
Game Card (the core atom)
The single most important ESPN component — a glanceable summary of one game.
- Container:
#18191B, 12pt corner radius, 1pt#2A2C30border - Header:
#212327strip, league/series label (Archivo 11pt weight 800#9AA0A6, uppercase, 0.5pt tracking) on the left; status on the right — LIVE pill (#FF1A1A+ pulsing dot) / "FINAL" (gray) / start time - Team row (×2): team logo (30pt circle) + name (Archivo 18pt weight 700
#FFFFFF) + record (Archivo 12pt weight 400#9AA0A6) on the left; big score (Archivo 26pt weight 900, tabular) on the right - Live/leading or winning team: score
#FFFFFF(or#1FAA59if the game is final and they won) - Trailing/losing team: score
#9AA0A6(dimmed) - 1pt
#2A2C30divider between the two team rows - Footer:
#0E0F11-toned strip, top 1pt divider — live clock (Archivo 13pt weight 700#FFFFFF, e.g. "Q3 · 4:12") on the left; "Watch on ESPN+" link (Archivo 12pt weight 800#CC0000+ play glyph) on the right - Pressed: scale 0.98, 150ms ease-out → pushes the game detail screen
Scores Ticker (signature component)
- A horizontally scrolling strip pinned near the top, ~fixed height, 1pt
#2A2C30bottom border - Each chip:
#212327, 8pt corner radius, ~116pt wide, 8–10pt padding - Chip header: league (Archivo 10pt weight 800
#9AA0A6) + status (LIVE#FF1A1Apill / "FINAL" gray / start time) - Two team lines: abbreviation + 16pt logo dot on the left, score (Archivo 13pt weight 700, tabular) on the right
- Winning/leading team line
#FFFFFF; other line#9AA0A6 - Tapping a chip opens the game detail screen
- Horizontal scroll only; never wraps — the ticker is a one-line glance
SportsCenter Story Row
- Container: full width, 14pt vertical padding, 1pt
#2A2C30bottom divider - Thumbnail: 96×72pt, 8pt corner radius (image or sport-tinted placeholder)
- Category tag: Archivo 10pt weight 900 uppercase
#CC0000, 0.5pt tracking — "BREAKING" / "ANALYSIS" / "HIGHLIGHT" - Title: Archivo 15pt weight 700
#FFFFFF, 4pt below tag, 2-line clamp - Meta: Archivo 12pt weight 400
#9AA0A6, 6pt below title — "NBA · 14m ago · 3 min read" - 12pt gap between thumbnail and text column
Navigation
Bottom Tab Bar
- Height: 50pt + safe area (≈64pt total)
- Background:
rgba(14,15,17,0.96)withbackdrop-filter: blur(20px) saturate(180%), 0.5pt top border#2A2C30 - Tabs (5): Home, Scores, Watch, ESPN BET, More
- Icon size: 22pt
- Active: glyph + label
#FFFFFF, plus a small#D50A0Aindicator dot below the label - Inactive: glyph + label
#6B7075 - Labels: Archivo 10pt weight 700, always shown
- The red dot (not a tint pill) is the active marker — ESPN keeps the icon white and uses red only as the indicator
Top Bar (Home / feed)
- Height: 44pt + safe area
- Background:
#0E0F11 - Leading: ESPN red logo block
- Trailing: search glyph + alerts bell, 22pt,
#FFFFFF - The scores ticker sits directly beneath the top bar (pinned above the scrolling feed)
Top Bar (game detail)
- Compact: back chevron + matchup label + share + alert-toggle
- Below: the big score header (team logos, names, big tabular scores, live clock) then a tabbed control (Gamecast / Box Score / Plays / News)
Input Fields
Search Field
- Height: 44pt
- Background:
#212327 - Corner radius: 6pt
- Leading icon: magnifier 16pt
#9AA0A6 - Placeholder: "Search teams, players, news" Archivo 15pt weight 400
#6B7075 - Text:
#FFFFFF - Focus: 1.5pt
#D50A0Aborder
Tabbed Control (game detail: Gamecast / Box Score / Plays / News)
- A row of items, Archivo 14pt weight 800 —
#9AA0A6inactive,#FFFFFFactive - Active indicator: 3pt
#D50A0Aunderline beneath the active item, slides 200ms ease-out - Sits above a 1pt
#2A2C30divider
Distinctive Components
Live Status Badge
- Pill,
#FF1A1Afill, Archivo 11pt weight 900 uppercase#FFFFFF, 0.5pt tracking, 4×9pt padding, 3pt radius - Leading 6pt white pulsing dot (opacity 1 → 0.4 → 1 over ~1.2s)
- Variants: LIVE (+ period, e.g. "LIVE Q3"), FINAL (
#2B2D31fill,#9AA0A6text, no dot), start time (transparent + 1ptrgba(255,255,255,0.4)outline, white text)
Winning-Score Treatment
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Ticker chips ≈ 110pt; single-column feed; tab labels stay |
| iPhone 13/14/15 | 390pt | Standard layout; ticker chips ≈ 116pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated by the top bar; ticker sits below it |
| iPhone 15/16 Pro Max | 430pt | Ticker chips ≈ 124pt; larger game cards |
| iPad (portrait) | 768pt | 2-column feed; game detail = score header + tabbed pane |
| iPad (landscape) | 1024pt+ | 2–3 column feed; persistent ticker; multi-pane game detail |
Dynamic Type
- Scales: headlines, section headers, body, story titles, meta
- Fixed: ticker scores + chips, status badges, tab labels, the pulse dot, the game-card score size (the card is a fixed-rhythm scoreboard)
- Long headlines wrap to 2 lines; story titles clamp to 2 lines
Orientation
- Portrait-primary for the feed; the video player (Watch / ESPN+) is landscape full-screen
- iPad supports landscape with a wider multi-column feed and a persistent ticker
Touch Targets
- Primary CTA: 48pt+ tall
- Tab icons: 22pt glyph, 49pt+ hit area
- Ticker chip: full-chip tap, ≥56pt tall
- Game card: full-card tap, ≥120pt tall
- Story row: full-row tap, ≥72pt tall
Safe Area Handling
- Top: top bar + pinned ticker respect the safe area and the Dynamic Island
- Bottom: bottom tab bar + home indicator respected; the persistent watch mini-bar (if playing) sits above the tab bar
- The ticker is pinned (not under the status bar) — it stays glanceable while the feed scrolls beneath it
- Sides: 16pt content inset; the ticker is full-bleed horizontal scroll
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-espn {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #555555;
--heading-color: #555555;
--link-color: #cc0000;
--link-hover-color: #990000;
--border-color: #e0e0e0;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(85,85,85,0.06);
--card-hover-shadow: 0 6px 18px rgba(85,85,85,0.12);
--header-bg: #555555;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #737373;
--button-bg: #cc0000;
--button-text-color: #ffffff;
--button-hover-bg: #990000;
--button-border: none;
--button-border-radius: 6px;
--button-secondary-bg: #f5f5f5;
--button-secondary-text-color: #555555;
--button-secondary-hover-bg: #ebebeb;
--button-secondary-border: 1px solid #e0e0e0;
--prompt-bg: #f7f7f7;
--prompt-text-color: #555555;
--base-font: var(--font-sans);
--heading-font: var(--font-sans);
--card-border-radius: 6px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- crunchyroll 79.0%
- coffee meets bagel 77.0%
- substack 76.9%
- youtube music 75.7%
- peloton 75.4%
Where this came from
- Source document
ios/design-md/video/espn/DESIGN.md· 26.0 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.