Fondations

Les tokens bruts qui composent le système. Toutes les couleurs sont en OKLCH pour une uniformité perceptuelle entre teintes.

Couleurs sémantiques

Tokens principaux pour le texte, les surfaces, les actions et les états. Disponibles via les classes Tailwind (text-primary, bg-card, border-border…).

background
--background
foreground
--foreground
card
--card
card-foreground
--card-foreground
popover
--popover
popover-foreground
--popover-foreground
primary
--primary
primary-foreground
--primary-foreground
secondary
--secondary
secondary-foreground
--secondary-foreground
muted
--muted
muted-foreground
--muted-foreground
accent
--accent
accent-foreground
--accent-foreground
destructive
--destructive
destructive-foreground
--destructive-foreground
success
--success
success-foreground
--success-foreground
warning
--warning
warning-foreground
--warning-foreground
info
--info
info-foreground
--info-foreground
border
--border
input
--input
ring
--ring

Charts

Palette pour Recharts. Choisies pour rester distinctes en dark mode.

chart-1
--chart-1
chart-2
--chart-2
chart-3
--chart-3
chart-4
--chart-4
chart-5
--chart-5

Sidebar

Tokens dédiés au composant Sidebar (shadcn) pour gérer son contraste indépendamment du reste.

sidebar
--sidebar
sidebar-foreground
--sidebar-foreground
sidebar-primary
--sidebar-primary
sidebar-primary-foreground
--sidebar-primary-foreground
sidebar-accent
--sidebar-accent
sidebar-accent-foreground
--sidebar-accent-foreground
sidebar-border
--sidebar-border
sidebar-ring
--sidebar-ring

HIRA — Niveaux de risque

Échelle de criticité utilisée par les modules HSE (HIRA, AuditQHSE, RiskControl).

risk-low
--risk-low
risk-medium
--risk-medium
risk-high
--risk-high
risk-critical
--risk-critical

Statuts

États transverses pour actions, audits, tickets, formations.

status-new
--status-new
status-in-progress
--status-in-progress
status-done
--status-done
status-late
--status-late

Typographie

Échelle typographique standard. Utilise les classes Tailwind text-*.

DisplayMulti SaaS — la plateformetext-5xl font-bold tracking-tight
H1Multi SaaS — la plateformetext-4xl font-bold tracking-tight
H2Multi SaaS — la plateformetext-3xl font-semibold tracking-tight
H3Multi SaaS — la plateformetext-2xl font-semibold tracking-tight
H4Multi SaaS — la plateformetext-xl font-semibold
BodyMulti SaaS — la plateformetext-base
SmallMulti SaaS — la plateformetext-sm
CaptionMulti SaaS — la plateformetext-xs text-muted-foreground

Espacement

Échelle d'espacement Tailwind (1 unité = 0.25rem = 4px).

p-1
4px
p-2
8px
p-3
12px
p-4
16px
p-6
24px
p-8
32px
p-12
48px
p-16
64px
p-24
96px

Border radius

Échelle d'arrondi basée sur --radius (0.625rem).

rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-3xl
rounded-full

Ombres

Échelle d'ombres Tailwind + l'ombre signature --shadow-elegant.

shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl

Gradients signature

Hero gradient

tsx
<div style={{ background: 'var(--gradient-hero)' }} />