← Все экраны
T

TapShop — дизайн-система

Доверие важнее красоты. Операционная инфраструктура прямых продаж для микро-предпринимателей. Светлая тема — основная; токены заложены так, чтобы тёмная добавлялась без переделки. Семантические состояния — только через токены.

Оплачено Повторный клиент Защищено

Принципы

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-1
4 px
--s-2
8 px
--s-3
12 px
--s-4
16 px
--s-6
24 px
--s-8
32 px
--s-12
48 px

Радиусы

--r-sm · 6px · бейджи
--r-md · 10px · кнопки, поля
--r-lg · 12px · карточки
pill · чипы, аватары

Кнопки

Один primary CTA на экран. На мобильном — sticky внизу. На десктопе — инлайн.

Иерархия
Размеры
Состояния
С иконками

Поля

Текст · число · цена
%
≈ 960 ₽ — спишется при подтверждении
Состояния
Слишком короткое название
Загрузка фото · текстовая область · селект
Перетащите фото или нажмите, чтобы выбрать

Статус-чипы

Семантика однозначна и единообразна везде, где появляется заказ.

Статусы заказа · оплаты · клиента
Новый Ожидает оплаты Оплачено В работе Готов Защищено Чек отправлен Повторный клиент Отменён

Карточки

АК
Анна Котова Заказ #1842 · 2 мин назад
4-й
Торт «Птичье молоко» × 1 3 200 ₽
Ожидает оплаты
МК
Мария Кузнецова Постоянный · с марта 2025
LTV38 400
Заказов12
Послед.14 мая
Повторное
Скоро день рождения дочки
Мария заказывала торт «Наполеон» в этот день в прошлом году. Предложите повторить со скидкой 10%.

Деньги и метрики

Крупная сумма
12 480 ₽
Поступления за май
Мини-метрики
LTV38 400 ₽
Заказов12
Повторных67%
Средний3 200 ₽
Trust-блок
Сделка защищена · 3 200 ₽
Средства придержаны до подтверждения получения

Пустые состояния, загрузка, оверлеи

Empty state
Здесь пока пусто
Создайте первый оффер — клиент получит ссылку на оплату.
Skeleton
Тосты и баннеры
Оплата прошла · чек отправлен

Навигация и прогресс

Шаги
Профиль
2Платежи
3Готово
Табы
Профиль Платежи Доставка Тариф

Иконки

Единый outline-набор, 24×24, толщина 2px. Скруглённые торцы.

home
orders
customers
add
finance
trust
bell
settings
layout
search
trash
receipt
trend
message
download
share

Тон голоса

Спокойный, точный, по-человечески понятный микро-предпринимателю. Без жаргона, без восклицаний, без «вау».

Так — да
«Оплата прошла. Чек отправлен в чат.»
Короткое, точное, факт.
«Анна — постоянный клиент. Это её 4-й заказ.»
Контекст без эмоций.
Так — нет
«🎉 Ура! Заказ оплачен! Спасибо за доверие 💜»
Эмодзи и восклицания снижают доверие.
«Фискализация транзакции выполнена успешно»
Жаргон. Микро-бизнесу непонятно.