Sportradar Design System Deep Dive

1. Brand Overview

Sportradar’s web presence is a tech-first sports data powerhouse—in the design language as much as in the product offering. You're greeted by a clean, straightforward interface that feels more enterprise SaaS than consumer sports entertainment. And that’s intentional. This is not a site trying to romanticize the game, it’s selling precision—live sports data and analytics, the nervous system behind betting platforms and leagues.

The vibe: serious, confident, capable. And slightly understated. The primary palette lives in heavy neutrals (#212529, pure white) with surgical injections of high-energy reds (#ff0000, #ea3323) and tech blues (#007bff). The typography’s muscular Source Sans Pro heading set (weights 600–900) anchors the brand with authority. No decorative flourishes, no rounded, playful theming—it's straight, angular, data-led.

Functionally, it feels designed for stakeholders—execs, developers, partners—not casual fans. The layouts are clean, grid-based, responsive, with consistent spacing multiples of 8px. There’s sparing ornamentation: light shadows for depth, occasional borders, tight radius control. Iconography is all SVG, consistent with a performance-focused asset pipeline.

The whole thing says: “Our product is numbers at speed. We don’t waste pixels.” I like this. It avoids the common sports brand trap of overusing stadium glamour and instead builds trust via clarity. This design is for decision makers who think in APIs, not halftime shows.

2. Color System

2.1 Primary Colors

Primary semantic color in the data: pure white #ffffff (rgb(255,255,255)). That’s an odd “primary”—effectively using white as the main background/surface tone, with dark text (#212529) and accent colors carrying the brand.

The literal “brand punch” comes from the reds:

• #ff0000 — a fully saturated red, used in navigation buttons and swiper controls.
• #c02b0a — darker, earthy red.
• #ea3323 — brighter, warm red.

These stand against deep neutrals and occasional blue pops (#007bff)—the blue here is very Bootstrap-esque, friendly to data visualisation and link highlighting.

Compared to competitors in sports data, Sportradar’s red focus is atypical—most lean heavy on blues and greens to signal trust/speed. Sportradar’s red signals urgency, power, high stakes—aligned with betting environments.

2.2 Complete Palette

CSS Vars present but admin-oriented:

• --wp-admin-theme-color: #007cba
• --wp-admin-theme-color-darker-10: #006ba1
• --wp-admin-theme-color-darker-20: #005a87
• --wp-bound-block-color: #7a00df

2.3 Color Relationships

Contrast’s solid: #212529 against #ffffff is WCAG AAA for readability. Red on dark is fine for attention-grab. Red (#ff0000) on white—AAA for large text, borderline AA for smaller UI text due to saturation-induced blur. Blue (#007bff) on white—standard accessible link style.

The palette is light mode by default—no explicit dark mode token set. Navy (#00003c) could become a base in dark mode, but current design uses it sparingly.

2.4 Usage Guide

• White base (#ffffff) with dark neutral (#212529) text is default.
• Use #ff0000 ONLY for active interactive elements—buttons, key indicators.
• Use #007bff for links—keeps them visually distinct from red CTAs.
• Avoid pairing #ff0000 and #ea3323 together—too close in hue, but different warmth creates clash.
• #00003c is for structural elements—not body text.
• All spacing and layout should preserve high-contrast pairings—no red text on navy background unless at large type sizes.

3. Typography

3.1 Font Families

Main font: Source Sans Pro (headings, links, body, buttons). Also Roboto present in a few places—likely for captions/UI meta text.

No Google/Adobe Fonts indicated—likely locally hosted.

3.2 Type Scale

3.3 Hierarchy

The scale is tight—small size increments, but jump from 88px to 55px for hero sections is visually massive. Lots of heavy weights (700–900) for headings—creates dominance and authority. Roboto’s lighter weight roles keep secondary content understated.

Line heights trend low for headings (1.00–1.08), which works for single-line sports data headlines. Body/link line heights loosen to ~1.27–1.5 for readability in copy blocks.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. The data has values like 1, 2, 5, and 8px, but major spacing tokens are multiples of 8px: 8, 16, 20, 24, 32, 40, 50, 60, 100px.

4.2 Layout

Breakpoints present:

• xs: 575px, sm: 576px, md: 768px, tablet: 800–801px, content width shift: 980px, layout jump: 1024px, 1100px, wide: 1200px, max wide: 1480px.

Looks like they’re controlling both tablet and large-screen breakpoints tightly—980px likely where nav changes.

5. Visual Elements

Border Radius

Values:

• 0px used widely—gives a sharp, data-led aesthetic.
• 2px: rare, probably badges.
• 4px: small rounding for group components.
• 4.8px: modals—slightly softened.
• 50%: circles for bullets/buttons.

Shadows

• Main shadow: rgba(0,0,0,0.26) 0px 2px 11px 0px — used for depth on floating elements, cards.
• Minimal use—reinforces serious tone.
• Occasional rgb(128,128,128) 0px 0px 5px 0px — less common.

Borders

A lot of 1px solids—#00003c, red (#ff0000), black (#000000), light greys. Use borders for separation more than shadows.

6. Components

6.1 Buttons

Variants:

1. Text link as button:

   • Default: bg transparent, color #000000, padding top 15px, no border radius, no border.
   • Hover: light grey semi-transparent background, color via var, opacity 0.9.
   • Font: 16px, weight 600.

2. Circular red button:

   • Default: bg #ff0000, color #212529, border-radius 50%, no border.
   • Font 16px, weight 400.

3. Circular navy (#00003c) button:

   • Similar to above.

4. Circular white button:

   • Same structure with bg white.

6.2 Links

7 styles:

• Link blue: #007bff, underline on hover.
• Link black: #000000, weight 600.
• Link white: #ffffff, weight 500.
• Link deep navy: #00003c, weight 400.
• Link dark neutral: #212529, weight 400.
• Link red: #ff0000, weight 400.
• Link mid grey: #6d7278, weight 400.

6.3 Forms

Inputs:

• Text/select: bg white, text black, 1px solid #00003c border, padding 5px 15px, no border radius.
• Textarea: bg white, text #212529, 1px solid #767676, padding 8px.
• Focus: no custom styling—outline reset.

Checkbox: borderless, radius 0px.

6.4 Cards

No explicit “card” component in extracted data, but shadows and border patterns suggest functional, slightly elevated panels with 0–4px radius.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-neutral: #212529;
  --color-white: #ffffff;
  --color-primary-blue: #007bff;
  --color-deep-navy: #00003c;
  --color-mid-grey: #808080;
  --color-dark-red: #c02b0a;
  --color-bright-red: #ff0000;
  --color-warm-red: #ea3323;

  /* Typography */
  --font-family-heading: "Source Sans Pro", sans-serif;
  --font-family-body: "Source Sans Pro", sans-serif;
  --font-family-alt: "Roboto", sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-25: 25px;
  --space-30: 30px;
  --space-32: 32px;
  --space-35: 35px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;
  --space-100: 100px;
  --space-110: 110px;
  --space-212: 212.344px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-modal: 4.8px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-main: 0px 2px 11px 0px rgba(0,0,0,0.26);
  --shadow-alt: 0px 0px 5px 0px rgb(128,128,128);
}

8. AI Coding Assistant Prompt

# Sportradar Design System Specification

You are a Sportradar design expert. Build UIs matching their visual language exactly.

## Brand Context
Sportradar’s design is enterprise sports data—clean, sharp, authoritative. Heavy neutrals, bold reds and controlled blues signal precision and high-stakes context. Layouts stick to an 8px grid with minimal curves.

## Colors
- Dark Neutral: #212529 — text, UI chrome
- White: #ffffff — backgrounds, surfaces
- Primary Blue: #007bff — links, accents
- Deep Navy: #00003c — headers, circular bullets
- Mid Grey: #808080 — secondary text
- Dark Red: #c02b0a — accent banners
- Bright Red: #ff0000 — primary CTA buttons, nav controls
- Warm Red: #ea3323 — secondary accents

## Typography
- Headings: "Source Sans Pro", sans-serif
- Body: "Source Sans Pro", sans-serif
- Alt: "Roboto", sans-serif

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 88px | 900 | 0.91 | Hero titles |
| H2 | 55px | 900 | 1.00 | Section headers |
| Button Large | 50px | 700 | 1.00 | Prominent CTAs |
| Heading Mid | 38px | 600 | 1.21 | Data section titles |
| Heading Small | 30px | 700 | 1.08 | Subtitles |
| Body | 20px | 600 | 1.39 | Body text |
| Caption | 14px | 400 | 1.14 | Metadata |
| Link | 16px | 600 | 1.50 | Navigation links |

## Spacing & Grid
Base: 8px grid
Scale: 1px, 2px, 5px, 8px, 10px, 14px, 15px, 16px, 20px, 24px, 25px, 30px, 32px, 35px, 40px, 50px, 60px, 100px, 110px, 212.344px
Button padding: 15px top for text-buttons, others scale with size

## Border Radius
- 0px: default
- 2px: badges
- 4px: grouped components
- 4.8px: modals
- 50%: bullets, avatar-style circular buttons

## Shadows & Depth
- Main: rgba(0,0,0,0.26) 0px 2px 11px 0px — cards/elevated UI
- Alt: rgb(128,128,128) 0px 0px 5px 0px — rare use

## Components

### Primary Button (circular red)
```css
.btn-primary {
  background: #ff0000;
  color: #212529;
  border-radius: 50%;
  border: none;
  font-size: 16px;
  font-weight: 400;
  padding: 0;
  outline: none;
}
.btn-primary:hover {
  opacity: 0.9;
}
```

### Text Link Button
```css
.btn-link {
  background: transparent;
  color: #000000;
  padding: 15px 0 0;
  font-size: 16px;
  font-weight: 600;
}
.btn-link:hover {
  background: rgba(180,180,180,0.3);
  opacity: 0.9;
}
```

### Input Field
```css
.input {
  background: #ffffff;
  color: #000000;
  border: 1px solid #00003c;
  border-radius: 0;
  padding: 5px 15px;
}
.input:focus {
  outline: none;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 2px 11px rgba(0,0,0,0.26);
  padding: 20px;
}
```

## Layout & Responsive Rules
- Breakpoints: 575px, 576px, 768px, 800px, 801px, 980px, 1024px, 1100px, 1200px, 1480px
- Maintain container max widths according to breakpoint
- Section paddings: 40px–60px

## Interaction Rules
- Hover: underline links; background fade on buttons
- Focus: remove default outline, maintain contrast
- Transition: ~150ms ease for hover/focus
- Disabled: reduce opacity, cursor not-allowed

## DO
- Use only palette colors
- Stick to 8px grid multiples
- Keep borders sharp unless component specifies radius
- Keep heading weights heavy (600–900)
- Maintain text-decoration rules for links

## DON'T
- Introduce unapproved colors
- Mix different border-radius styles in same context
- Overuse shadows
- Set small text in red—hurts legibility
- Use blue for CTA buttons—reserve for links

## CSS Examples
Primary CTA:
```css
.cta {
  background: #ff0000;
  color: #212529;
  padding: 10px 20px;
  border-radius: 50%;
  font-weight: 400;
}
```
Card:
```css
.panel {
  background: #fff;
  padding: 25px;
  border-radius: 4px;
  box-shadow: var(--shadow-main);
}
```
Form Input:
```css
.field {
  border: 1px solid #00003c;
  padding: 5px 15px;
}
.field:focus {
  border-color: #ff0000;
}
```

9. Summary

TL;DR: Sportradar’s design system is precise, data-driven UI—sharp corners, bold reds, functional blues, heavyweight headings, sitting on an 8px grid. It’s built for speed and clarity, not ornamentation.

Brand Keywords: tech-precise, data-first, sports-authoritative, red-accented, grid-consistent