Matchday Design System

A console-style game-detail and storefront design system. Dark-first surfaces, a deep blue brand color paired with a high-emphasis orange commerce CTA, a thoughtful dual-mode token system, and component patterns built around hero artwork, edition tiles, and persistent purchase intent.

v1.0

Marketing + Storefront

Light + Dark

12-col grid · 16px gutter

Brand Summary

Platform

Web (responsive marketing + storefront), reflects in-console store UI

Primary Font

Inter (free implementation), proprietary geometric sans original

Display Font

Mont (commercial) / Inter Black

Brand Color

#0072CE

Commerce CTA

#D63D00

Default Theme

Dark-first; full light variant available

Container Width

1440px max

Nav Height

64–105px (incl. tabs)

Colors

Two role layers: a structural light/dark scaffold paired with intent layers (brand, commerce, status). Tokens map cleanly to CSS variables and Tailwind.

Brand

Brand Primary

#0072CE

Logo, primary buttons, focus ring, links on light surfaces.

Brand Hover

#0064B7

Hover state for primary blue surfaces.

Brand Active

#0059A3

Pressed/active brand surfaces.

Brand Dark-mode

#53B1FF

Links and accents on dark surfaces.

Commerce

Commerce CTA

#D63D00

Primary purchase CTA. Reserved for revenue-bearing actions.

Commerce Hover

#C03500

Commerce Active

#AA2F00

Subscription Yellow

#FCC71D

Subscription badges and "Included" indicators.

Sale Accent

#FF143F

Sale percent badges. Use sparingly.

Free / Available

#0DD474

Page & Surfaces

Page Dark Primary

#121314

Page Dark Secondary

#17181A

Page Dark Tertiary

#000000

Surface Card (Dark)

#1F2024

Edition tiles, modals, elevated surfaces.

Page Light Primary

#FFFFFF

Page Light Secondary

#F5F7FA

Page Light Tertiary

#EBEEF0

Text

Ink Primary

#1F1F1F

Body and headings on light surfaces.

Ink Secondary

#363636

Ink Tertiary

#757575

Captions and supporting text.

Fog Primary

#FFFFFF

Body and headings on dark surfaces.

Fog Secondary

#B2B2B2

Fog Tertiary

#898989

Status

Success (dark)

#009476

Success (light/bright)

#0DD474

Warning

#C81B3A

Error

#FF143F

Notice

#FCC71D

Gradients

Hero Overlay (vert)

Hero Overlay (horz)

Section Primary (dark)

Section Emphasis (dark)

Surface (dark)

Surface (light)

Brand Hero Glow

Commerce Hero Glow

Typography

A neutral geometric sans for body and a heavier display cut for hero titles. Source uses a proprietary sans; Inter is the recommended free implementation. Bebas Neue stays available for promotional callouts.

Font Families

Role	Family	Usage
Primary	`Inter, system-ui, -apple-system, sans-serif`	All body, UI labels, buttons, navigation.
Display	`'Mont', 'Inter', system-ui, sans-serif`	Hero titles, large promo headlines.
Condensed	`'Inter Tight', 'Inter', system-ui, sans-serif`	Tight callouts, edition platform stacks.
Accent	`'Bebas Neue', 'Inter', sans-serif`	Promotional badges and event callouts.

Original site renders a proprietary geometric sans. Implementations should swap in Inter as the closest free analog and reserve Mont for hero displays.

Type Scale

Step onto the pitch

5xl · 61px / 800 / 1.0 / -0.025em — Hero / game title

Discover this season's hits

4xl · 49px / 800 / 1.05 — Page H1

Editions:

3xl · 39px / 300 / 1.25 / +0.1px — Section H2 (light weight)

Refined gameplay fundamentals

2xl · 31px / 600 / 1.18 — H3

Football Ultimate Team

xl · 25px / 600 / 1.3 — H4 / feature title

Standard Edition

lg · 20px / 700 / 1.4 — Edition title / price

Body text used throughout the storefront. Reads at comfortable density on dark surfaces while staying close enough to native UI sizes for in-console contexts.

md · 16px / 400 / 1.5 — Body

Smaller supporting copy: bullets, table cells, footer links.

base · 14px / 400 / 1.45 — Small body

PS5 · PS4 · Available platforms

sm · 12px / 600 / uppercase / +0.06em — Eyebrow / platform stack

Tag · Tooltip · Badge label

xs · 10px / 600 — Micro labels

Weights

Weight	Value	Use
Light	300	Section headings (e.g. "Editions:") on dark surfaces
Regular	400	Body, descriptions
Medium	500	Nav links, supporting metadata
Semibold	600	Buttons, interactive labels, H3–H6
Bold	700	Edition titles, prices, table headers
Extrabold	800	Hero display, page H1

Spacing

A logarithmic scale with two anchors — 16px (page) and 24px (component). Container padding ramps from 16px (mobile) to 80px (desktop).

Spacing Scale

2 · space-1

4 · space-2

8 · space-3

12 · space-4

16 · space-5

24 · space-6

32 · space-7

40 · space-8

48 · space-9

64

80

Layout Constants

Constant	Value	Notes
Container max-width	`1440px`	Hard cap on storefront / detail pages
Container padding (desktop)	`80px`	Side gutter on > 1280px
Container padding (tablet)	`32px`	768–1279px
Container padding (mobile)	`16px`	< 768px
Top nav height	`64px`	Sticky, blurred background
Tab nav height	`56px`	Sticky directly below top nav
Combined nav offset	`105px`	scroll-margin-top for in-page anchors
Grid columns	`12`	16px gutter

Borders & Radii

A 5-step radius scale. Buttons are pills; cards and modals use a generous 16px; tiny chips/inputs use 4–8px.

4px

xs · input

8px

sm · chip

16px

md · card

32px

lg · modal

999px pill

pill · button

50%

circle · icon-btn

Shadows

Two stacks: a soft light-mode set for storefront cards, and a deep dark-mode set for hover/elevation under hero overlays.

Light-mode

low

0 4 8 / 16

high

0 12 24 / 32

promo

0 5 15 / 35

Dark-mode

low

0 4 8 / 0.8

high

0 12 24 / 0.8

Motion

Two easings carry the system: standard for state changes, emphasized for entrances and slide animations. Durations stay short — 200ms is the default.

Token	Value	When
`--duration-quick`	120ms	Hover, focus, micro-state
`--duration-base`	200ms	Default for buttons, links, color transitions
`--duration-slow`	320ms	Sticky show/hide, modal open
`--ease-standard`	`cubic-bezier(0.4, 0, 0.2, 1)`	Color, opacity, padding
`--ease-emphasized`	`cubic-bezier(0.2, 0, 0, 1)`	Entrances, slides, modal in/out

Buttons

Pill-shaped buttons. Brand blue for primary actions; commerce orange reserved for purchase intent; outlined ghost for secondary; circular icon buttons for wishlist / share.

Primary & Commerce

Variant	Background	Color	Border	Radius	Padding	Weight
Primary (Blue)	`#0072CE`	`#FFFFFF`	—	`999px`	`12px 24px`	600
Commerce (Orange)	`#D63D00`	`#FFFFFF`	`1px #D53B00`	`999px`	`12px 24px`	700
Secondary Ghost (Dark)	transparent	`#FFFFFF`	`1px rgba(255,255,255,0.3)`	`999px`	`12px 24px`	600
Icon Circle	transparent	`#FFFFFF`	`1px rgba(255,255,255,0.3)`	`50%`	—	—

States

Sizes

Inputs & Forms

Inputs default to a 4px corner radius — distinct from the pill buttons. Light variants pair with white surfaces; dark variants use translucent fills over dark surfaces.

Light Surface

Email

Search the catalog

Postal code

Dark Surface

Email

Search

Promo code

Top & Tab Nav

A blurred dark top nav over the hero, with a sticky tab nav for in-page section pivots. The orange "Choose edition" CTA is anchored top-right and persists during scroll.

Top nav

MATCHDAY

Games Hardware Subscriptions Accessories

Tab nav (page-level)

Overview Key features Editions Reviews

Badges & Callouts

Small status pills for subscription inclusion, sale percentage, free-tier flags, and platform availability.

Included with Subscription −40% FREE PS5 PS4 3.38 ★ 194K reviews

Game Hero

Full-bleed background art on the right; left-aligned title stack, rating, included-with badge, price, and primary purchase CTA. Headline uses the display font at 49–61px.

Publisher

Step onto the pitch

3.38 ★194K reviews · Read reviews

Included with Subscription

$69.99 $41.99

Spec	Value
Min height	`560px` desktop · `360px` mobile
Padding	`120px 80px 64px` desktop
Title font	`Mont/Inter 800 · 49–61px`
Overlay	`linear-gradient(90deg, #121314 0%, rgba(18,19,20,0.6) 40%, transparent 80%)`
Primary CTA	Commerce orange · pill · 12×24

Edition Cards

Edition browser tile. 16:9 art block on top, platform stack, edition title, feature bullets, price block, and primary action with a circular wishlist button. Cards live in a 2x2 grid that collapses to a horizontal swipe carousel under 768px.

StandardPS5 · PS4

PS5 · PS4

Standard Edition

Base game
5,000 in-game points
Pre-order bonus pack

$69.99 $41.99

FreePS5 · PS4

PS5 · PS4 · Showcase

Showcase Edition

Trial play access
Limited features
Sample roster

Free

UltimatePS5 · PS4

PS5 · PS4 · Premium

Ultimate Edition

Base game
6,000 in-game points
Career boost pack
Cosmetic content

$99.99

LegendsPS5 · PS4

PS5 · PS4 · Collector

Legends Edition

Base game
Legends roster pack
Career season starter
Cosmetic kit bundle

$129.99

Sticky Purchase Bar

A persistent bottom bar that appears after scrolling past the hero. It carries the title, edition, price, and the primary commerce action — keeping purchase intent in reach without re-entering the hero.

Step onto the pitch

Standard Edition · PS5 · PS4

$41.99

Feature Tiles

Three-up benefits row beneath the editions browser. Square media on top, title, supporting copy. Clean, scannable, no card chrome.

Career mode

A deeper season management experience with new manager events, recruitment dynamics, and rotation tools.

Authentic stadiums

Crowd reactions, broadcast lighting, and live atmosphere captured from real-world venues.

Refined gameplay

Dribble responsiveness, shooting variety, and pace differences tuned through community feedback.

Promo Dock

A slim dismissible card pinned to the lower-left of the viewport. Encourages sign-in / cross-sell without occluding the hero.

Survey Card

Inline feedback prompt rendered on a white surface inside an otherwise dark page. The prompt + 5-point scale + textarea + submit pattern is reused on every detail page.

Was this content useful for you?

Not at all

Neutral

Extremely

Footer

A four-column link grid on the deepest dark surface. Headings are uppercase 12px, links are 14px Fog Secondary, fine-print is 11px Fog Tertiary.

Tailwind Mapping

The paired design-system.json ships a complete tailwind.theme.extend block plus a set of componentRecipes. Use these as the source of truth — do not fall back to default Tailwind tokens.

Consume the JSON

// tailwind.config.ts
import type { Config } from 'tailwindcss';
import tokens from './design-system.json';

export default {
  content: ['./src/**/*.{ts,tsx}'],
  theme: { extend: tokens.tailwind.theme.extend },
} satisfies Config;

Component Recipes (excerpt)

Recipe	Class chain
`btnPrimary`	`inline-flex items-center justify-center rounded-pill bg-brand px-6 py-3 font-semibold text-white hover:bg-brand-hover active:bg-brand-active`
`btnCommerce`	`inline-flex items-center justify-center rounded-pill bg-commerce px-6 py-3 font-bold text-white border border-commerce-border hover:bg-commerce-hover`
`btnSecondary`	`rounded-pill border border-white/30 bg-transparent px-6 py-3 font-semibold text-white hover:border-white/60 hover:bg-white/5`
`iconBtn`	`inline-flex h-11 w-11 items-center justify-center rounded-circle border border-white/30 text-white hover:border-white hover:bg-white/10`
`navBar`	`sticky top-0 z-40 flex h-16 items-center bg-page-dark/85 px-6 backdrop-blur-nav border-b border-white/5 text-white`
`tabNav`	`sticky top-16 z-30 flex h-14 items-center gap-7 bg-page-dark/95 px-6 border-b border-white/8 text-base font-semibold text-fog-secondary`
`hero`	`relative isolate flex min-h-[560px] items-end overflow-hidden bg-page-dark px-11 pt-30 pb-10 text-white`
`heroTitle`	`font-display text-5xl font-extrabold leading-none tracking-tight text-white`
`editionCard`	`group flex flex-col overflow-hidden rounded-md border border-white/5 bg-surface-card text-white hover:shadow-high-dark`
`promoDock`	`fixed bottom-4 left-4 z-50 flex w-[260px] items-center gap-3 rounded-sm bg-white/95 p-3 text-ink shadow-promo`
`stickyPurchaseBar`	`sticky bottom-0 z-40 flex items-center gap-6 border-t border-white/8 bg-page-dark/95 px-6 py-3 text-white backdrop-blur-nav shadow-sticky`

Token Quick Reference

Tailwind	Value	Maps to
`bg-brand`	#0072CE	Primary blue
`bg-commerce`	#D63D00	Purchase CTA
`bg-page-dark`	#121314	Page background
`bg-surface-card`	#1F2024	Edition tiles, modals
`text-fog-secondary`	#B2B2B2	Supporting text on dark
`rounded-pill`	999px	Buttons
`rounded-md`	16px	Cards, hero
`shadow-promo`	0 5 15 / 0.35	Promo dock
`shadow-sticky`	0 4 12 / 0.35	Sticky bars
`backdrop-blur-nav`	16px	Top nav, sticky bars

Matchday Design System

Brand Summary

Colors

Brand

Commerce

Page & Surfaces

Text

Status

Gradients

Typography

Font Families

Type Scale

Weights

Spacing

Spacing Scale

Layout Constants

Borders & Radii

Shadows

Light-mode

Dark-mode

Motion

Buttons

Primary & Commerce

States

Sizes

Inputs & Forms

Light Surface

Dark Surface

Top & Tab Nav

Top nav

Tab nav (page-level)

Badges & Callouts

Game Hero

Step onto the pitch

Edition Cards

Sticky Purchase Bar

Feature Tiles

Promo Dock

Survey Card

Footer

Storefront

Support

Community

Legal

Tailwind Mapping

Consume the JSON

Component Recipes (excerpt)

Token Quick Reference