Дизайн-система

UI Kit

Базовые компоненты интерфейса Boilerplate — типографика, формы, обратная связь и навигация, в едином визуальном языке.

1. Типографика

Заголовок H1

Заголовок H2

Заголовок H3

Заголовок H4

Заголовок H5
Заголовок H6

Lead-текст — крупный вводный абзац для подзаголовков и вступлений к разделам.

Обычный текст параграфа. Используется для основного содержимого — описаний, инструкций и текстовых блоков любой длины.

Мелкий текст — для сносок, подписей и второстепенной информации.

2. Таблицы

ПрофильПлатформаСтатусДата
alex_bInstagramАктивно9 июл 2026
dev.mikhailTelegramОжидание8 июл 2026
travel.ruVKАктивно7 июл 2026
art_dailyInstagramОшибка5 июл 2026

3. Формы

4. Alert

Сторис успешно сохранена в архив.
Новая версия приложения уже доступна к загрузке.
Профиль сменил настройки приватности — просмотр может быть ограничен.
Не удалось загрузить историю — попробуйте ещё раз.

5. Badge

Основное
Новое
Про
Активно
Ожидание
Ошибка
Лайт
Дарк

6. Buttons

7. Tooltips

9. Pagination

11. Цвета

Primary
oklch(20% 0.01 280)
Secondary
oklch(55% 0.19 295)
Success
oklch(52% 0.16 145)
Danger
oklch(55% 0.17 25)
Warning
oklch(70% 0.15 70)
Info
oklch(58% 0.14 235)
Light
oklch(97% 0.005 90)
Dark
oklch(20% 0.01 280)
Body
oklch(35% 0.01 280)

12. Градиенты

Фирменный знак
linear-gradient(135deg, oklch(68% 0.19 295), oklch(78% 0.14 180))
Заголовок Hero
linear-gradient(90deg, oklch(58% 0.19 295), oklch(66% 0.14 175))
CTA-блок (тёмный)
linear-gradient(120deg, oklch(22% 0.03 295), oklch(18% 0.02 260))
Кольцо сторис
conic-gradient(oklch(70% 0.19 295), oklch(75% 0.15 175), oklch(70% 0.19 295))
Онбординг — шаг 1
linear-gradient(135deg, oklch(70% 0.19 295), oklch(78% 0.14 180))
Онбординг — шаг 2
linear-gradient(135deg, oklch(72% 0.15 175), oklch(80% 0.1 140))
Онбординг — шаг 3
linear-gradient(135deg, oklch(66% 0.17 40), oklch(76% 0.13 70))
Фон просмотра сторис
linear-gradient(160deg, oklch(60% 0.05 295), oklch(30% 0.04 295))
Радиальная подсветка
radial-gradient(circle, oklch(90% 0.05 295) 0%, transparent 70%)