Палитра, типографика, компоненты и механика работы — от потока сообщений до DLP.
Всё, что нужно, чтобы собрать рабочие экраны.
ЦветNavy 800
ПриоритетWarn 500
СтатусOK 500
ВД
Scroll
01 · Цвет
Палитра с примерами применения.
Каждый токен показан вместе с UI-фрагментом, где он работает. Navy — первичный, зеленый — для акцента,
семантические цвета — для статусов и классификации документов.
17 детальных превью компонентов системы. Кликните на карточку, чтобы открыть полную версию с примерами и спецификациями.
Actions
Кнопки
ОтправитьОтменаПодробнее
Forms
Поля ввода
Identity
Аватары
ВДИААБ+3
Status
Чипы и бейджи
ПУБДСПКС
Messaging
Пузыри сообщений
Привет!Добрый день
Security
DLP баннеры
⚠ Проверка политик...
✕ Отправка заблокирована
Brand
Бренд-локап
ВОЛГА‑ДНЕПР
Icons
Иконки
Color
Основные цвета
Color
Семантические цвета
Color
Нейтральные оттенки
Style
Эlevation / Тени
Style
Spacing и скругления
Brand
Мотив взлётной полосы
Typography
Типографическая шкала
Aa12·14·16·18·24px
Typography
Гарнитуры
PT SerifInter · System
Компонент
04 · DLP
Потоки сообщений под контролем.
Кликните по отделу — увидите, кто с кем переписывается внутри. Кликните по паре — увидите имитацию диалога,
как человек набирает, стирает и пересылает сообщения. Линии с замком — защищённые E2EE‑каналы руководителей:
внутри них даже DLP видит только шум.
Отделы//
открытый поток E2EE (шифр.) DLP блок
Лётная служба
12 человек · 3 онлайн
Операционный центр
24 человека · 8 онлайн
ИА
Иван Аксёнов
Командир ВС
ДСП
Лог действий · DLP
E2EE · канал руководства · расшифровка недоступна
DLP видит только метаданные: длина сообщения, отправитель, время. Содержимое — зашифровано end-to-end.
05 · Чат
Напишите сообщение — собеседник ответит.
Имитация бытового чата: 20 подготовленных реплик. Можно набрать своё сообщение, выбрать подсказку
или просто нажать Enter — бот ответит одной из подходящих фраз.
ИА
Иван
в сети
Сегодня
Привет! Как дела?14:28
06 · Запрос контакта
Согласование перед первым сообщением.
Чтобы написать в другой отдел, нужно отправить запрос. Запустите сценарий — увидите реакцию руководителя
смены, таймер согласования и результат (approve / reject / escalate).
Ход согласования
1
Запрос отправленВы оформляете заявку на контакт
2
Согласование у руководителяН. Шлыков получает уведомление
—
3
DLP-проверкаАвтоматическая проверка политик
4
Контакт установленОткрыт чат с согласованным допуском
Заполните форму слева и нажмите «Запросить контакт».
07 · UI kit
Все экраны в одном холсте.
Web-десктоп, мобильный web, iOS, macOS, Windows — с компонентами, реальными состояниями и шаблонами.