Shadows

Les shadows Sirdata indiquent qu’une surface se detache du canvas ou passe temporairement au-dessus d’une autre. Elles servent a clarifier la hierarchie et l’interaction, jamais a decorer systematiquement l’interface.

Les ombres restent sobres pour conserver une experience SaaS precise. Une bordure ou un changement de surface doit etre prefere quand aucune elevation fonctionnelle n’est necessaire.

Principes

Utiliser une ombre uniquement pour signaler une elevation ou une superposition.
Choisir le niveau le plus faible qui rend la hierarchie comprehensible.
Associer l’ombre a une surface, une bordure et un radius coherents.
Garder les cartes standards plates ou tres legerement elevees.
Reserver les fortes elevations aux menus, popovers, modals et overlays.

Elevation scale

Chaque niveau combine deux layers Figma. Le premier definit le contact avec la surface, le second donne la profondeur et la diffusion.

Shadow XS --shadow-xs

Separation minimale pour controles, petits champs ou surfaces presque plates.

Contact 0/0/1px + profondeur 0/2/4px.

Shadow SM --shadow-sm

Cards interactives, headers fixes et surfaces legerement detachees.

Contact 0/0/1px + profondeur 0/8/12px.

Shadow MD --shadow-md

Menus, dropdowns, popovers et panneaux contextuels.

Contact 0/4/8px + profondeur 0/12/24px.

Shadow LG --shadow-lg

Modals, overlays importants et surfaces au-dessus de toute la page.

Contact 0/8/16px + profondeur 0/24/48px.

Anatomy

Les shadows sont composees de quatre familles de tokens : position X, position Y, blur et couleur. Cette separation permet de rester aligne avec Figma tout en exposant un token compose utilisable directement dans CSS.

Niveau	Layer 1	Layer 2
XS	`0 0 1px --shadow-base-8`	`0 2px 4px --shadow-base-6`
SM	`0 0 1px --shadow-base-10`	`0 8px 12px --shadow-base-8`
MD	`0 4px 8px --shadow-base-10`	`0 12px 24px --shadow-base-12`
LG	`0 8px 16px --shadow-base-12`	`0 24px 48px --shadow-base-16`

Les couleurs --shadow-base-* proviennent des primitives Figma. Ne pas les utiliser directement dans un composant : utiliser le token compose correspondant.

Component mapping

Composant ou surface	Niveau recommande	Notes
Input, Checkbox, Toggle	Aucun ou XS	Preferer border et focus ring
Card standard	Aucun	Une card ne doit pas sembler flottante par defaut
Card interactive	XS ou SM	Seulement si l’elevation clarifie l’interaction
Header sticky	SM	Separation au moment du scroll
Dropdown, Menu	MD	Doit se detacher du contenu sous-jacent
Popover, Tooltip riche	MD	Associer a une bordure nette
Modal	LG	Ajouter un backdrop pour separer le contexte
Toast	MD ou LG	Selon sa position et sa priorite

Borders, radius and overlays

Border : une ombre diffuse peut disparaitre sur certains fonds. Conserver une bordure subtile sur les menus, popovers et modals pour garantir la separation.

Radius : la diffusion de l’ombre doit suivre la forme de la surface. Une Card en --radius-xl utilise son shadow sur le meme element que le background et la bordure.

Overlay : une modal ne doit pas compter uniquement sur --shadow-lg. Utiliser aussi un backdrop pour reduire visuellement le contexte de la page.

Nested surfaces : eviter d’empiler plusieurs shadows dans une meme card. Utiliser spacing, background et border pour structurer les contenus internes.

Product vs Marketing

Product : limiter les elevations pour garder une interface stable et dense. Les panels, tables et cards ne flottent pas sans raison fonctionnelle.

Marketing : une elevation legere peut renforcer une capture produit ou un asset, mais ne doit pas transformer toutes les sections en cartes flottantes.

Audience, ABConsent et ServerSide utilisent la meme echelle d’elevation. Les couleurs produit n’ont pas besoin de shadows specifiques.

Tokens CSS

:root {
  /* Figma layers */
  --shadow-md-layer1-x: var(--size-0);
  --shadow-md-layer1-y: var(--size-4);
  --shadow-md-layer1-blur: var(--size-8);
  --shadow-md-layer1-color: var(--shadow-base-10);

  --shadow-md-layer2-x: var(--size-0);
  --shadow-md-layer2-y: var(--size-12);
  --shadow-md-layer2-blur: var(--size-24);
  --shadow-md-layer2-color: var(--shadow-base-12);

  /* Composed token */
  --shadow-md:
    var(--shadow-md-layer1-x)
    var(--shadow-md-layer1-y)
    var(--shadow-md-layer1-blur)
    var(--shadow-md-layer1-color),
    var(--shadow-md-layer2-x)
    var(--shadow-md-layer2-y)
    var(--shadow-md-layer2-blur)
    var(--shadow-md-layer2-color);
}

.popover {
  box-shadow: var(--shadow-md);
}

Do / Don’t

Do	Don’t
Utiliser le niveau le plus faible qui clarifie la hierarchie.	Utiliser `shadow-lg` sur toutes les cards.
Associer shadow, border, radius et background.	Compter uniquement sur une ombre diffuse.
Elever menus, popovers et modals au-dessus du contenu.	Ajouter une elevation a un element non superpose.
Garder une echelle commune entre les produits.	Creer une shadow violette, verte ou bleue selon le produit.
Tester l’ombre sur les surfaces reelles.	Valider une shadow uniquement sur un fond blanc vide.

Accessibilite

Contraste : une ombre ne garantit pas une separation suffisante. Utiliser une bordure ou un changement de surface si la distinction est necessaire a la comprehension.

Focus : ne jamais remplacer un focus ring par une shadow d’elevation. Le focus doit rester explicite, visible et coherent avec la forme du controle.

Information : l’elevation seule ne doit pas indiquer un etat critique ou une selection. Ajouter un libelle, une icone, une bordure ou un changement de contenu.

Dark mode futur : les offsets et blurs peuvent rester stables, mais les couleurs devront etre adaptees. Les composants doivent consommer les tokens composes pour permettre cette evolution.

Performance : eviter les grandes ombres animees ou appliquees a de nombreuses lignes de table. Elles peuvent rendre le scroll moins fluide et brouiller la densite visuelle.