Sofascore

Overview

Sofascore is a data-driven sports intelligence platform that transforms live football scoring into a clean, accessible interface for millions of fans worldwide. The design philosophy embraces "Functional Clarity"—a minimalist aesthetic that prioritizes information hierarchy and real-time data legibility over decorative elements. The brand serves passionate sports enthusiasts, casual fans, and professional analysts who demand accuracy, speed, and comprehensive coverage across 600+ leagues. The UI evokes trust and precision through a cool, professional color palette anchored by a vibrant cobalt blue (#2c3ec4) that signals interactivity and brand authority. Every interaction feels responsive and purposeful, never cluttered.

The voice is direct, authoritative, and conversational—never sensational. Sofascore speaks in facts: match times, scores, player statistics, and league standings. The tone avoids hyperbole; instead, it celebrates the sport through data. Example sentence in brand voice: "Real Madrid 2–1 Barcelona. Benzema scored at 34' and 67'; Gavi equalized at 52'. View full match stats."

Colors

The color system balances a neutral, light surface palette (#edf1f6 background, #ffffff cards) with a bold primary accent (#2c3ec4) that commands attention on CTAs, active tabs, and key interactive elements. Primary (#2c3ec4) is reserved exclusively for high-priority actions—the "Download app" button, active navigation tabs, and link text—ensuring users always know where to click. Secondary (#1a73e8) and tertiary (#4285f4) provide supporting accents for secondary CTAs, badges, and informational highlights without competing for focus. The neutral stack (surface-container-lowest through surface-container-highest) creates subtle depth: cards use #ffffff (surface-bright) for maximum contrast against the #edf1f6 background, while disabled or secondary content recedes to #d4d9e2 (surface-contain

Typography

The type system uses Sofascore Sans—a custom, geometric sans-serif optimized for screen legibility—paired with system fallbacks (Arial Unicode MS, Segoe UI) for universal compatibility. Display (60px, 700 weight) anchors hero sections and major page titles with tight -0.04em letter-spacing to convey confidence. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure content sections, with headline-md used for card titles and subsection headers. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry match descriptions, player names, and detailed statistics; body-md is the default paragraph size. Label-md (14px, 600 weight) and label-sm (12px, 500 weight) label UI controls, timestamps, and metadata. All type sizes use unitless line-height (1.5 for body, 1.4 for h

Layout

The layout employs a 12-column responsive grid with a max-width of 1280px, centering content on desktop while allowing full-bleed sections (header, hero) to extend edge-to-edge. The gutter is consistently 24px (md spacing), applied symmetrically on left and right. On mobile (< 768px), the grid collapses to 4 columns with 12px gutters; on tablet (768px–991px), it expands to 8 columns with 24px gutters. White-space is generous: section separation uses lg spacing (40px) vertically, creating breathing room between match cards, league tables, and sidebar widgets. Container padding follows the gutter rule (24px on desktop, 12px on mobile), ensuring content never touches viewport edges. The spacing scale is semantic: xs (4px) for micro-interactions and icon spacing, sm (12px) for component intern

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through color darkening. The base layer (Level 1) is the light background (#edf1f6) with no shadow. Level 2 (standard cards, input fields) uses elevation-sm (0 1px 2px rgba(0, 0, 0, 0.06))—a barely perceptible shadow that separates cards from the background without drawing attention. Level 3 (hovered cards, modals, dropdowns) applies elevation-md (0 3px 8px rgba(0, 0, 0, 0.15)), a more pronounced shadow that lifts the element and signals interactivity. Level 4 (floating action buttons, sticky headers, overlays) uses elevation-lg (0 8px

Shapes

The shape language is "Geometric Precision"—clean, predictable corner radii that reflect the brand's data-focused, technical nature. Buttons use sm (4px, 0.25rem) for a sharp, business-like appearance that contrasts with softer card corners. Cards and containers use lg (16px, 1rem) for a modern, approachable feel that softens the interface without sacrificing clarity. Input fields use DEFAULT (8px, 0.5rem) as a middle ground—distinct from buttons but not as rounded as cards. Chips and badges use full (9999px) for maximum roundness, signaling lightweight, dismissible elements. Modal overlays an

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses a solid #2c3ec4 background with white text, 8px vertical and 16px horizontal padding, and 4px border-radius for a crisp, professional look. On hover, the background darkens to #1e2a9f (a 15% darkening) with a smooth 150ms transition; on active/pressed, it darkens further to #1a1f7a. The secondary button uses a semi-transparent background (rgba(229, 233, 239, 0.5)) with on-surface text, full (9999px) border-radius, and 12px padding, creating a lighter, less committal appearance. Secondary buttons are used for "Sign in", "Learn more", and other non-primary actions. Both button states include a focus ring: a 3px outline in primary-container (#dde1ff) with 2px offset, visible only on keyboard navigation