Shadows & élévation
Les ombres créent la hiérarchie entre surfaces : plus une surface est « proche » de l’utilisateur, plus l’ombre est prononcée.
Les niveaux d’élévation
Card standard
--shadowCard au hover
--shadow-mdDropdown, tooltip
--shadow-lgModal, overlay
--shadow-2xlEmpilement des surfaces
Chaque couche posée sur une autre gagne en élévation. Du fond d’app (aucune ombre) jusqu’à l’overlay flottant, l’ombre traduit la distance perçue à l’utilisateur.
Surface d’app — aucune ombre
Card — shadow
Card hover / élément imbriqué — shadow-md
Overlay / modal — shadow-2xl
À faire / À éviter
À faire
- Augmenter l’élévation au hover (
shadow→shadow-md). - En dark mode : ombre légère + bordure subtile.
À éviter
shadow-2xlsur une card simple.- Multiplier les ombres sur des éléments imbriqués.
- Ombres colorées hors charte.