Контекст всегда рядом
Рекламодатель, период и уровень иерархии видны до первого действия.
Дизайн-система Typography / v0.10
01 / НАПРАВЛЕНИЕ
Больше ясности.
Меньше шума.
Рабочая среда для управления CTV-рекламой.
Данные, действия и структура кампаний — в одном визуальном языке.
Цвет несёт смысл
Фиолетовый — действие. Зелёный — показы. Оранжевый — внимание.
Плотность без перегрузки
Ровный ритм, спокойные поверхности и выровненные числовые колонки.
Источники: палитра Figma 255:2794 и концепты страницы 0:1. Использована локальная копия от 23.09.2026; актуальная онлайн-версия недоступна (403). Область ревью: экран входа на рабочем стенде и локальные исходники DSP WEB. Внутренние экраны ниже — предложения по исходникам, с вымышленными данными; проверка авторизованных сценариев на стенде ещё требуется.
02 / ДИЗАЙН-РЕВЬЮ
Основа есть. Нужна последовательность.
Сохраняем существующие Inter, фиолетовый акцент и семантические токены. Устраняем расхождения между компонентами и уточняем правила их применения.
P1 · СогласованностьКод
Две палитры статусов
В semantic.css успех задан лаймовым #82BA00, а StatusChip использует собственный зелёный #047857 и отдельные hex-цвета.
Решение v0.2: точная палитра Figma. Лаймовый индикатор + текст Neutral/black на Light-green; красный текст Error/darker-red на Light-red.
assets/design/semantic.css
components/widgets/StatusChip.vueP1 · ЧитаемостьСтенд + код
Вход живёт отдельно от продукта
На стенде синий фон и оранжевая кнопка, в основной системе — фиолетовый акцент. В исходниках у полей входа нет постоянных видимых подписей.
Решение: общий акцент и видимые label. Оранжевый сохраняем в фирменном знаке. Ошибка остаётся рядом с полем.
pages/auth/LoginPage.vueP2 · МасштабированиеКод
Локальные стили обходят токены
widgets.css переопределяет цвета Element Plus прямыми значениями. DashboardPage задаёт собственные размеры заголовка и отступов.
Решение: общий PageHeader, Toolbar и TableShell; компоненты обращаются к смысловым переменным.
assets/styles/widgets.css:172
pages/DashboardPage.vue:28P2 · НавигацияПроектное предложение
Явный уровень управления
Маршруты уже разделяют кампанию, структуру, флайт и группу. Важно сохранять этот контекст при переходах и редактировании.
Решение: хлебные крошки, дерево состава и заголовок выбранной сущности. Настройки и состав — отдельные вкладки.
router/index.ts
pages/campaigns/CampaignStructurePage.vueP1 · Бюджет и наследованиеПроверено по коду
Бюджет принадлежит кампании
FlightFormPage и AdGroupFormPage показывают бюджет только справочно (CTV-161). В v0.2 это учтено: редактировать бюджет на дочерних уровнях нельзя.
В прототипе: наследуемый CPM, восстановление связи с родителем и проверка собственных дат флайта внутри кампании.
pages/campaigns/FlightFormPage.vue:533
pages/campaigns/AdGroupFormPage.vue:433P1 · Жизненный цикл медиаПредложение
Файл, версия и объявление
В CreativeSetPage уже есть просмотр, паспорт, редактирование и замена исходника. Сохраняем эти функции, делаем использование файла видимым до удаления.
В прототипе: просмотр оригинала, метаданные, ссылки на объявления, новая версия отдельным файлом. Используемый файл защищён от удаления.
pages/creatives/CreativeSetPage.vue:263–480P2 · Загрузка и диагностикаКод + предложение
Готовность — отдельное состояние
Текущий DSP различает транскодирование, ошибки и повторный запуск. Браузерный анализ размеров не заменяет серверную проверку кодека и формата.
В прототипе: очередь локального анализа, ошибки типа и размера файла, повтор при сбое, отмена. Для объявления отдельно проверяются HD и Full HD.
utils/mediaProbe.ts
utils/creativeFormatRules.tsP2 · Завершённый сценарийРеализовано в HTML
Сохранение ведёт к следующему шагу
После создания кампании открывается состав. После флайта — группы. После группы — объявления. Пользователь сохраняет контекст без повторного поиска.
В прототипе: реальные связи сущностей, локальное сохранение, отмена и предупреждение о несохранённых изменениях форм.
workflows.js / состояние прототипаИсходный экран входа · снимок стенда 13.11.2026
03 / ОСНОВА
Спокойный фон. Точный акцент.
24 образца из узла палитры Figma. Акцент можно временно изменить для сравнения.
Точные примитивы Figma показаны выше: 21 сплошной цвет и 3 градиента. Заголовок исходного фрейма говорит «25 color styles», но в сохранённом узле находятся 24 образца; недостающий цвет не добавляли. Светлая подложка выделения — производная: 6% акцента на белом. Для успеха и предупреждения используем тёмный текст из Neutral, цветной маркер и исходную подложку. Собственные зелёные и коричневые из v0.1 убраны.
Концепт / Page 1
Сайдбар 252 px, заголовки 36 px, основной текст 15 px, поля 56 px с радиусом 12 px. Пошаговая форма и постоянная правая сводка — по узлам 378:4909 и 1278:16683.
Адаптация для DSP
Сохраняем геометрию и иерархию. В узком контейнере уменьшаем поля до 48 px, сводку переносим вниз. Кампания > флайт > группа > объявление остаются отдельными сущностями.
Данные становятся яснее
Макет продукта: H1 36/44 · H2 24/32 · H3 18/26
Основной текст 16/25 · Подпись 14/21
1 284 560,00 ₽Табличные цифры; денежные значения выравниваем вправо. «—» означает отсутствие данных, 0 — измеренный ноль.
Шкала отступов: 4 / 8 / 12 / 16 / 24 / 32 / 48
Поля 48/56 px · Кнопка 48 px · Строка 64 px
Радиус поля 12 px · Карточка 12 px · Панель 16 px
Фокус: обводка 2 px с отступом 3 px. На узком экране фильтры переносятся, таблица прокручивается внутри контейнера.
Контраст текста · WCAG AA ≥ 4,5:1
Расчёт выполняется для указанных пар цветов. После смены акцента проверяйте его заново. Цвет статуса всегда сопровождается подписью.
04 / КОМПОНЕНТНАЯ СХЕМА
Dropdown
Поиск, выбранная строка, клавиатура, Escape и состояние disabled.
Календари
Сетка дней, смена месяца и года, быстрые периоды, время, применение и сброс.
Подсказки и иконки
Кредитная линия
SVG-иконки общей библиотеки CTV HOUSE. Тёмная подсказка: Golos Text 14 px, радиус 6 px, стрелка и показ по фокусу.
Собираем интерфейс из общих частей.
Токены > Кнопки / поля / статусы > Фильтры / таблицы / формы > Экраны
Действия
Одно главное действие на область. Удаление — с явным подтверждением.
Статусы доставки
Идут показы На паузе! Ошибка Черновик Завершена
Статус доставки отделяем от модерации и причин остановки.
Поля и выбор
Укажите значение больше 0 ₽Состояния области данных
Правила композиции
- PageHeader: название, контекст, основное действие.
- FilterBar: поиск, статус, период, сброс.
- TableShell: число результатов, заголовки, итоги, строки, пагинация.
- FormSection: заголовок, подписи, подсказки, ошибки.
- ActionBar: отмена, сохранение, состояние операции.
Ссылки открывают сущности; чекбокс выбирает строку; меню содержит дополнительные действия. Иконки получают доступные названия.
05 / ОСНОВНЫЕ ЭКРАНЫ
Один продукт. Единый ритм.
Полный реестр текущих функций · локальные сценарии · права и флаги
ПРОЙДИТЕ СЦЕНАРИЙ
От новой кампании до готового объявления
Создайте кампанию > добавьте флайт > группу > объявление. Выберите версии HD и Full HD. В медиатеке загрузите свой файл, откройте информацию, измените название и проверьте удаление.
06 / ПРОДУКТ ЦЕЛИКОМ
От одного сценария к рабочей системе.
53 маршрута и 39 feature flags из текущего кода распределены по рабочим областям прототипа. Для повторного ревью есть карта исходников и переключаемые профили доступа.
Размещение
Кампании, сводка, приоритеты, условия, лимиты, расписание, аудитория, Brand Safety, инвентарь, оптимизация, постбэки, черновики и готовность.
Параметры кампанииКреативы и медиа
Наборы, медиатека, справочник форматов и legacy-каскад, версии материалов, полная форма объявления, QR и ссылки для внешней SSP.
БиблиотекаАналитика
Срезы статистики, квартильные и конверсионные метрики, поля отчёта, фильтры, графики, CSV/XLSX, сохранённые отчёты, выгрузки, импорт CSV/XLSX/XLS и мониторы.
Конструктор отчётовУправление платформой
Агентства и рекламодатели, юридические данные и договоры, балансы и исправление пополнений, пользователи, API-токены, справочники, категории, VAST-параметры и аудит.
КонтрагентыВ HTML работают локальные формы, связи, вычисления, валидация и файлы. Аукцион, серверное кодирование, платежи, действующие токены и подписанные SSP-ссылки требуют DSP API. Матрица описывает покрытие интерфейса, а не перенос серверных сервисов.
07 / ВНЕДРЕНИЕ
От макета к общей системе.
Зафиксировать основу
Согласовать палитру, статусы и плотность. Обновить общую систему в SSP, затем перенести в DSP по правилам текущих CSS-файлов.
Собрать компоненты
Подключить StatusChip к семантическим токенам. Унифицировать PageHeader, FilterBar и FormSection поверх Element Plus.
Пройти реальные сценарии
Проверить роли и feature flags, длинные названия, загрузку, ошибки, пустые выборки, клавиатуру и ширины 390 / 1024 / 1440.
Файлы для итераций:
tokens.css — палитра и геометрия; styles.css — компоненты; app.js — экраны и взаимодействия; REVIEW.md — замечания и критерии приёмки.