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

Скругления

Одна шкала токенов для углов. Имя и есть значение: radius-8 — это 8px. Контролы — 8, строки и карточки — 12, всплывающие панели — 16, диалоги — 20.

РуководствоТокены
Save draft Follow
<tk-button>Save draft</tk-button>
<tk-button shape="round">Follow</tk-button>

Как выбрать скругление

Угол растёт вместе с элементом: у мелких деталей скругление маленькое, у контейнеров крупное.

Элемент Токен
Кнопки, поля ввода, селекты, вкладки и другие контролы radius-8
Строки внутри панели, карточки, таблицы, блоки кода radius-12
Всплывающие панели: поповеры, меню, тосты radius-16
Диалоги и шторки radius-20
Мелкие детали: чекбокс, клавиша, полоска скелетона radius-4
Пилюли и круги: бейджи, теги, круглые кнопки, круглые аватары radius-full
Прямые углы radius-0

Все значения и переменные — в таблице токенов.

Вложенные углы

Когда скруглённый элемент лежит внутри другого, держите углы параллельными: внутренний радиус = внешний радиус − отступ. Если получается 0 или меньше, угол прямой.

16 − 8 = 8 
<div style="padding: var(--space-8); border: 1px solid var(--border-subtle); border-radius: var(--radius-16)">
  <tk-button full-width>16 − 8 = 8</tk-button>
</div>
  • У панели с radius-16 и отступом space-4 строки получают radius-12.
  • У сегментированного контрола с radius-8 и отступом space-2 сегменты получают radius-6.

Всплывающие панели

Всё, что всплывает над страницей с тенью, получает угол radius-16: поповеры, меню, списки выбора, всплывающие окна выбора даты, плавающая боковая панель, тосты. Строки внутри панели остаются с radius-12.

Исключение — низкие блоки. Радиус угла не может быть больше половины высоты блока, поэтому для radius-16 нужен блок высотой от 32px. Блок ниже, например подсказка, использует radius-8: с 16 он превратился бы в пилюлю. Прежде чем дать блоку radius-16, проверьте его высоту.

Кольца фокуса

Кольцо фокуса стоит на 2px снаружи контрола, поэтому его угол равен углу контрола плюс 2: у кнопки с radius-8 кольцо с radius-10. Если вы используете outline, браузер рисует это сам. Поэтому в шкале есть radius-10, radius-14 и radius-18. Подробнее в разделе Фокус.

Доступность

  • Сохраняйте смысл формы. Чекбокс — скруглённый квадрат, радиокнопка — круг. Не делайте чекбоксы круглыми, даже если всё остальное скруглено.
  • Форма угла не влияет на контраст, но слишком крупное скругление у мелкого элемента может скрыть его края.

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

✅ Можно ❌ Нельзя
Брать углы из шкалы radius-* Ставить 5px или 9px
radius-8 для контролов Скруглять каждый контрол по-своему
Контейнеру угол крупнее, чем у его контролов Карточке тот же угол, что у её кнопок
Вложенный угол = внешний − отступ Круглая кнопка в карточке с прямыми углами
radius-16 для каждой всплывающей панели выше 32px radius-16 у подсказки высотой 24px
radius-full для пилюль и кругов Круглый чекбокс
  • Отступы: отступ в формуле вложенных углов.
  • Фокус: кольцо вокруг контрола.
  • Тени и слои: тень, по которой видно всплывающую панель.