Fondations UI
Design system Be Better
Page temporaire de visualisation des tokens et composants réutilisables.
Couleurs
Tokens principaux définis dans Tailwind à partir de la charte graphique.
Bleu nuit
#0F172A
Violet principal
#6D28D9
Violet clair
#8B5CF6
Rose accent
#EC4899
Orange énergie
#F97316
Fond global
#FAF7FF
Lavande légère
#F5F3FF
Carte blanche
#FFFFFF
Texte principal
#111827
Texte secondaire
#6B7280
Succès
#22C55E
Alerte
#F59E0B
Erreur
#EF4444
Neutre
#CBD5E1
Dégradé signature
Violet principal vers rose accent puis orange énergie.
Boutons
Actions principales, secondaires et dangereuses.
Formulaires
Inputs et cases à cocher avec focus violet.
Cartes et typographie
Hiérarchie simple, lisible et aérée.
Habitudes du jour
Exemple de texte courant dans une carte blanche.
Information secondaire discrète.
Score du jour
Carte avec bordure utilisant le dégradé en accent.
Badges
États et accents.
Progress ring
Anneau de progression avec le dégradé signature, prévu pour les scores et objectifs.
Ce composant reste générique : il reçoit une valeur numérique et n'embarque aucune règle métier.