Sofascore Design System Deep Dive

1. Brand Overview

Sofascore is all about sports data done neatly. If you’ve ever used it, you know—scores, stats, player ratings, all fed to you cleanly and quickly. The design language matches that mission. It’s modern sports analytics dressed in sharp, clear UI. No fluff. No unnecessary gradients or fancy textures. Everything feels like it’s optimised for speed and comprehension.

The vibe: functional minimalism with clear hierarchy. It’s not trying to look like ESPN’s magazine layouts or a betting app overloaded with promotional banners. Instead, it’s stripped to essentials: a dominant blue, clean type, restrained elevation, lots of white space. This builds trust. You immediately feel you’re in a professional stats tool, not a gambling interface.

What stands out in Sofascore’s philosophy is the consistency of system tokens. Colors, spacing, border-radii—all clearly on a controlled scale. They don’t freestyle design decisions per component. Border radii feel intentional per component category: compact pills have 24px, avatars are perfect circles, cards are 16px. Spacing always sits on a base 8px grid with some occasional 4px micro-adjustments.

The audience is both hardcore sports fans and casual checkers. Hardcore means they want data density—multiple scores, tables, stats—without clutter. Casual means they need it readable and self-explanatory. Sofascore nails that middle ground: a dense UI that still breathes.

From a branding perspective, the primary blue (rgb(55, 77, 245) / #374df5) is the anchor. This isn't a trendy teal or playful orange—it's a solid, confident sports-tech blue. Given the amount of white and neutral grays, that blue pops and clearly signals interaction states and primary actions. Secondary indicators—reds, greens, oranges—are used sparingly but purposefully for match outcomes, alerts, or status.

Overall, the Sofascore design language says: Precision first. The look is compact and utilitarian, with a few touches to keep it approachable—rounded buttons, subtle shadows, condensed type in tight spaces. This is clearly a grown-up system for people who rely on the data.

2. Color System

2.1 Primary Colors

Main brand color: rgb(55, 77, 245) → Hex #374df5. This is a strong, saturated blue with a slight lean towards purple. It reads as trustworthy tech, not corporate navy. It works well against white and neutral grays, and provides sufficient contrast for white text. It's used for:

• Primary CTA buttons
• Focus outlines
• Highlighted interactive states
• Link color variants

Psychologically, blue signals competence, trust, and calm—important for live sports where data must be credible.

Competitor comparison:

• ESPN: red—passion, urgency. Aggressive.
• LiveScore: orange—energy, warmth.
• Sofascore’s blue: steadiness, trustworthiness. Fits a stats-heavy interface.

2.2 Complete Palette

We map all extracted colors here.

Functional highlights (partial selection from CSS vars):

• --colors-status-error-default: #c7361f — Errors
• --colors-status-success-default: #15b168 — Success states
• --colors-status-alert-default: #c7921f — Warnings
• --colors-home-away-home-primary: #0BB32A — Home team primary
• --colors-home-away-away-variant: #2C3EC4 — Away team variant
• --colors-rating-s10: #DC0C00 — Low rating
• --colors-rating-s80: #00ADC4 — High rating
• --colors-playoffs-promotion-to-y: #0056a3 — Playoff status Y
• --colors-playoffs-relegation: #c1262d — Relegation danger

2.3 Color Relationships

Text contrast is generally safe: white on primary blue passes WCAG AA easily. Black/gray on white is fine. Issues could arise with rgba(..., 0.15) backgrounds—they rely on a dark text color for legibility, so avoid pairing semi-transparent light fills with light text.

Dark mode? There’s no explicit dark mode palette in extracted data, but tokens like --toastify-color-dark (#121212) suggest at least components adopt dark backgrounds.

2.4 Usage Guide

Works well:

• Primary blue with white for CTA buttons.
• Neutral gray text on white for secondary info.
• Reds and greens for match statuses—they pop against the neutral background.

Avoid:

• Too many functional colors concurrently on the same surface. Crowds the interface.
• Semi-transparent primary blue on top of busy backgrounds—it can diminish clarity.
• Using link blue (#0000ee) in buttons—it reads browser default, not brand.

3. Typography

3.1 Font Families

Primary face: Sofascore Sans — a custom family. It appears with no public Google/Adobe source, showing fallback stacks like:

• "Sofascore Sans", Arial Unicode MS, -apple-system, system-ui, Segoe UI, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol

Condensed variant: "Sofascore Sans Condensed" used for tight captions.

No variable fonts | No Google/Adobe sources — all custom.

3.2 Type Scale

Here’s the extracted type styles:

3.3 Hierarchy

Hierarchy is subtle, relying on weight rather than massive size jumps. 18px bold used for top headings. 16px bold for subheadings. Most UI text sits in 14px or 12px—tight but readable. Condensed family lets them fit ratings, times, stats in constrained width without breaking the grid.

This is data-driven design: smaller font sizes increase density, but weights + line-height preserve legibility.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid, with micro-values (1px, 2px, 4px) for fine adjustments.

4.2 Layout

Breakpoints extracted: 0px, 98px, 479px, 480px, 767px, 768px, 991px, 992px, 994px, 1343px, 1344px

Notice the tight grouping (991 vs 992 vs 994) — suggests slightly different break behaviours for specific modules.

We’re clearly in a responsive, fluid grid system. No hard “container max width” in data, but large breakpoints (~1344px) imply desktop optimisation.

5. Visual Elements

Border Radius System

All values:

Opinion: They treat radii as functional signals. Small (2px, 4px) for generic UI, mid (8px, 12px, 16px) for cards/forms, large (24px, 32px) for pills, full (50%) for avatars or round buttons.

Shadow System

Three shadows:

• rgba(34, 34, 38, 0.16) 0px 1px 4px → subtle elevation
• rgba(34, 34, 38, 0.16) 0px 1px 16px → deeper drop for modals or hover lifts
• Single #808080 0px 0px 5px — very rare

They keep shadows light to maintain clarity in dense layouts.

Borders

Common combos:

• 1px solid rgba(34,34,38,0.15) — neutral dividers
• 1px solid brand blue for focus states
• No fancy double borders—clean lines only.

6. Components

6.1 Buttons

Primary Filled

• Default: background: #ffffff, text #0c0c0d, padding 1px 16px, radius 4px, no visible border.
• Focus: outline 1px solid var(--colors-primary-default).

Primary Clear

• Transparent bg, white text, radius 4px.

Secondary Filled (Red highlight)

• Bg rgba(203, 24, 24, 0.1), text #CB1818, radius 24px, font 12px/500.

Secondary Filled (Neutral)

• Bg rgba(229, 233, 239, 0.5), text #222226, radius 24px.

Round Icon Buttons

• Bg rgba(55, 77, 245, 0.15) OR solid primary blue.
• Radius 50%.

All keep opacity at 1, hover states minimal changes—no heavy color swaps.

6.2 Links

Three variants:

• Link blue (#0000ee) — browser default style.
• Brand primary blue (#374df5).
• White (for dark backgrounds).

All text-decoration: none even on hover—underline likely added via JS under specific conditions.

6.3 Forms

Text inputs:

• Bg white, text black, no border radius.
• Focus: border-color: var(--colors-primary-default).

Very minimal—serious utilitarian style.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-primary-default: #374df5;
  --color-link-default: #0000ee;
  --color-white: #ffffff;
  --color-neutral-gray: #a4a9b3;
  --color-black: #000000;
  --color-divider-gray: #e5e9ef;
  --color-error: #c7361f;
  --color-success: #15b168;
  --color-alert: #c7921f;

  /* Semantic Vars (partial) */
  --colors-home-away-home-primary: #0BB32A;
  --colors-home-away-away-variant: #2C3EC4;
  --colors-rating-s10: #DC0C00;
  --colors-rating-s80: #00ADC4;

  /* Typography Sizes */
  --font-size-h1: 18px;
  --font-size-body-lg: 16px;
  --font-size-body: 14px;
  --font-size-body-sm: 12px;
  --font-size-caption-xs: 10px;

  /* Spacing Scale */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-112: 112px;

  /* Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill-sm: 24px;
  --radius-pill-lg: 32px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-sm: rgba(34, 34, 38, 0.16) 0px 1px 4px 0px;
  --shadow-lg: rgba(34, 34, 38, 0.16) 0px 1px 16px 1px;
}

8. AI Coding Assistant Prompt

# Sofascore Design System Specification

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

## Brand Context
Sofascore is a sports data platform with a crisp, functional design language. The brand prioritises clarity, data density, and restrained visual styling. Interactions are precise, spacing is controlled, and colors are used sparingly for meaning.

## Color Palette
- Primary Blue: #374df5 — CTAs, focus outlines, primary interactions
- Link Blue: #0000ee — secondary links
- White: #ffffff — backgrounds, button fills
- Neutral Gray: #a4a9b3 — secondary text
- Divider Gray: #e5e9ef — card borders, table dividers
- Black: #000000 — primary text
- Transparent Primary: rgba(55, 77, 245, 0.15) — icon button bg
- Error Red: #c7361f — error states
- Success Green: #15b168 — success states
- Alert Orange: #c7921f — warning states
- Home Team Green: #0BB32A — home highlight
- Away Team Blue: #2C3EC4 — away highlight
- Rating Low: #DC0C00 — player rating 10
- Rating High: #00ADC4 — player rating 80

## Typography
- Fonts: "Sofascore Sans", Arial Unicode MS, -apple-system, system-ui, Segoe UI, Helvetica, Arial
- Condensed: "Sofascore Sans Condensed" for compact captions

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 18px | 700 | 1.33 | Page titles |
| H2 | 16px | 700 | 1.25 | Section headings |
| Body L | 16px | 400 | 1.15 | Default body |
| Body | 14px | 400/500/700 | 1.14 | Buttons, captions |
| Small | 12px | 400/500/700 | 1.17 | Labels |
| XS | 10px | 500 | 1.20 | Micro captions |

## Spacing & Grid
Base: 8px grid  
Scale: 1px, 2px, 4px, 8px, 12px, 16px, 24px, 32px, 48px, 112px  
Use multiples for component padding, gaps, and section spacing.

## Border Radius
- xs: 2px — badges, small chips
- sm: 4px — buttons, inputs
- md: 8px — cards, forms
- lg: 12px — modals, larger containers
- xl: 16px — large cards
- pill-sm: 24px — secondary pills
- pill-lg: 32px — large pill buttons
- circle: 50% — avatars, icon buttons

## Shadows & Depth
- sm: rgba(34, 34, 38, 0.16) 0px 1px 4px — small elevation
- lg: rgba(34, 34, 38, 0.16) 0px 1px 16px — elevated hover/modals

## Component Specifications

### Primary Button
Default:
```css
.btn-primary {
  background: #ffffff;
  color: #0c0c0d;
  padding: 1px 16px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid transparent;
}
.btn-primary:focus {
  outline: 1px solid #374df5;
}
```

### Secondary Button
```css
.btn-secondary {
  background: rgba(203, 24, 24, 0.1);
  color: #CB1818;
  padding: 1px 16px;
  border-radius: 24px;
  font-size: 12px;
  font-weight: 500;
}
```

### Navigation Links
```css
.nav-link {
  color: #374df5;
  text-decoration: none;
}
```

### Input Fields
```css
.input {
  background: #ffffff;
  color: #222226;
  border: none;
  border-radius: 0;
}
.input:focus {
  border-color: #374df5;
  outline: none;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 16px;
}
```

## Layout & Responsive Rules
Breakpoints:
- Mobile: <480px
- Tablet: 768px
- Desktop: >992px
Large desktop: 1344px

## Interaction Rules
- Transitions: 150ms ease on bg-color changes
- Focus outlines: solid 1px primary blue
- No heavy hover effects—keep minimal

## DO List
- Use only palette colors
- Maintain 8px grid multiples
- Keep text sizes small to preserve density
- Use rounded shapes consistently per component type
- Show focus states clearly

## DON'T List
- Don’t mix different border radius for same component type
- Don’t add custom, non-palette colors
- Don’t overuse shadows
- Don’t remove focus outlines

## Code Examples

Primary Button:
```css
<button class="btn-primary">Go</button>
```

Card:
```css
<div class="card">
  <h2>Title</h2>
  <p>Content</p>
</div>
```

Input:
```css
<input class="input" placeholder="Search">
```

9. Summary

TL;DR: Sofascore’s design language is clean, data-prioritised, and colour-driven by a single primary blue. It’s a tight, controlled system with small font sizes, an 8px base grid, and deliberate use of functional color tokens.

Brand Keywords:

• data-centric-minimalism
• sport-tech-clarity
• blue-anchored-ui
• precision-consistency