Style Guide
Visual reference of colors, typography, components and patterns used across Turfobet.
Color Palette
Brand Colors
Surface hierarchy
The page is the darkest plane. Panels lift one step, headers lift one more, and seams stay close to their surfaces. Use strong seams for controls and selected boundaries only.
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
Badges are quiet metadata, not miniature buttons. Use a faint seam and inset fill for neutral labels, a low-opacity semantic tint for domain or status labels, and reserve stronger contrast for warnings and selected states. Prefer compact corners over pills unless the shape represents a count or live presence.
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, panel-header 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.
Sticky navigation
bg-panel/90 backdrop-blur-md border-b border-seamImage overlay
bg-black/35 backdrop-blur-sm on imagery onlyRacing UI
Race Header
Horse Rows
Bet Families (BET_FAMILIES)
Performance Graph
Icon semantics (Lucide React)
Lucide remains the implementation set. Use icons for actions, status, navigation and recognizable objects. Do not add them to metric cards or section headings for decoration. Default size issize-4 (16px).
Use icons when recognition helps
Prefer terminal identifiers for domain context
Identifiers carry race, course, product and plan meaning more directly than generic pictograms.
Spacing & Radius
Border Radius
Shadows
Key Gradients
Turfobet Design System — Internal reference