Guidelines de design

Ce document liste les bonnes pratiques et conventions à respecter dans notre implémentation du design system, au-delà des comportements par défaut de MUI. Il est mis à jour au fur et à mesure que de nouvelles règles sont identifiées.

Élévation / Ombres

Plusieurs composants MUI (Paper, Card, AppBar, Dialog, Menu, Accordion, etc.) appliquent une élévation par défaut via la prop elevation, qui génère une ombre portée (box-shadow) basée sur theme.shadows.

Dans notre application, les ombres liées à l'élévation ne sont pas utilisées. Notre design system privilégie des séparations visuelles via la couleur, la bordure ou l'espacement plutôt que via des ombres.

❌ À éviter

<Paper elevation={3}>
  <Typography>Contenu</Typography>
</Paper>

✅ À privilégier

<Paper elevation={0}>
  <Typography>Contenu</Typography>
</Paper>

Composants concernés

Pense à vérifier systématiquement les composants suivants, qui embarquent une élévation par défaut non nulle : AppBar (elevation={4} par défaut), Dialog, Menu, Popover, Snackbar, Accordion, Card.

À venir

D'autres règles seront ajoutées ici au fur et à mesure des décisions de design (couleurs, typographie, spacing, border-radius, etc.).