Flashscore

Overview

Flashscore is a global real-time sports data platform delivering live match scores, results, and comprehensive league coverage across 1000+ football competitions and multiple sports. The design system embodies a "Data-Centric Pragmatism" aesthetic: information density balanced with rapid visual scanning, where every pixel serves to reduce cognitive load for sports enthusiasts, analysts, and casual fans seeking instant match intelligence. The interface prioritizes contrast, status clarity, and hierarchical information layering—users should locate live scores, team standings, and match schedules within 1–2 seconds of page load.

The brand voice is authoritative yet accessible: factual, rapid-fire, and never speculative. Tone examples: "Manchester City 3–1 Liverpool, 87' — Haaland hat-trick" or "Champions League: 14 matches live now." The personality avoids hype; instead, it delivers precision. Every color choice—from the vivid magenta primary (#ff0046) to the deep navy secondary (#001e28)—serves functional contrast, not decoration. The system uses a compact 13px base font size with tight line-height (16px) to maximize data density without sacrificing legibility.

Colors

The Flashscore color system is built on a high-contrast, data-optimized foundation. **Primary (#ff0046)** is a vivid magenta used exclusively for call-to-action buttons ("Sign up", "Claim $50"), active tab underlines, and live-match indicators; it commands immediate attention against the neutral surface. **Secondary (#001e28)** is a deep navy-black, the dominant header and sidebar background, providing visual anchoring and reducing eye strain during extended browsing. **Tertiary (#14dc4b)** is a bright lime-green reserved for positive status indicators ("Live", "Win", "Goal") and success states; it creates instant semantic recognition. **Error (#dc0000)** is a pure red for loss states, red cards, and critical alerts.

The surface stack uses a light gray foundation (#eeeeee as surface, #fff

Typography

The typography system uses LivesportFinderLatin (a custom sports-optimized typeface) with Adjusted Arial Fallback as the primary stack, ensuring consistent rendering across browsers and devices. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for page titles and hero headlines; Headline-lg (40px, 600 weight) for section headers; Headline-md (28px, 600 weight) for subsection titles. Body-md (16px, 400 weight, 24px line-height) is the default paragraph text, optimized for 13px rendered size on the live scores table. Label-md (14px, 600 weight) is used for tab labels, button text, and metadata; Label-sm (12px, 500 weight) for timestamps, league abbreviations, and tertiary information. All text over busy backgrounds (match cards, live-score rows) should apply text-shadow: 0 1px

Layout

Flashscore uses a 12-column fluid grid with a max-width of 1280px, allowing responsive scaling from mobile (single column) to desktop (multi-column league tables). The page rhythm is driven by a semantic spacing scale: unit (8px), sm (12px), md (24px), lg (40px), xl (64px). Section separation uses lg spacing (40px) between major content blocks (header, pinned leagues, match tables, footer); card padding uses md (24px) for breathing room around data. The gutter (24px) is applied to left/right margins on the main container, creating consistent edge whitespace. Live-score rows use sm (12px) vertical padding to pack data density while maintaining touch-target height (44px minimum). The container max-width of 1280px prevents line-length from exceeding 120 characters on body text, supporting rap

Elevation & Depth

Depth in Flashscore is conveyed through subtle shadows and layering, not through color shifts or glassmorphism. Level 1 (Base): the light gray surface (#eeeeee) with no shadow, representing the page background. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to match cards, league items, and modal overlays; this creates a gentle lift without visual heaviness. Level 3 (Elevated/Hover): box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), used when cards are hovered or modals are in focus, signaling interactivity. The header bar (#001e28) uses no shadow, anchoring the top of

Shapes

The shape philosophy is "Functional Minimalism"—rounded corners are used sparingly and purposefully to signal interactivity without introducing visual noise. Buttons use 4px border-radius (DEFAULT), a subtle softening that distinguishes them from sharp data tables while maintaining a technical aesthetic. Cards and containers use 8px (md) or 12px (lg) for larger surfaces like match cards and league panels, creating visual grouping without excessive rounding. Input fields use 50% border-radius (full) to create pill-shaped search boxes, a convention users instantly recognize. Tab underlines and a

Components

Action Elements Buttons are the primary interaction pattern. **Button-primary** uses #ff0046 background, white text, 12px vertical / 24px horizontal padding, 44px height, and 700 font-weight; on hover, the background shifts to #ff1a5c with a 150ms transition. **Button-secondary** mirrors the primary structure but uses #001e28 background, white text, and shifts to #003d52 on hover. **Button-tertiary** (outline style) has a transparent background, #ff0046 text, 1px border in primary color, and a hover state with rgba(255, 0, 70, 0.08) background fill. All buttons use label-md typography (14px, 600 weight) and 4px border-radius. Focus state: all buttons receive a 3px outline in primary color with 2px offset, meeting WCAG AA standards.

Containers & Surfaces **Card** component has #eee

Do's and Don'ts

**Do**

• Do use primary (#ff0046) exclusively for CTAs, active states, and live indicators—never for body text or neutral UI elements.
• Do maintain 16:1 contrast ratio between text and background; test all color combinations with WCAG AA standards in mind.
• Do apply 4px border-radius to buttons and 8px to cards; avoid excessive rounding (>12px) which dilutes the data-forward aesthetic.
• Do use label-md (14px, 600 weight) for all button text and tab labels; consistency in typography weight signals hierarchy.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and 0 7px 14px rgba(50, 50, 93, 0.1) on hover; these specific values maintain the subtle elevation system.
• Do use LivesportFinderLatin as the primary typeface; it is optimized for sports data and numbers.
• Do implement 200ms ease-in-out transitions for all hover and focus state changes; this timing feels responsive without appearing laggy.
• Do reserve tertiary (#14dc4b) for positive status indicators (Live, Win, Goal); never use it for neutral or negative states.

**Don't**

• Don't use primary color (#ff0046) for backgrounds of large content areas; it should accent, not dominate.
• Don't apply border-radius >12px to any component; the system uses sharp (0px) for data, soft (4–8px) for interaction, and pill (50%) for inputs only.
• Don't mix typefaces; LivesportFinderLatin + Arial Fallback is the only approved stack. System fonts (system-ui, -apple-system) are not permitted.
• Don't use shadows >14px blur radius or opacity >15%; heavy shadows conflict with the data-centric aesthetic and reduce perceived information density.
• Don't apply text-shadow to body copy on light backgrounds; reserve it only for text over busy match-card backgrounds.
• Don't use secondary (#001e28) for text on light backgrounds; it creates insufficient contrast. Use #001e28 only for headers, sidebars, and dark-background text.
• Don't create custom color tokens outside the defined palette; all new colors must be derived from the Material 3 surface/role stack.
• Don't animate transitions faster than 150ms or slower than 300ms; this range maintains perceived responsiveness without feeling sluggish or jarring.