Style Guide
Visual reference of colors, typography, components and patterns used across Turfobet.
Color Palette
Brand Colors
Neutral Scale
Overlay / Alpha
Semantic Tokens
Typography
Body — Inter
The quick brown fox jumps over the lazy dog
Weights 100–900, variable
Display — Lexend
The quick brown fox jumps over the lazy dog
Weights 700–900, branding
Mono — JetBrains Mono
const x = 42;
Weights 400–800, code
Heading Scale
Hero Heading
Page Title
Section Heading
Subsection Title
Card Title
Subtitle or lead paragraph text used below hero headings.
Body text for general content, descriptions, and paragraphs across the application.
Small text for captions, meta information, breadcrumbs and secondary labels.
Gradient Text Accent
Pronostics Hippiques
text-transparent bg-clip-text bg-linear-to-r from-yellow-300 to-amber-400Badges
Component Variants
Custom Inline Badges
Forms
Dark Theme Inputs
Standard Inputs
Ce champ est requis
Hero Patterns
ContentHero — Article Pages
Full-height hero for article/content pages (e.g. Quinté du Jour). Uses pt-16 pb-20 md:pt-24 md:pb-28.
Article Title
Subtitle text with max-w-2xl constraint for comfortable reading.
Utility Hero — Browse Pages
Compact hero for utility pages (Courses, Résultats, Pronostics). Uses pt-10 pb-12 md:pt-14 md:pb-16 to keep content above the fold.
Programme des Courses
Shorter subtitle to keep things compact.
Race Desk UI
Race desk is the default product language: compact panels, dividers, terminal tags, tabular numbers and functional racing accents. Use glass only where an overlay genuinely needs it.
Prix de Vincennes
2850m · Trot attelé · 16 partants
Plan column
Flat plan surface with dividers, not a floating glass card.
Surfaces
`rounded-md`, 1px border, dividers, no default blur.
Commerce
Amber is reserved for CTA, value, promo and turfos emphasis.
Domain
Red carries Quinté+, Challenge, warning and destructive state.
Default Hover Surface
raceDeskHoverClass · transparent default, border reveal, translucent hover fillSegmented Controls
Card Patterns
Prix de Vincennes
Vincennes — Trot Attelé
Taux de réussite
30 derniers jours
72%
+5% vs mois précédent
Limited Glass
Glass is limited to sticky navigation, modal backdrops and tiny overlays on imagery. Do not use it as the default panel, pricing or Salon shell.
Header Style
bg-white/80 dark:bg-neutral-950/85 backdrop-blur-xl border-bAuth Card Style
bg-white/5 backdrop-blur-md rounded-xl border border-white/10Navigation Pill
bg-white/10 backdrop-blur-xs border border-white/20Mode Toggle
bg-white/5 border border-white/10 · active: bg-emerald-600Racing UI
Race Header
Horse Rows
Bet Families (BET_FAMILIES)
Performance Graph
Icons (Lucide React)
Default size size-4 (16px). Common icons used throughout the app:
Spacing & Radius
Border Radius
Shadows
Key Gradients
Turfobet Design System — Internal reference