Fondations
Motion
Trois durées, trois intentions. Les tokens --duration-* cadrent tout le
mouvement de Forme : on ne choisit pas une durée au feeling, on la choisit par type d'interaction.
Plus le geste est proche du doigt, plus c'est rapide.
Durées --duration-*
| Token | Durée | Bornes | Usage |
|---|---|---|---|
--duration-fast | 125ms | min 95 · max 165 | Hover, press, toggle — le retour immédiat au geste. |
--duration-medium | 300ms | min 225 · max 400 | Ouverture de menus, slideover, popovers. |
--duration-slow | 700ms | min 525 · max 935 | Transitions de page, grandes bascules. |
Chaque durée a une valeur nominale et des bornes min/max : reste dans la fourchette du token, ne
l'invente pas. fast pour ce qui répond au doigt,
medium pour ce qui s'ouvre, slow pour ce qui
change de contexte.
Aperçu — survole les cartes
Chaque carte anime la même translation, à sa durée. La différence de tempo est le message.
Ombres --shadow-*
L'élévation se lit par l'ombre. Trois niveaux, du repos à la couche flottante haute.
--shadow-low Élévation légère : cartes au repos, séparation douce.
--shadow-med Élévation moyenne : popovers, dropdowns, éléments flottants.
--shadow-high Forte élévation : modales, slideover, dialogues.
Des insets d'état complètent la famille pour le focus et le feedback :
--shadow-inset-hover, --shadow-inset-selected,
--shadow-inset-error, --shadow-inset-success,
--shadow-inset-warning.
✓ À faire
Mapper la durée sur l'intention : var(--duration-fast) au hover,
var(--duration-medium) pour un slideover.
✕ À éviter
Une durée en dur (transition: 250ms) ou une ombre box-shadow
codée à la main hors des tokens --shadow-*.