07
Отступы
Базовая 4px шкала плюс плавный секционный шаг. Контейнеры ограничены тремя ширинами.
Шкала
xs
4px
4px
sm
8px
8px
md
16px
16px
lg
24px
24px
xl
40px
40px
2xl
60px
60px
3xl
80px
80px
section
clamp(60px, 10vw, 120px)
clamp(60px, 10vw, 120px)
gutter
20px
20px
container-px
22px
22px
Контейнеры
| Token | Width | Use | Anchor |
|---|---|---|---|
| content | 980px | default reading-width container | bg:container:content |
| wide | 1440px | wide marketing sections | bg:container:wide |
| narrow | 680px | narrow text columns, FAQ answers | bg:container:narrow |
| pricing-grid | 1120px | pricing grid max-width | bg:container:pricing-grid |
Скругление
| Token | Value | Use | Anchor |
|---|---|---|---|
| skip-link | 0 0 4px 0 | skip-link bottom-right corner | bg:radius:skip-link |
| chip | 4px | small chip and badge | bg:radius:chip |
| control | 8px | default control and button | bg:radius:control |
| related | 12px | related cards, icon tile | bg:radius:related |
| card | 16px | feature cards, GEO block | bg:radius:card |
| pricing-card | 28px | pricing card | bg:radius:pricing-card |
| pill | 9999px | pill, toggle, hero badge | bg:radius:pill |