Aller au contenu principal
Design System
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

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.

Source

Material Design 3 + Tailwind v4

Le package @qualiforma/ui-tokens expose des constantes TypeScript, l'app web les consomme via @themeen CSS, l'app mobile les utilise via StyleSheet.create.

Consommer

import {
  colors,
  typography,
  spacing,
  elevation,
  motion,
  radius,
} from "@qualiforma/ui-tokens";