Design System / Foundations / Spacing & Radii

Spacing & Radii

Шкала отступов в степенях четвёрки. Пять радиусов, каждый под свой класс компонентов. Не путать масштабы внутри одной поверхности — ритм держится этим.

Spacing scale

Геометрическая шкала, основанная на 4 px. Каждый шаг — значимое изменение. Не использовать промежуточные значения (12, 20, 28, 40) — ритм рассыпается.

--space-xs 4 px

Зазор внутри chip, между иконкой и текстом.

--space-sm 8 px

Между смежными мелкими элементами — badges, dots.

--space-md 16 px

Padding в ЛК-карточках, gap внутри карточки.

--space-lg 24 px

Gap между карточками в гридах. Базовая единица ритма.

--space-xl 32 px

Padding в маркетинг-карточках. Боковые поля контента в ЛК.

--space-2xl 48 px

Между section-header и контентом (mb-12).

--space-3xl 64 px

Внутренний отступ в hero. Vertical rhythm в документации.

--space-section-y 80 px

Между маркетинг-секциями (py-20). Базовый ритм страницы.

Радиусы

Тугие, архитектурные, согласованные. Один уровень на класс компонентов — нельзя смешивать sm и xl на одной поверхности.

8 px

Tabs, мелкие pills, secondary inputs

10 px

Standard inputs, мелкие кнопки

lg (default)

12 px

Primary buttons, large inputs, дефолтные карточки

16 px

Маркетинг-карточки, dashboard tiles, MI chat bubbles

full

9999

Status dots, avatars, pill badges

Vertical rhythm

Три поверхности — три ритма. Marketing дышит, ЛК работает, MI Analyst плотный. Внутри одной поверхности отступы константны — это и есть «ритм».

Marketing

Section py: 80
Header → body: 48
Card padding: 32
Card gap: 24
Inner gap: 16

ЛК Shell

Content p: 24/32
Card padding: 16–24
Card gap: 12–16
Inner gap: 8–12
Topbar: 56 высота

MI Analyst

Panel p: 12
Row padding: 8
Row gap: 4–8
Inline gap: 4
Tabular figures всегда

Правила применения

Правило	Объяснение	НЕ делать
Только значения шкалы	Любой spacing — один из `4/8/16/24/32/48/64/80`.	12, 20, 28, 40 px — «полу-токены».
Один радиус на класс	Все маркетинг-карточки `xl`; все ЛК-карточки `lg`; все кнопки `lg`.	Mix `sm` и `xl` на одной поверхности.
Gap, не margin	В гридах и flex — `gap`. Margin между siblings — только в типографике.	Per-element `margin-right` в ряду кнопок.
Symmetric padding	Карточка с padding `24` — значит, со всех четырёх сторон `24`.	`padding: 16 24 32 24` — нечитаемо, ломает ритм.
Section py = 80	Все секции маркетинга — `py-20`. Hero — `lg:py-28` (112).	Кастомные `py-16`, `py-24`.
Радиус наследуется внутрь	Если карточка `xl` (16 px), кнопка внутри — не больше `lg` (12 px).	Кнопка `xl` внутри карточки `lg` — ребёнок крупнее родителя.

Принципы

Spacing — это тоже типографика. Воздух между блоками читается как интервал между строками.
Удваивай или удваивай. Между шагами — ×2 (16 → 32 → 64). Промежуточных нет.
Радиус не декоративен. Он маркирует категорию: pill = status, xl = product tile.
Меньше — тише, больше — громче. Большие радиусы привлекают внимание — использовать осознанно.
Одна поверхность — одна плотность. Не mix marketing-spacing с ЛК-spacing на одной странице.

Все маркетинг-карточки = border-radius: 16 + padding: 32.

В ЛК dashboard все tiles = border-radius: 12 + padding: 16.

DON'T

Один tile в dashboard = 16, остальные = 12 «для акцента».

Padding 20 px «потому что 24 слишком много».

Источник токенов: colors_and_type.css · Назад: ← Типографика · К принципам: Layout →