Hauteurs & Largeurs

Hauteurs

Hauteurs Notebook & smaller < 1400 Laptop 1440 Desktop 1700+ iMac 27″ 2000+
--height-2xs 22 24 26 28
--height-xs 25 28 31 34
--height-s 30 32 36 40
--height-m 38 40 46 52
--height-l 46 50 56 62
--height-xl 55 60 68 76
--height-2xl 64 68 76 84

Hauteurs en situation

boutons
champs
toggles

Largeurs

Largeurs Notebook & smaller < 1400 Laptop 1440 Desktop 1700+ iMac 27″ 2000+
--w-60 56 60 72 84
--w-80 75 80 94 108
--w-100 94 100 116 132
--w-120 113 120 138 156
--w-150 142 150 170 190
--w-180 170 180 210 240
--w-240 230 240 270 300
--w-300 280 300 340 380
--w-400 380 400 450 500
--w-500 470 500 560 620
--w-600 570 600 670 740
--w-700 660 700 780 860
--w-800 760 800 900 1000
--w-900 850 900 1020 1140
--w-1000 950 1000 1140 1280
--w-1100 1040 1100 1260 1420
--w-1200 1140 1200 1390 1580

Largeurs nommées

TokenValeurUsage
--width-contentvar(--w-700)colonne du digest
--width-sidebarvar(--w-300)sidebar de l’app
--width-onboardingvar(--w-500)colonne d’onboarding
--width-mobile430 pxplan de travail mobile — une référence, pas une largeur de composant
--width-desktop1440 pxplan de travail desktop — idem

En pratique

.w-240
.w-400
.w-600

Balisage

<!-- plafonné, rétrécit sous 400px -->
<div class="w-400">…</div>

<!-- plafonné et centré -->
<div class="w-700 w-center">…</div>

<!-- largeur dure, ne rétrécit jamais -->
<div class="w-240--fixed">…</div>

<!-- ou directement en CSS -->
.ma-modale { max-inline-size: var(--w-500); }