09:00Запланировано
Как выбрать премиальную уличную мебель для частного двора
Лиственница, порошковая окраска, антивандальная фурнитура — разбираем, на что смотреть при заказе скамей и пергол для резиденций класса premium.
Выбор
Типографика
Montserrat. Семейство одно — меняются размер, насыщение и межстрочный интервал.
h1Пример — Заголовок страницы (редко)
размер 30px · межстрочный 1.2
насыщение 700 (Жирный)
класс: text-h1
h2Пример — Заголовок раздела / dashboard
размер 22px · межстрочный 1.3
насыщение 700 (Жирный)
класс: text-h2
h3Пример — Подзаголовок секции
размер 18px · межстрочный 1.4
насыщение 600 (Полужирный)
класс: text-h3
h4Пример — Недельный switcher
размер 16px · межстрочный 1.4
насыщение 700 (Жирный)
класс: text-h4
bodyПример — Основной текст, поля ввода
размер 13px · межстрочный 1.5
насыщение 500 (Средний)
класс: text-body
uiПример — Sidebar, toolbar
размер 12px · межстрочный 1.4
насыщение 500 (Средний)
класс: text-caption
smallПример — Вторичный текст
размер 12px · межстрочный 1.5
насыщение 500 (Средний)
класс: text-small
captionПример — Подписи, L2 nav
размер 12px · межстрочный 1.4
насыщение 500 (Средний)
класс: text-caption
microПример — Badge на карточках, мета
размер 11px · межстрочный 1.4
насыщение 600 (Полужирный)
класс: text-[11px]
labelПример — Группы L2 sidebar
размер 10px · межстрочный 1.4
насыщение 700 (Жирный)
регистр: ВЕРХНИЙ
класс: text-[10px] uppercase
Шрифт: Montserrat · Кнопки md = 11px / 500 · Поля = body (13px / 500)
Цвета
Клик — копирует HEX.
Поля ввода
Слева — label над полем (42px). Справа — floating label: 12px по центру в покое, 11px вверх при вводе (56px).
Стандарт
Input
высота 42px · отступы по X 16px · шрифт 13px · радиус 8px · граница #C2D6FF · фон #F0F6FF
Подсказка под полем · 12px
Обязательное поле
Outlined · floating label
OutlinedInput
высота 56px · шрифт 12px · idle center · шрифт 11px · active top · радиус 8px
Подсказка под полем · 12px
Обязательное поле
Textarea
мин. высота 96px · отступы по X 16px · отступы по Y 12px · шрифт 13px · радиус 8px · граница #C2D6FF · фон #F0F6FF
Select
высота 42px · отступы по X 16px · шрифт 13px · радиус 8px · граница #C2D6FF · фон #F0F6FF · стрелка 16px
Enter — добавить · до 10 значений
ландшафтная архитектураверанда москва
TagInputField
мин. высота 56px · отступы по X 12px · отступы по Y 12px · шрифт 13px · радиус 8px · граница #C2D6FF · фон #F0F6FF · chip control-h 11px #5173BD
Коллекции 2026новости веранда
DismissibleChip
высота 42px · шрифт 11px · радиус 8px · фон #5173BD · текст белый · крестик 20px bg-white/20
Switch · Checkbox · Radio
Switch вкл.
высота 24px · ширина 44px · ползунок 20px · радиус круглый
Switch выкл.
фон border · ползунок слева
Checkbox
высота 16px · ширина 16px · радиус 8px · галочка 12px
Checkbox · частично
высота 16px · ширина 16px · полоска 8px
Radio group · карточка · шрифт 13px · отступы 12px
Выпадающие списки
FilterDropdown — фильтры в тулбарах (источники, база знаний, свежая база). SearchSelect и TreeSelect — выбор с поиском и иерархией.
FilterDropdown · триггер 42px · меню min 148px · отступ 4px
По умолчанию
высота 42px · мин. ширина 120px · отступы по X 12px · шрифт 12px · радиус 8px · граница #C2D6FF · фон #F0F6FF · подпись = label
Выбрано
высота 42px · текст mp-primary · font-medium · chevron mp-primary
Меню открыто
border mp-primary · shadow-mp-selected · пункт py-1.5 px-2 · 12px · selected #F0F6FF · hover #F8FAFE
Используется в SourceEntriesFilters, KbEntriesFilters, FreshBaseToolbar. Значение «all» показывает label; иначе — выбранный пункт.
SearchSelect · высота 42px · поиск 36px
TreeSelect · пункт L2 32px · поиск
Календари и период
DatePicker / DateRangePicker — выбор дат. PeriodRangeSwitcher — компактная навигация над доской свежей базы.
PeriodRangeSwitcher · стрелки 36×36px · как крестик drawer · label 12px bold
С календарём
высота 32px · ширина 32px · радиус круглый · border #C2D6FF · фон white · label min 132px
10 — 16 июня
Без календаря
высота 32px · ширина 32px · disabled opacity 40%
DatePicker · ширина 280px · ячейка 36×36px
июнь 2026 г.
ПнВтСрЧтПтСбВс
DateRangePicker · подсветка диапазона
июнь 2026 г.
10.06.2026 — 20.06.2026
ПнВтСрЧтПтСбВс
Ползунки
Slider · labeled
дорожка 6px · ручка 24px · обводка primary · риски внутри · процент над ручкой
Slider · default
дорожка 6px · радиус круглый · акцент primary
Сервисные иконки · 50 шт
7 тонов. Два варианта: с soft-фоном и без фона — цвет иконки сохраняется.
blue: Настройки / системаpurple: AI / автоматизацияgreen: Публикации / каналыpink: Действия / алертыorange: Аналитика / биллингteal: Медиа / файлыgray: Нейтральные
Настройки
Команда
Безопасность
Доступ
API ключи
Дашборд
База знаний
Источники
Telegram Bot
Нейросети
AI генерация
Автоматизация
Pipeline
Голос / аудио
Цели
Публикация
Расписание
Telegram
Рассылки
Репост
Запуск
Отложенные
Таймер
Изображения
Видео
Фото
Медиатека
Загрузка
Скачать
Документы
Аналитика
Динамика
Доли
Тариф
Оплата
Избранное
Уведомления
Удалить
Лайки
Пауза
Редактировать
Копировать
Обновить
Поиск
Фильтр
Теги
Хэштеги
Ссылки
Сетка
Список
С фоном
высота 40px · ширина 40px · радиус 8px · soft-фон тона
Настройки
Команда
Безопасность
Доступ
API ключи
Дашборд
База знаний
Источники
Telegram Bot
Нейросети
AI генерация
Автоматизация
Pipeline
Голос / аудио
Цели
Публикация
Расписание
Telegram
Рассылки
Репост
Запуск
Отложенные
Таймер
Изображения
Видео
Фото
Медиатека
Загрузка
Скачать
Документы
Аналитика
Динамика
Доли
Тариф
Оплата
Избранное
Уведомления
Удалить
Лайки
Пауза
Редактировать
Копировать
Обновить
Поиск
Фильтр
Теги
Хэштеги
Ссылки
Сетка
Список
Без фона
высота 40px · ширина 40px · прозрачный фон · цвет иконки по тону
Плитка: иконка 40×40px · подпись 10px · отступы 8px
Бейджи
ОпубликованоЗапланированоСогласованиеОшибка
Legacy
высота 20px · отступы по X 8px · шрифт 11px · радиус 8px · насыщение 500
ЗапланированоНа согласованииFAQ
Mediaplan
высота 22px · шрифт 11px · радиус 8px
ГенерацияГотовоОжиданиеОшибка
StatusChip
высота 24px · шрифт 11px · точка-пульс
Загрузка и статусы генерации
Spinner S
высота 16px · ширина 16px · толщина границы 2px
Spinner M
высота 24px · ширина 24px · толщина границы 2px
Spinner L
высота 40px · ширина 40px · толщина границы 3px
Готов к генерации
Нажмите «Сгенерировать»
В очереди
Ожидайте ~30 сек
Генерация текста…
GPT-4o · пост для Telegram
Прогресс65%
Пост создан
Добавлен в медиаплан
Ошибка генерации
Проверьте API ключ нейросети
Таблицы
| Публикация | Статус | Дата |
|---|---|---|
| Новость недели | Запланировано | 18.06.2026 |
строка ~52px · фон заголовка #F8FAFE
Медиаплан
Окна · Drawer · Toast · Skeleton
Drawer — боковая панель справа. Desktop 480–640px, mobile на весь экран. Анимация 200ms ease-out.
480px
Drawer sm
480px · CRUD-формы
560px
Drawer md
560px · редактор, AI
640px
Drawer lg
640px · формы с превью
Сохранено
Настройки обновлены