Размеры и отступы

Обе шкалы растут от базового шага --base: 4px: --size-Nx — габариты элементов (высоты контролов, диаметры аватаров), --space-Nx — промежутки (паддинги, гапы). Число в имени — множитель шага: --size-9x = 36px, --space-1-5x = 6px.

Размеры

Габариты элементов — высоты, ширины, диаметры

VariableValuePreviewDescription
--size-1xcalc(var(--size) * 1)= 4px-
--size-2xcalc(var(--size) * 2)= 8px4px
--size-3xcalc(var(--size) * 3)= 12px8px
--size-4xcalc(var(--size) * 4)= 16px12px
--size-5xcalc(var(--size) * 5)= 20px16px
--size-6xcalc(var(--size) * 6)= 24px20px
--size-7xcalc(var(--size) * 7)= 28px24px
--size-8xcalc(var(--size) * 8)= 32px28px
--size-9xcalc(var(--size) * 9)= 36px32px
--size-10xcalc(var(--size) * 10)= 40px36px
--size-11xcalc(var(--size) * 11)= 44px40px
--size-12xcalc(var(--size) * 12)= 48px44px
--size-13xcalc(var(--size) * 13)= 52px48px
--size-14xcalc(var(--size) * 14)= 56px52px
--size-15xcalc(var(--size) * 15)= 60px56px
--size-16xcalc(var(--size) * 16)= 64px60px
--size-17xcalc(var(--size) * 17)= 68px64px
--size-18xcalc(var(--size) * 18)= 72px68px
--size-19xcalc(var(--size) * 19)= 76px72px
--size-20xcalc(var(--size) * 20)= 80px76px
--size-21xcalc(var(--size) * 21)= 84px80px
--size-22xcalc(var(--size) * 22)= 88px84px
--size-23xcalc(var(--size) * 23)= 92px88px
--size-24xcalc(var(--size) * 24)= 96px92px
--size-25xcalc(var(--size) * 25)= 100px96px
--size-26xcalc(var(--size) * 26)= 104px100px
--size-27xcalc(var(--size) * 27)= 108px104px
--size-28xcalc(var(--size) * 28)= 112px108px
--size-29xcalc(var(--size) * 29)= 116px112px
--size-30xcalc(var(--size) * 30)= 120px116px
--size-31xcalc(var(--size) * 31)= 124px120px
--size-32xcalc(var(--size) * 32)= 128px124px
--size-33xcalc(var(--size) * 33)= 132px128px
--size-34xcalc(var(--size) * 34)= 136px132px
--size-35xcalc(var(--size) * 35)= 140px136px
--size-36xcalc(var(--size) * 36)= 144px140px
--size-37xcalc(var(--size) * 37)= 148px144px
--size-38xcalc(var(--size) * 38)= 152px148px
--size-39xcalc(var(--size) * 39)= 156px152px

Отступы

Промежутки — паддинги, гапы, маргины

VariableValuePreviewDescription
--space-0-5xcalc(var(--space) * 0.5)= 2px-
--space-1xcalc(var(--space) * 1)= 4px2px
--space-1-5xcalc(var(--space) * 1.5)= 6px4px
--space-2xcalc(var(--space) * 2)= 8px6px
--space-3xcalc(var(--space) * 3)= 12px8px
--space-3-5xcalc(var(--space) * 3.5)= 14px12px
--space-4xcalc(var(--space) * 4)= 16px14px
--space-5xcalc(var(--space) * 5)= 20px16px
--space-6xcalc(var(--space) * 6)= 24px20px
--space-7xcalc(var(--space) * 7)= 28px24px
--space-8xcalc(var(--space) * 8)= 32px28px
--space-9xcalc(var(--space) * 9)= 36px32px
--space-10xcalc(var(--space) * 10)= 40px36px
--space-11xcalc(var(--space) * 11)= 44px40px
--space-12xcalc(var(--space) * 12)= 48px44px