Спокойная система для сложного производства.

Нейтральные поверхности, один оранжевый акцент и понятное состояние каждого этапа. Вдохновлено продуктовой сдержанностью Linear, адаптировано для Campsis.

Принципы

Система помогает авторам управлять длинным техническим процессом без ощущения перегруженности.

01 / Фокус
Одно основное действие

Оранжевый цвет отвечает на вопрос, что делать дальше.

02 / Иерархия
Продукт важнее декора

Поверхности отделяют функциональные зоны, не украшают пустоту.

03 / Доверие
Видимые затраты и статус

До запуска известны объем, стоимость и используемый сервис.

Цвет

Campsis Orange остается единственным акцентом. Нейтральная лестница поверхностей заменяет тени и декоративные градиенты.

Accent#F0683A
Canvas#0B0C0D
Surface 1#111315
Surface 2#17191B
Surface 3#1D2022
Text#F4F5F3
Text muted#A2A7A5
Border#292D2C

Типографика

Wix Madefor Display дает маркетинговым заголовкам крупный и контрастный голос. Geist используется для текста, навигации, кнопок и приложения, Geist Mono — для чисел, времени и технических метаданных.

WIX MADEFOR DISPLAY / 56-84 / 600 / -5%

История начинается с темы

HEADING / 32 / 600 / -1.1PX

Рабочая область проекта

BODY / 16 / 400

Пишите сценарий, проверяйте факты и собирайте сотни кадров в едином процессе. Основной текст остается спокойным и читаемым.

MONO / 12 / 400
159 КАДРОВ / 636 КРЕДИТОВ / $0.12

Сетка и форма

Базовый шаг 4px. Радиус зависит от масштаба объекта: контролы компактнее панелей, переключатели остаются капсульными.

Compact8px
Control16px
Panel24px
Group48px
Section96px
6px
8px
12px
16px

Компоненты

Все интерактивные элементы имеют hover, pressed и видимый keyboard focus. Основной текст на оранжевом всегда темный.

Buttons
Badges ГотовоСледующий шагЧерновик
SwitchПауза после сценария

Короткая подсказка под полем.

Состояния

Загрузка сохраняет геометрию будущего контента. Ошибка объясняет проблему рядом с источником, а toast подтверждает завершенное действие.

Loading
Error

Добавьте действующий ключ в настройках.

Empty
Пока нет роликов

Введите тему, чтобы подготовить первый сценарий.

Создать ролик

Движение и доступность

Анимация подтверждает смену состояния. При reduced motion интерфейс остается полностью функциональным без необязательных переходов.

Touch-цели от 44px на мобильных, контраст WCAG AA, навигация с клавиатуры, понятные label и live region для генерации. Полная спецификация находится в DESIGN.md.