Mise en page & élévation

Espacement, rayons, bordures et élévation : les tokens structurels qui donnent au système sa régularité.

Espacement — 9 pas

8
12
16
20
24
32
40
48
64

Rayons & bordures

--radius-none
--radius-s
--radius-m
--radius-l
--radius-full

Bordures : --border-width-s 1px, -m 1.5px, -l 2px. Boutons et cartes prennent le rayon 8 ; panneaux et images le rayon 4 ; les avatars le rayon complet.

Élévation

--shadow-s carte au repos
--shadow-m modale, infobulle
--shadow-l carte survolée
--shadow-xl header flottant

Aucune ombre interne, aucune lueur, aucun flou d'arrière-plan. La carte survolée passe de l'ombre S à l'ombre L et sa bordure prend le bleu profond du Groupe : border-color: var(--brand-gr02).

Gabarit de page

--layout-page-width: 1440px    --layout-content-width: 1216px
--layout-gutter: 112px         --layout-header-height: 80px