saas-panel-1 · design book

Product / SaaS-тема · 2026-04-13 · 5 экранов-архетипов (auth, dashboard, profile, billing, create-entity). → Смотреть рабочий прототип (Navigo) · Родственный бук — marketing-dark-1.

1. Цвета

Dual-theme: тёмный shell + светлая content-зона. Shell наследует marketing, content — свои серые.

Shell (dark)
shell-bg#1C2032
shell-bg-deep#232025 (sidebar)
shell-surface#21253A
shell-surface-hover#2A2F4A
Content (light)
bg#EEEEEE
bg-alt#F5F5F5
surface#FFFFFF
Text (grayscale — не opacity!)
text#424242
text-secondary#595959
text-muted#878787 (H1/H2)
text-subtle#9A9DA4
text-disabled#A7A7A7
Brand + Status
brand#4E8EFD
brand-strong#2969D8
success#009D4F
warning#D43D10
error#DF1515

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

H1 Display · 56px · regular

H2 Display · 40px

H3 Section · 20px · text #424242

Body 16px — базовый размер (131-232 исп. на страницах ЛК).

Body 14px — навигация, meta, подписи (117 исп.).

Caption 13px uppercase

3. Кнопки

4. Инпуты и поля

По одному домену в строке

5. Табы

Управление
Регистрация
Перенос
Контент активного таба.

6. Бейджи

Активна Просрочен Ошибка Черновик

7. Алерты

Заявка успешно создана. Номер: #12345.
Срок оплаты истекает 26.05.2026.
Недостаточно средств на балансе. Пополните счёт.

9. Top bar

798.96₽
c78665
Силантьев С.В.
С

10. Service card

☁
Виртуальный хостинг 1
  • u145914V6-Speed
  • Место для вашего хостинга
🌐
Домены 3
  • marketchance.ru
  • marketstat.ru
  • marketstat.su

11. Payment method cards

Банковские карты
Без комиссии
Автоплатёж
По расписанию
Обещанный платёж
Доступно

12. Accordion (профиль)

Персональные данные
Контактная информация
Содержимое раздела.
Паспортные данные
Содержимое раздела.

13. Таблица

На живом сайте таблицы отсутствовали в семпле, но паттерн в SaaS — обязательный. Реконструировано.

ДоменТарифСтатусДо
marketchance.ruСтандартнаяАктивен02.04.2027
marketstat.ruПремиумИстекает08.08.2026
marketstat.suСтандартнаяАктивен23.08.2026

14. App layout

Имитация основного экрана ЛК: sidebar + top bar + content.

798.96₽
С
c78665

Список услуг

☁
Хостинг 1
  • u145914
🌐
Домены 3
  • marketchance.ru

15. Toggle switch

Класс на живом сайте — .switcher. Track 36×20px, thumb 16×16 с тенью. Easing cubic-bezier(0.12, 0.65, 0.32, 0.99), длительность 0.18s.

16. flexList (list vs table)

В ЛК нет `<table>` — табличные данные реализованы через div-grid. Класс на живом — .flexList.vStand.slim. Это важно: каждая строка — полноценный компонент, легко добавить вложенные элементы (toggle, бейдж, expand).

ДоменТарифДо
marketchance.ru Стандартная
marketstat.ru Истекает
marketstat.su Стандартная

17. Pagination

Классы: .paginator__item (обычная страница), .paginator__item-current (текущая). Квадратные pill-кнопки с glow.

1–5 из 47

19. Toast / notification

Класс — .popup-notification. На живом сайте — position: fixed; bottom: 1em; left: 1em; width: 300px;. На мобильном — стретчится по ширине (right: 1em; width: auto).

✓
Успех
Заявка #12345 создана.
!
Ошибка
Недостаточно средств на балансе.
i
Информация
Срок услуги истекает через 7 дней.

20. Мобильные брейкпоинты

Снято на 375×812 (iPhone-класс). Точные брейкпоинты не установлены.

Ключевые изменения на мобильном:

  • Sidebar НЕ превращается в drawer — он схлопывается в компактную полосу сверху (full-width). Гамбургера нет.
  • Top bar упрощается: баланс + номер клиента в одной линии, «Выйти» в том же ряду.
  • Service cards — одна колонка, full-width.
  • flexList — колонки стекуются вертикально в каждой строке.
  • Toast: width: auto, right: 1em; left: 1em; — на всю ширину.

Скриншот — screenshots/pages/09-mobile-dashboard.png