FotMob - Football Live Scores

Design Specification — FotMob - Football Live Scores

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#DD3636). All type is set in __Inter_f367f3. Detected font weights: 100, 400, 500, 700. Detected style signatures: gradient-rich / aurora; rounded / pill-heavy; technical / mono accents.

Logo asset(s): https://www.fotmob.com/img/android-icon-192x192.png

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• radial-gradient(50.46% 91.43%,#bcff8bcc 0,#55e3641a 100%)
• radial-gradient(20% 130% at 23% -36%,#5fff9426 0,#f5f5f500 100%)
• linear-gradient(90deg, 0, 100%)
• radial-gradient(250% 200% at -180%,#d6d6d6 0,#fafafa 100%)
• linear-gradient(0deg, 0, 100%),
• radial-gradient(20% 130% at 23% -36%,#5fff9426 0,#25252500 100%)
• radial-gradient(250% 200% at -180%,#444 0,#222 100%)
• `linear-gradient(90deg, 0, 50%, 100%)

)`

> 4 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: __Inter_f367f3 — stack: __Inter_f367f3

Font stacks (most used first)

• __Inter_f367f3
• __walsheim_e6bd29
• var(--font-mono)
• var(--font-inter)
• var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji")
• var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)
• var(--font-default)
• var(--font-walsheim)
• var(--font-mono)!important
• __Inter_Fallback_f367f3

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 400, 500, 700

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Layout

Container max-width: 768px

Grid columns (largest detected grid): 6

Breakpoints

• 350px
• 768px
• 48rem
• 769px
• 991px
• 992px
• 1280px
• 80rem

Animation & Motion

Transitions

• -webkit-transform 0.4s ease-in-out
• transform 0.4s ease-in-out
• inset-inline-start 0.25s ease-in-out
• bottom 0.2s ease-in
• bottom 0.2s ease-out

Easing curves

• cubic-bezier(0,0,.2,1)
• cubic-bezier(.4,0,.2,1)
• cubic-bezier(.4,0,.6,1)
• cubic-bezier(.4,0,.2,1)
• var(--tw-ease,var(--default-transition-timing-function))
• var(--ease-in-out)
• var(--ease-out)
• ease-in-out

Keyframes

@keyframes pulse { 50%{opacity:.5} }
@keyframes animation-6iiy45 { 0%{-webkit-transform:translate(0px,0px);-moz-transform:translate(0px,0px);-ms-transform:translate(0px,0px);transform:translate(0px,0px);}30%{-webkit-transform:translate(10px,-30px);-moz-transform:translate(10px,-30px);-ms-transform:translate(10px,-30px);transform:translate(10px,-30px);}100%{-webkit-transform:translate(0px,0px);-moz-transform:translate(0px,0px);-ms-transform:translate(0px,0px);transform:translate(0px,0px);} }
@keyframes spin { to{transform:rotate(1turn)} }
@keyframes enter { 0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))} }
@keyframes exit { to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))} }
@keyframes accordion-down { 0%{height:0}to{height:var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))))} }
@keyframes accordion-up { 0%{height:var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))))}to{height:0} }
@keyframes nprogress-spinner { 0%{transform:rotate(0deg)}to{transform:rotate(1turn)} }
@keyframes react-loading-skeleton { to{transform:translateX(100%)} }
@keyframes react-placeholder-pulse { 0%{opacity:.6}50%{opacity:1}to{opacity:.6} }

Animations

• none!important
• pulse 1.5s infinite
• animation-6iiy45 10s ease-in-out infinite
• enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)
• var(--animate-pulse)
• var(--animate-spin)
• accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)
• exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)
• accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)
• react-placeholder-pulse 1.5s infinite

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “About”

CTA labels found on page

• Transfers
• Matches
• Leagues
• News

Source Design Tokens (CSS custom properties)

:root {
  --font-inter: '__Inter_f367f3', '__Inter_Fallback_f367f3', sans-serif;
  --font-walsheim: '__walsheim_e6bd29', '__walsheim_Fallback_e6bd29', sans-serif;
  --font-cabinet-grotesk: '__cabinetGrotesk_c4944d', '__cabinetGrotesk_Fallback_c4944d', sans-serif;
  --space: 0;
  --z-index-nprogress: 3000;
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --color-amber-400: oklch(82.8% .189 84.429);
  --color-green-400: oklch(79.2% .209 151.711);
  --color-green-500: oklch(72.3% .219 149.579);
  --color-green-600: oklch(62.7% .194 149.214);
  --color-blue-400: oklch(70.7% .165 254.624);
  --color-blue-500: oklch(62.3% .214 259.815);
  --color-blue-600: oklch(54.6% .245 262.881);
  --color-gray-100: oklch(96.7% .003 264.542);
  --color-gray-200: oklch(92.8% .006 264.531);
  --color-gray-300: oklch(87.2% .01 258.338);
  --color-gray-400: oklch(70.7% .022 261.325);
  --color-gray-500: oklch(55.1% .027 264.364);
  --color-gray-600: oklch(44.6% .03 256.802);
  --color-gray-700: oklch(37.3% .034 259.733);
  --color-black: #000;
  --color-white: #fff;
  --spacing: .25rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-3xl: 48rem;
  --text-xs: .75rem;
  --text-xs--line-height: calc(1 / .75);
  --text-sm: .875rem;
  --text-sm--line-height: calc(1.25 / .875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --tracking-tight: -.025em;
  --tracking-wide: .025em;
  --tracking-wider: .05em;
  --tracking-widest: .1em;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --radius-xs: .125rem;
  --radius-sm: .25rem;
  --radius-md: .375rem;
}

Do's and Don'ts

Do

• Do reserve the accent #DD3636 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 100, 400, 500, 700.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.

Design Tokens (copy-paste)

:root {
  --color-primary: #61DF6E;
  --color-accent: #DD3636;
  --color-background: #FFFFFF;
  --color-surface: #F5F5F5;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #596470;
  --color-border: #6D7782;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FAFAFA;
  --color-surface-container: #F9F9F9;
  --color-surface-container-high: #F5F5F5;
  --color-surface-container-highest: #F1F1F1;
  --font-sans: __Inter_f367f3;
  --font-size-display: 64px;
  --font-size-headline-lg: 32px;
  --font-size-headline-md: 25px;
  --font-size-title-lg: 22px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 2px;
  --radius-md: 12px;
  --radius-lg: 23px;
  --radius-pill: 50%;
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --tracking-display: -.06px;
  --tracking-label: 0.21px;
  --container-max: 768px;
}