UI Kit — это не просто набор красивых кнопок. Это система правил, стилей и компонентов, которая помогает дизайнеру быстро собирать аккуратные, понятные и единые интерфейсы.
TypographyColorsButtonsInputsGrid
Как читать эту страницу
Каждый блок объясняет один элемент UI Kit: что это, зачем нужен, где применяется и как выглядит на практике.
T
FoundationsБаза системы: текст, цвет, сетка
01
▣
ComponentsКнопки, карточки, формы, меню
02
↔
ResponsiveПравила адаптива под экраны
03
◆
Единый стиль
Интерфейс выглядит цельно: одинаковые заголовки, цвета, отступы и состояния.
⚡
Скорость
Не нужно каждый раз придумывать кнопку, карточку или форму с нуля.
☷
Гибкость
Один и тот же интерфейс легче адаптировать под desktop, tablet и mobile.
✓
Качество
Меньше визуального хаоса, случайных решений и ручных правок.
1
Typography
Типографика отвечает за иерархию информации. Пользователь должен сразу понимать, где главный заголовок, где описание, где подпись, а где текст кнопки.
H1
64 / 72 · Bold
Заголовок страницы
H2
48 / 56 · Bold
Заголовок секции
H3
32 / 40 · Semibold
Заголовок карточки
H4
24 / 32 · Semibold
Небольшой заголовок
P1
20 / 32 · Regular
Крупный lead-текст для первых экранов и важных описаний.
P2
16 / 26 · Regular
Основной текст интерфейса. Используется чаще всего: карточки, описания, формы, обычные абзацы.
P3
14 / 22 · Regular
Вторичный текст, metadata, дополнительные описания.
Caption
12 / 18 · Regular
Мелкая подпись, дата, helper text, copyright.
Label
14 / 14 · Medium
Текст кнопки
Overline
12 / 16 · CAPS
New collection
Premium product
Собирайте интерфейсы быстрее
Используйте готовую типографическую систему, чтобы не подбирать размеры текста вручную в каждом новом блоке.
H2 Секция
H3 Карточка
P2 Описание
Правило: сначала создаём Text Styles, а уже потом используем их внутри компонентов: кнопок, карточек, форм, модалок и навигации.
2
Colors
Цветовая система помогает не выбирать цвета на глаз. В UI Kit нужны брендовые цвета, цвета статусов, фоны, границы и цвета текста.
PrimaryОсновной брендовый цвет
#6647FF
AccentАкцент и промо
#FF4FB3
SuccessУспешное действие
#20B96D
WarningПредупреждение
#F5A400
ErrorОшибка
#EF4444
TextИерархия текста
#101426
✓
Success Оплата прошла успешно. Пользователь может продолжить.
!
Warning Проверьте данные перед отправкой формы.
×
Error Поле заполнено неверно. Нужно показать причину.
i
Info Новая версия макета уже доступна в UI Kit.
Правило: в интерфейсе должен быть не один цвет, а система оттенков: основной, светлый фон, hover, pressed, disabled.
3
Buttons
Кнопки отвечают за действия. Важно заранее продумать типы кнопок и состояния, чтобы интерфейс не собирался из случайных вариантов.
Default
Hover
Pressed
Disabled
Loading
Primary
Secondary
Ghost
Icon
✓ Делать
Primary — для главного действия
Secondary — для альтернативного действия
Disabled — если действие недоступно
× Не делать
5 главных кнопок на одном экране
Разные радиусы у похожих кнопок
Текст кнопки без понятного действия
4
Inputs
Поля ввода нужны для форм, поиска, фильтров и настроек. Хороший input всегда показывает состояние: обычное, фокус, ошибка, успех или disabled.
Default
Focus
Error
Success
Disabled
Input
Search
Select
Подсказка: у полей ввода обязательно нужны label, placeholder, helper text и error message. Без этого форма выглядит красиво, но плохо объясняет пользователю, что делать.
5
Cards
Карточки группируют информацию в отдельные смысловые блоки. Они особенно полезны в каталогах, блогах, личных кабинетах, dashboard и лендингах.
◎
Product Card
Товар, цена, рейтинг, кнопка покупки.
5 990 ₽★ 4.8
▤
Article Card
Обложка, заголовок, дата и краткое описание материала.
А
Profile Card
Профиль пользователя, роль, статистика и действие.
Stats Card
Метрики, графики, рост, аналитика.
24 560+12.5%
Правило карточки: внутри должен быть понятный порядок: визуал → заголовок → описание → действие. Не превращайте карточку в склад всех элементов сразу.
6
Navbar
Навигация помогает пользователю понимать, где он находится, куда может перейти и какие основные разделы есть в продукте или на сайте.
◆ Brand
ГлавнаяКаталогО насБлогКонтакты
◆ Brand
ВсеНовыеПопулярныеРекомендованныеИзбранное
Главная›Каталог›Ноутбуки›MacBook Pro
⌂ Главная▣ Каталог☆ Избранное⚙ Настройки
Виды навигации: desktop navbar, mobile header, sidebar, tabs, breadcrumbs, bottom navigation.
7
Modals
Модальные элементы фокусируют внимание пользователя. Их используют для подтверждений, настроек, уведомлений, фильтров и дополнительных действий.
Удалить файл?
Это действие нельзя будет отменить. Лучше явно объяснить последствия.
Настройки
Drawer хорошо подходит для боковых панелей, фильтров и настроек.
Успешно!
Короткий popup сообщает результат действия и не перегружает экран.
Это tooltip: короткая подсказка рядом с элементом.
Bottom Sheet
Удобен на мобильных экранах для фильтров и быстрых действий.
✓ Делать
Оставлять одно главное действие
Писать понятный заголовок
Добавлять кнопку отмены
× Не делать
Показывать модалку без причины
Прятать важные условия
Делать слишком много текста
8
Spacing
Отступы создают ритм интерфейса. Если отступы случайные, даже красивые элементы начинают выглядеть неряшливо.
4
8
12
16
24
32
48
64
База: чаще всего используют шаг 4 или 8 px. Например: 8, 16, 24, 32, 48, 64.
9
Grid
Сетка помогает строить аккуратные макеты. Для страницы в стиле Tilda удобно использовать контейнер 1200 px и 12 колонок на desktop.
Desktop1200 px · 12 колонок
Для лендингов, dashboard, каталогов
Tablet768 px · 8 колонок
Для планшетов и промежуточных экранов
Mobile390 px · 4 колонки
Для мобильной версии и узких экранов
Правило адаптива: не нужно делать десятки версий. Обычно достаточно Desktop, Tablet и Mobile, а внутри использовать Auto Layout, min/max width и понятную сетку.