Layout & elevation
Spacing, radius, borders and elevation : the structural tokens that give the system its consistency.
Spacing — 9 steps
8 12 16 20 24 32 40 48 64 Radius & borders
--radius-none --radius-s --radius-m --radius-l --radius-full Borders : --border-width-s 1px, -m 1.5px, -l 2px. Buttons and cards use radius 8 ; panels and images use radius 4 ; avatars use the full radius.
Elevation
--shadow-s resting card --shadow-m modal, tooltip --shadow-l hovered card --shadow-xl floating header No inner shadow, no glow, no background blur. The hovered card moves from shadow S to shadow L and its border turns to the Group's deep blue : border-color: var(--brand-gr02).
Page template
--layout-page-width: 1440px --layout-content-width: 1216px --layout-gutter: 112px --layout-header-height: 80px