01 — Foundations

Color System

Championship Gold (#C9A74C) is the primary brand color. CPSL Steel (#697279) and Crimson (#BF1D2D) serve as supporting and accent colors. Cream (#F4EFE6) adds warmth to premium surfaces. All colors ship as CSS custom properties and design token JSON.

Primary — Championship Gold

Gold is the primary brand color — used for CTAs, active states, and championship moments. Always use dark navy text on gold — it achieves 8:1 contrast (AAA).

Gold

Gold 300

#E5C97A

Gold 400

#D8B85E

Gold 500

#C9A74C

Championship

Gold 600

#B08A34

Gold 700

#8C6E24

Secondary — CPSL Steel

Steel is a cool blue-grey secondary color centered on #697279. Used for informational states, secondary badges, promotion zones, and UI chrome accents.

Steel

Steel 50

#F2F4F5

--cpsl-steel-50

Steel 100

#E3E7E9

--cpsl-steel-100

Steel 200

#C8CED2

--cpsl-steel-200

Steel 300

#A7AFB5

--cpsl-steel-300

Steel 400

#8A9299

--cpsl-steel-400

Steel 500

#697279

--cpsl-steel-500

Steel 600

#505960

--cpsl-steel-600

Steel 700

#3A4248

--cpsl-steel-700

Steel 800

#262D32

--cpsl-steel-800

Steel 900

#161B1E

--cpsl-steel-900

Accent — CPSL Crimson

Crimson is the competition accent — used for alerts, relegation zones, red cards, and brand energy moments. Centered on #BF1D2D. White text on Crimson-500 achieves 5.9:1 (AA).

Crimson

Crimson 50

#FEF0F1

--cpsl-crimson-50

Crimson 100

#FDDCDE

--cpsl-crimson-100

Crimson 200

#FAB3B8

--cpsl-crimson-200

Crimson 300

#F47D85

--cpsl-crimson-300

Crimson 400

#E74552

--cpsl-crimson-400

Crimson 500

#BF1D2D

--cpsl-crimson-500

Crimson 600

#96161E

--cpsl-crimson-600

Crimson 700

#6E1017

--cpsl-crimson-700

Crimson 800

#480B0F

--cpsl-crimson-800

Crimson 900

#250508

--cpsl-crimson-900

Warm Surface — CPSL Cream

Cream brings warmth to premium surfaces — editorial panels, feature callouts, and championship highlights. Use in place of cold white for a richer, more premium brand feel.

Cream

#F4EFE6

--cpsl-cream

Premium backgrounds, feature panels

Cream Dark

#EBE3D0

--cpsl-cream-dark

Borders, dividers on cream surfaces

Semantic Colors

Success

#00C853

Wins, confirmations, uploads

Warning

#FFB300

Postponed, cautions, yellow cards

Error

#FF1744

Losses, failures, red cards

Info

#697279

Informational states

Neutral Scale

N-50

#F4F6FA

N-200

#E2E8F0

N-400

#94A3B8

N-500

#64748B

N-600

#475569

N-700

#334155

N-900

#091628

WCAG Contrast Ratios

Gold (#C9A74C) is the primary color and always requires dark navy text — it achieves 8:1 (AAA). Steel-500 (#697279) passes AA for both white and dark text, making it flexible for UI elements.

Combination	Ratio	AA Normal	AA Large	AAA
White on Steel-500 (#697279)	4.6:1	✅	✅	❌
Dark (#091628) on Steel-500	4.6:1	✅	✅	❌
White on Dark (#091628)	18.9:1	✅	✅	✅
N-900 on N-50	14.2:1	✅	✅	✅
N-600 on White	5.74:1	✅	✅	❌
Dark text on Gold-500 (#C9A74C)	8.0:1	✅	✅	✅
White on Crimson-500 (#BF1D2D)	5.9:1	✅	✅	❌
White on Error (#FF1744)	4.58:1	✅	✅	❌
Dark text on Success bg	7.2:1	✅	✅	✅

Dark Mode Tokens

--primary

LightDark

--accent

LightDark

--cpsl-gold

LightDark

--surface-warm

LightDark

--surface-1

LightDark

--surface-2

LightDark

--text-primary

LightDark

--border

LightDark