Fondations
10 chapitres couvrant chaque jeton, échelle et convention qui alimente le système de design ePassLive.
Les fondations sont la source de vérité pour chaque décision visuelle dans ePassLive. Chaque couleur, chaque valeur d'espacement, chaque niveau d'élévation et chaque taille d'icône provient d'un jeton défini ici. Les composants consomment ces jetons — ils ne les redéfinissent jamais.
Pourquoi les fondations d'abord?
- Un changement met a jour tous les ecrans — la thematisation par jetons permet au mode sombre, aux changements de marque et aux variations de densite de toucher un seul fichier.
- L'accessibilite est integree — chaque ratio de contraste, duree d'animation et cible tactile est verifie selon WCAG 2.2 AA au niveau du jeton.
- Les composants restent declaratifs — les molecules et organismes lisent les jetons, ils n'embarquent pas leurs propres valeurs en pixels.
Les chapitres
Couleurs
Les jetons de couleur semantiques qui alimentent toutes les surfaces d'interface.
Ouvrir le chapitreTypographie
L'echelle typographique et les jetons de poids utilises sur la boutique.
Ouvrir le chapitreEspacement
L'echelle d'espacement de 4 pt et les jetons d'espace semantiques.
Ouvrir le chapitreDimensionnement
Jetons de dimension fixes et reactifs pour les icones, controles et conteneurs.
Ouvrir le chapitreOmbres
Jetons d'elevation pour les cartes, modales, tiroirs et popovers.
Ouvrir le chapitreRayons
L'echelle des rayons de coin et la semantique de confinement.
Ouvrir le chapitreIndice Z
L'echelle d'indices Z qui maintient les elements superposes previsibles.
Ouvrir le chapitreMouvement
Jetons de duree et d'acceleration, modeles de mouvement WCAG 2.3.3.
Ouvrir le chapitreMode sombre
Comment le système de jetons s'adapte au mode sombre.
Ouvrir le chapitreIconographie
Epaisseurs de trait, tailles de grille et conventions de nommage.
Ouvrir le chapitre