Отступы и радиусы
Шкала отступов и радиусов Nupek и правила подбора радиуса под тип элемента.
Отступы
Все внутренние и внешние отступы в Nupek берутся из одной шкалы. Она построена так, чтобы шаги были заметны на глаз и не создавали промежуточных «почти одинаковых» значений.
4—space-1
8—space-2
12—space-3
16—space-4
24—space-5
32—space-6
| Токен | Значение | Типичное применение |
|---|---|---|
--space-1 | 4px | Зазор между иконкой и текстом |
--space-2 | 8px | Внутренний отступ тега, зазор в группе кнопок |
--space-3 | 12px | Внутренний отступ поля ввода |
--space-4 | 16px | Базовый отступ между элементами формы |
--space-5 | 24px | Внутренний отступ карточки |
--space-6 | 32px | Отступ между секциями внутри блока |
--space-7 | 48px | Отступ между крупными блоками |
--space-8 | 64px | Вертикальный ритм секций страницы |
--space-9 | 96px | Отступ вокруг героя на главной странице |
Радиусы
Радиус растёт вместе с размером и значимостью элемента. Минимальный радиус в системе - 6px: острых углов в Nupek нет ни у одного компонента.
| Радиус | Значение | Применение |
|---|---|---|
sm | 6px | Теги статусов, чекбоксы |
md | 12px | Кнопки, поля ввода |
lg | 20px | Карточки, коллауты |
xl | 28px | Крупные контейнеры и панели |
pill | 999px | Статус-теги и чипы-фильтры |
pill зарезервирован за элементами, которые по смыслу являются меткой или фильтром - не используйте его для кнопок или карточек, даже маленьких.