Systèmes d'ombres et d'élévation

L'élévation représente la superposition d’un élément par rapport à autre sur un axe Z.

Au sein du DSFR, l'élévation est notamment matérialise par une ombre placée sur les éléments mis en avant (élevés) , ainsi que par une couleur de fond, plus claire, en mode sombre.

On distingue 4 niveaux ou étages différents sur l’ensemble des composants du DSFR :

  • Base (default) : le niveau par défaut, sans manifestation visuelle.
  • Surélevé (raised) : niveau le plus bas, les éléments concernés sont mis en avant par rapport à la base mais existent dans le même contexte et ne se superposent pas (peut notamment servir à souligner une interaction).
  • Superposé (overlap) : les éléments concernés passent par-dessus les niveaux précédents (par exemple, lors d’un défilement ou l’ouverture d’un menu) ; pour autant, les niveaux précédents ne sont pas ignorés et partiellement visibles. En code, on trouve $overlap-over et $overlap-above pour gérer les cas où des éléments $overlap sont affichés en même temps sur l’écran (exemple : bandeau consent et menu déroulant).
  • Détaché (lifted) : les éléments concernés passent par-dessus les niveaux précédents, et ces derniers sont retirés du champ d’attention de l’utilisateur (par exemple via l’utilisation d’une surcouche assombrissante).
Élévation
Niveau
Fond (Bg)
Valeurs thème clair
Valeurs thème sombre
Tokens sketch
Tokens Figma
Composants
Base (default) Fond : $grey-1000 Fond : $grey-50 $background-default-grey Background :
$background/default-grey
Surélevé (raised) défaut Fond : $grey-1000
Ombre : 0, 2, 6, 0 rgba(0, 0, 18, 16%)
Fond : $grey-75
Ombre : 0, 2, 6, 0 rgba(0, 0, 18, 32%)
$background-raised-grey Background :
$background/elevation/raised-grey
Ombre :
$raised
Carte,
Header



alt Fond : $grey-975
Ombre : 0, 2, 6, 0 rgba(0, 0, 18, 16%)
Fond : $grey-100
Ombre : 0, 2, 6, 0 rgba(0, 0, 18, 32%)
$background-alt-raised-grey Background :
$background/elevation/alt-raised-grey
Ombre :
$raised
contrast Fond : $grey-950
Ombre : 0, 2, 6, 0 rgba(0, 0, 18, 16%)
Fond : $grey-125
Ombre : 0, 2, 6, 0 rgba(0, 0, 18, 32%)
$background-contrast-raised-grey Background :
$background/elevation/contrast-raised-grey
Ombre :
$raised
Carte
Superposé  (overlap) défaut Fond : $grey-1000
Ombre : 0, 4, 12, 0 rgba(0, 0, 18, 16%)
Fond : $grey-100
Ombre : 0, 4, 12, 0 rgba(0, 0, 18, 32%)
$background-overlap-grey Background :
$background/elevation/overlap-grey
Ombre :
$overlap
Navigation principale,
Sélecteur de langue.
alt Fond : $grey-975
Ombre : 0, 4, 12, 0 rgba(0, 0, 18, 16%)
Fond : $grey-125
Ombre : 0, 4, 12, 0 rgba(0, 0, 18, 32%)
$background-overlap-grey Background :
$background/elevation/alt-overlap-grey
Ombre :
$overlap
Gestionnaire de consentement
contrast Fond : $grey-950
Ombre : 0, 4, 12, 0 rgba(0, 0, 18, 16%)
Fond : $grey-150
Ombre : 0, 4, 12, 0 rgba(0, 0, 18, 32%)
$background-contrast-overlap-grey Background :
$background/elevation/contrast-overlap-grey
Ombre :
$overlap
Détaché
(lifted)
Fond : $grey-1000
Ombre : 0, 6, 18, 0 rgba(0, 0, 18, 16%)
Fond : $grey-75
Ombre : 0, 6, 18, 0 rgba(0, 0, 18, 32%)
$background-lifted-grey Background :
$background/elevation/lifted-grey
Ombre :
$lifted
Modale