7 rôles · 11 stops · 2 schemes
Couleurs
Rôles MD3 (primary, secondary, tertiary, error, surface) adossés aux palettes Tailwind teal, emerald, stone — light + dark.
ExplorerDesign System@qualiforma/ui-tokens v0.1.0
Living Style Guide
Le langage visuel
de QualiForma.
Tokens, composants et règles de motion qui font tenir l'interface ensemble — du dashboard formateur à l'app mobile apprenant. Adossé à Material Design 3, exécuté avec du goût.
Sections du Design System
- 15 styles · Geist Sans + Mono
Typographie
L'échelle MD3 complète : Display, Headline, Title, Body, Label — 15 styles avec line-height, letter-spacing et weight calibrés.
Explorer - 16 steps · base 4px
Espacement
Échelle de 4px de base (0 → 32). S'aligne sur les utilities Tailwind p-1..p-32 sans changement pour les consommateurs.
Explorer - 6 levels · light + dark
Elevation
5 niveaux d'ombres MD3 teintées de teal — diffusion plutôt que noir pur — avec déclinaison dark.
Explorer - 13 durations · 10 easings
Motion
Durées MD3 (50 → 1000 ms) et easings — incluant les courbes signature Emil Kowalski déjà adoptées dans le code.
Explorer - 10 niveaux · 0 → 9999px
Radius
10 niveaux de border-radius — de none à full — avec des assignations canoniques par composant (Button, Card, Modal…).
Explorer - 8 composants · variantes + code
Composants
Showcase live des primitives UI (Button, Card, Input, Badge…) avec leurs variantes et code d'usage.
Explorer
Philosophie
Trois principes qui guident chaque décision.
Source unique de vérité
Tous les tokens vivent dans `@qualiforma/ui-tokens`. Web, admin et mobile partagent la même définition — un changement de palette se propage partout sans drift.
Material Design 3, fidèlement
Rôles sémantiques (primary, on-primary, container, on-container), échelle typographique 15 styles, élévation teintée. Aucun mapping fantaisiste — chaque token cite la spec MD3.
Tactile, pas décoratif
Les easings d'Emil Kowalski (out-expo, drawer) cohabitent avec les courbes MD3 standard. Chaque interaction renvoie un feedback (état, pression, hover) avant tout effet.