Доверие важнее красоты. Операционная инфраструктура прямых продаж для микро-предпринимателей. Светлая тема — основная; токены заложены так, чтобы тёмная добавлялась без переделки. Семантические состояния — только через токены.
Оплачено Повторный клиент Защищено
Принципы
5 правил, по которым принимаются дизайн-решения.
1
Доверие важнее красоты
Статус оплаты, защиты и чека читаются мгновенно. Никаких маркетинговых эффектов.
2
Один экран — одно действие
Микро-предприниматель работает на ходу. Каждый экран ведёт к одному очевидному шагу.
3
База клиентов в центре
Везде, где появляется заказ — видно «новый» или «повторный», его LTV и история.
4
Быстро и без обучения
Понятные слова, минимум полей, дефолты везде, где можно.
5
Лёгкость для покупателя
Без регистрации. Открыл — заплатил — получил чек.
Цвет
Тёплый бирюзовый как якорь доверия, мягкий teal как вторичный, тёплый оранжевый для «повторов» и подсветок. Семантика — через единые токены.
Бренд
brand / primary
#0E7C7B
CTA, бренд-якорь, активное состояние
brand / secondary
#CFE9E7
Вторичные фоны, обводки
brand / tint
#E3F2F1
Лёгкие фоны блоков
accent / warm
#F2994A
Повтор, LTV, тёплые подсветки
Семантика
success
#16A34A
Оплачено · защищено · чек отправлен
warning
#E0A82E
Ожидает оплаты · требует внимания
danger
#DC4C4C
Ошибка · отмена · спор
info
#0E7C7B
Информация · ссылки
Текст и поверхности
text / primary
#14302F
text / secondary
#5C6B6A
text / tertiary
#93A09F
surface
#FFFFFF
Запланированная эволюция · Индиго (Фаза 2)
coming · не активно
На этапе масштабирования бренд сознательно переходит на «Современный индиго» ради ассоциации «технологично-премиальная инфраструктура». Дизайн-система это держит: смена палитры — замена значений токенов brand/* и accent/*, без правки компонентов.
Сейчас · Тёплый бирюзовый
#0E7C7B
brand / primary
#F2994A
accent / warm
brand / tint
text / primary
Фаза 2+ · Современный индиго
#4F46E5
brand / primary
#F76C6C
accent / warm
brand / tint
text / primary
01 · Что меняется
Только значения --brand-* и --accent-* в одном файле tokens.css.
02 · Что не меняется
Семантика (success/warning/danger), сетка, типографика, компоненты, иконки, layout — всё держится.
03 · Где проверено
Все 19 экранов используют только токены в CSS-контекстах. SVG-иллюстрации обновляются скриптом по тому же mapping.
Отстройка от занятых цветов рынка
Обе палитры намеренно держатся подальше от Сбера (яркий зелёный), Т-Банка (жёлтый/чёрный), Wildberries (маджента), Ozon/VK (синий).
Типографика
Inter — UI-гротеск, отлично читается кириллицей. JetBrains Mono — для крупных чисел: цена, LTV, выручка. Это якорные элементы.
display · num12 480 ₽JetBrains Mono · 32 / 500
h1Новый заказ от АнныInter · 22 / 600
h2База клиентовInter · 18 / 600
h3Защита сделкиInter · 16 / 600
bodyПолучите оплату через СБП и автоматический чек самозанятого.Inter · 15 / 400
smallПредоплата 30% — 1 500 ₽Inter · 13 / 400
micro · capsОжидает оплатыInter · 12 / 500
Сетка, отступы, радиусы
Базовый шаг 4px, контейнеры — 16px, между блоками — 12–16px. Единые радиусы по уровням иерархии.
Spacing scale
--s-14 px
--s-28 px
--s-312 px
--s-416 px
--s-624 px
--s-832 px
--s-1248 px
Радиусы
--r-sm · 6px · бейджи
--r-md · 10px · кнопки, поля
--r-lg · 12px · карточки
pill · чипы, аватары
Кнопки
Один primary CTA на экран. На мобильном — sticky внизу. На десктопе — инлайн.
Иерархия
Размеры
Состояния
С иконками
Поля
Текст · число · цена
₽
%
≈ 960 ₽ — спишется при подтверждении
Состояния
Слишком короткое название
Загрузка фото · текстовая область · селект
Перетащите фотоили нажмите, чтобы выбрать
Статус-чипы
Семантика однозначна и единообразна везде, где появляется заказ.
Статусы заказа · оплаты · клиента
Новый Ожидает оплаты Оплачено В работе Готов Защищено Чек отправлен Повторный клиент Отменён
Карточки
АК
Анна КотоваЗаказ #1842 · 2 мин назад
4-й
Торт «Птичье молоко» × 13 200 ₽
Ожидает оплаты
МК
Мария КузнецоваПостоянный · с марта 2025
LTV38 400
Заказов12
Послед.14 мая
Повторное
Скоро день рождения дочки
Мария заказывала торт «Наполеон» в этот день в прошлом году. Предложите повторить со скидкой 10%.
Деньги и метрики
Крупная сумма
12 480 ₽
Поступления за май
Мини-метрики
LTV38 400 ₽
Заказов12
Повторных67%
Средний3 200 ₽
Trust-блок
Сделка защищена · 3 200 ₽
Средства придержаны до подтверждения получения
Пустые состояния, загрузка, оверлеи
Empty state
Здесь пока пусто
Создайте первый оффер — клиент получит ссылку на оплату.