Obscvria — Design Tokens

Primitives — Violet

violet-900#1E0A3C

violet-800#2D0F5A

violet-700#3D1678

violet-600#5521A8

violet-500 ★#7C3AED

violet-400#A78BFA

violet-300#C4B5FD

Primitives — Amber

amber-900#451A03

amber-800#78350F

amber-700#92400E

amber-600#B45309

amber-500#D97706

amber-400 ★#FBBF24

amber-300#FCD34D

Primitives — Emerald

emerald-900#022C22

emerald-800#065F46

emerald-700#047857

emerald-600#059669

emerald-500 ★#10B981

emerald-400#34D399

emerald-300#6EE7B7

Primitives — Red

red-900#450A0A

red-800#7F1D1D

red-700#991B1B

red-600#B91C1C

red-500 ★#EF4444

red-400#F87171

red-300#FCA5A5

Primitives — Slate

slate-50#F8FAFC

slate-100#F1F5F9

slate-200#E2E8F0

slate-300#CBD5E1

slate-400#94A3B8

slate-500#64748B

slate-600#475569

slate-700#334155

slate-800#1E293B

slate-900#0F172A

Compétitions

🏆 WC2026--color-comp-wc

⭐ UCL--color-comp-ucl

🦁 Premier League--color-comp-pl

🔶 La Liga--color-comp-laliga

🔴 Bundesliga--color-comp-bundesliga

🔵 Ligue 1--color-comp-ligue1

🇮🇹 Serie A--color-comp-seriea

Sémantiques — Surfaces & Texte (réactif dark/light — bascule avec le toggle)

--color-bg

Fond principal de la page

--color-surface

Cards, sidebar, panels

--color-elevated

Items surlevés, inputs

--color-border

Séparateurs, contours

Aa --text

--color-text

Texte principal, titres

Aa --muted

--color-text-muted

Labels, descriptions

Aa --dim

--color-text-dim

Métadonnées, placeholders

Aa brand

--color-brand

Violet principal

Sémantiques — États match

Victoire ✓

--color-win

#10B981

win-bg · win-border

Défaite ✗

--color-loss

#EF4444

loss-bg · loss-border

Nul —

--color-draw

#F59E0B

draw-bg · draw-border

Accent ★

--color-accent

#FBBF24

accent-bg · accent-border

Espacements

--space-14px

--space-28px

--space-312px

--space-416px

--space-520px

--space-624px

--space-832px

--space-1040px

--space-1248px

--space-1664px

--space-2080px

Border Radius

--radius-xs

2px

--radius-sm

4px

--radius-md

8px

--radius-lg

12px

--radius-xl

16px

--radius-2xl

24px

--radius-3xl

32px

--radius-full

9999px

Typographie

Obscvria — Display

--font-display

Space Grotesk · Titres, logos, scores

Corps de texte — Interface

--font-body

Inter · Texte courant, labels

1.88 · 9.8% · €0.013

--font-mono

JetBrains Mono · Cotes, stats, tokens

Shadows

--shadow-xs

0 1px 2px rgba(0,0,0,.5)

--shadow-sm

0 1px 4px rgba(0,0,0,.6)

--shadow-md

0 4px 12px rgba(0,0,0,.7)

--shadow-lg

0 8px 24px rgba(0,0,0,.75)

--shadow-xl

0 16px 48px rgba(0,0,0,.8)

--shadow-brand

Violet glow

Transitions

--transition-fast

150ms ease

--transition-base

250ms ease

--transition-slow

400ms ease

--transition-theme

200ms ease

Z-Index Scale

--z-base

0

--z-raised

10

--z-sticky

100

--z-overlay

200

--z-modal

300

--z-toast

400