Capacités du template — système de design, chrome, blocs restaurant et fonctionnalités interactives.
Système de couleurs complet affichant toutes les palettes en thème clair et sombre. Survolez un échantillon pour copier sa valeur.
Échelle 100–900 (mode clair)
primary-100
--primary-100
primary-200
--primary-200
primary-300
--primary-300
primary-400
--primary-400
primary-500
--primary-500
primary-600
--primary-600
primary-700
--primary-700
primary-800
--primary-800
primary-900
--primary-900
Échelle 100–900 (mode clair)
secondary-100
--secondary-100
secondary-200
--secondary-200
secondary-300
--secondary-300
secondary-400
--secondary-400
secondary-500
--secondary-500
secondary-600
--secondary-600
secondary-700
--secondary-700
secondary-800
--secondary-800
secondary-900
--secondary-900
Échelle 100–900 (mode clair)
accent-100
--accent-100
accent-200
--accent-200
accent-300
--accent-300
accent-400
--accent-400
accent-500
--accent-500
accent-600
--accent-600
accent-700
--accent-700
accent-800
--accent-800
accent-900
--accent-900
Échelle 100–900 (mode clair)
background-100
--background-100
background-200
--background-200
background-300
--background-300
background-400
--background-400
background-500
--background-500
background-600
--background-600
background-700
--background-700
background-800
--background-800
background-900
--background-900
Échelle 100–900 (mode clair)
foreground-100
--foreground-100
foreground-200
--foreground-200
foreground-300
--foreground-300
foreground-400
--foreground-400
foreground-500
--foreground-500
foreground-600
--foreground-600
foreground-700
--foreground-700
foreground-800
--foreground-800
foreground-900
--foreground-900
Échelle 100–900 (mode clair)
muted-100
--muted-100
muted-200
--muted-200
muted-300
--muted-300
muted-400
--muted-400
muted-500
--muted-500
muted-600
--muted-600
muted-700
--muted-700
muted-800
--muted-800
muted-900
--muted-900
Échelle 100–900 (mode clair)
destructive-100
--destructive-100
destructive-200
--destructive-200
destructive-300
--destructive-300
destructive-400
--destructive-400
destructive-500
--destructive-500
destructive-600
--destructive-600
destructive-700
--destructive-700
destructive-800
--destructive-800
destructive-900
--destructive-900
Échelle 100–900 (mode clair)
error-100
--error-100
error-200
--error-200
error-300
--error-300
error-400
--error-400
error-500
--error-500
error-600
--error-600
error-700
--error-700
error-800
--error-800
error-900
--error-900
Échelle 100–900 (mode clair)
warning-100
--warning-100
warning-200
--warning-200
warning-300
--warning-300
warning-400
--warning-400
warning-500
--warning-500
warning-600
--warning-600
warning-700
--warning-700
warning-800
--warning-800
warning-900
--warning-900
Échelle 100–900 (mode clair)
success-100
--success-100
success-200
--success-200
success-300
--success-300
success-400
--success-400
success-500
--success-500
success-600
--success-600
success-700
--success-700
success-800
--success-800
success-900
--success-900
Échelle 100–900 (mode clair)
info-100
--info-100
info-200
--info-200
info-300
--info-300
info-400
--info-400
info-500
--info-500
info-600
--info-600
info-700
--info-700
info-800
--info-800
info-900
--info-900
Jetons de design de haut niveau qui s'adaptent au thème
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
border
--border
input
--input
ring
--ring
error
--error
warning
--warning
success
--success
info
--info
Couleurs pour la visualisation de données
chart-1
--chart-1
chart-2
--chart-2
chart-3
--chart-3
chart-4
--chart-4
chart-5
--chart-5