Spacing & Layout
Система отступов и компоновки в SDDS.
См. также: sizes.md — размерная шкала компонентов, interaction-model.md — правила взаимодействия.
Шкала отступов
Базовый шаг: 4px. Все значения кратны 4 — произвольные числа не допускаются.
SDDS не использует отдельные spacing-переменные (CSS-переменные вида --spacing/N отсутствуют). Компоненты применяют значения напрямую как hardcoded px. Шкала ниже — справочник допустимых значений.
Логика шкалы: каждый следующий шаг = +4px. Размер компонента определяет его внутренний padding; расстояния между компонентами выбираются из той же шкалы.
| Значение | px → T-shirt | Применение |
|---|---|---|
| 4px | — | Внутренние отступы мелких элементов, gap внутри Badge/Chip |
| 8px | — | Отступ между иконкой и лейблом внутри компонента |
| 12px | XS | Внутренний padding XS-компонентов |
| 16px | S | Внутренний padding S-компонентов |
| 20px | M | Внутренний padding M-компонентов |
| 24px | L | Внутренний padding L-компонентов |
| 28px | XL | Внутренний padding XL-компонентов |
| 32px | — | Расстояние между крупными блоками, gap между секциями формы |
| 40px | — | Секционный отступ, разделение смысловых групп |
Внутренние отступы компонентов
Кнопки (горизонтальный padding)
| Размер | Высота | Padding H |
|---|---|---|
| XS | 32px | 12px |
| S | 40px | 16px |
| M | 48px | 20px |
| L | 56px | 24px |
| XL | 64px | 28px |
Поля ввода (TextField, Select — горизонтальный padding)
| Размер | Высота | Padding H |
|---|---|---|
| XS | 32px | 12px |
| S | 40px | 16px |
| M | 48px | 20px |
| L | 56px | 24px |
| XL | 64px | 28px |
Горизонтальный padding полей совпадает с кнопками той же ступени — это обеспечивает визуальное выравнивание при соседстве в одной строке.
Расстояния между компонентами
Внутренние отступы компонентов задаются системой выше. Расстояния между компонентами выбираются из той же шкалы:
| Контекст | Gap |
|---|---|
| Иконка и лейбл внутри компонента | 8px |
| Поля в inline-группе (TextField + Button) | 8px |
| Поля в вертикальной форме | 16px |
| Группы полей между собой | 24px |
| Секции формы / смысловые блоки | 32–40px |
| Отдельные карточки / панели | 16–24px |
Правила
- Используйте только значения из шкалы — не произвольные числа
- Не смешивайте разные единицы (px и %) в одном блоке без явной причины
- Сохраняйте вертикальный ритм: отступы между элементами кратны 4px
- Иконка и лейбл разделяются 8px
- Не уменьшайте gap между полями формы ниже 16px — элементы сливаются визуально
- Один размер отступа на контекст: не смешивайте 16px и 24px между полями одной формы