НачалоОсновыКомпонентыТексты
Обзор Цвет Типографика Отступы Скругления Глубина Фокус Движение Иконки Пропорции

Отступы

Одна шкала токенов отступов с шагом 4px. Имя и есть значение: space-16 — это 16px.

РуководствоТокены
Save Cancel 
<div style="display: flex; gap: var(--space-8)">
  <tk-button variant="primary">Save</tk-button>
  <tk-button>Cancel</tk-button>
</div>

Как пользоваться шкалой

  • Берите каждый gap, padding и margin из space-*. Все ступени кратны 4px, кроме трёх мелких, о которых ниже. Полный список — в таблице токенов.
  • Задавайте отступы на родителе: gap и padding у контейнера, а не margin у каждого дочернего элемента.
  • Чаще всего нужны 8, 16 и 24. Между разделами страницы — от 32 до 96.
  • space-0 убирает отступ.
  • Значения не зависят от размера экрана. Чтобы адаптировать вёрстку, выберите другую ступень.

Расстояние показывает связь

Элементы, которые стоят близко, читаются как одна группа. Чем больше расстояние, тем слабее связь. Пространство разделяет группы без линий.

Undo Redo
Cut Copy 
<div style="display: flex; flex-wrap: wrap; gap: var(--space-24)">
  <div style="display: flex; gap: var(--space-8)">
    <tk-button>Undo</tk-button>
    <tk-button>Redo</tk-button>
  </div>
  <div style="display: flex; gap: var(--space-8)">
    <tk-button>Cut</tk-button>
    <tk-button>Copy</tk-button>
  </div>
</div>
Ступень Между чем
space-8 элементы одной группы, например подпись и её поле
space-16 независимые элементы рядом друг с другом
space-24 группы внутри одного раздела
space-32 разделы страницы

Для связей одного рода берите одно и то же расстояние, тогда ритм считывается.

Мелкие ступени

space-2, space-6 и space-10 — единственные ступени вне шага 4px. Они нужны для внутренних отступов маленьких контролов, где шаг 4px слишком груб: space-6 — отступ внутри клавиши Kbd, space-10 — внутри большого поля ввода. Между блоками используйте ступени, кратные 4px.

Доступность

  • Группируйте пространством, а не только линиями или цветом. Понятная группировка помогает всем, в том числе людям под когнитивной нагрузкой.
  • Не выводите размер области нажатия из space-*. Размер контрола задаёт компонент, а не отступы вокруг него.

Ограничения

  • Отступы заданы в px. Они растут при масштабировании страницы, но не следуют за размером шрифта по умолчанию в настройках браузера.

Можно / нельзя

✅ Можно ❌ Нельзя
Брать значения из шкалы space-* Ставить 13px или 18px
gap и padding у контейнера margin у каждого дочернего элемента
space-8 внутри группы, от 24 между группами Один отступ на всё
Одно расстояние для одной и той же связи Чередовать 12 и 16 без причины
Давать разделам воздух от 32 до 96 Плотно набивать страницу ради компактности
Менять ступень, чтобы адаптировать вёрстку Вычислять «резиновые» значения между ступенями
  • Скругления: вложенные углы зависят от отступа.
  • Типографика: интерлиньяж стоит на той же сетке 4px.
  • Prose: отступы между блоками авторского текста.