FaceSpot · UI Kit

Основа

Цвета
ink
#222222
accent
#A21CAF
muted
#717171
surface
#FFFFFF
success
warning
danger
line
#EBEBEB
Типографика · Onest
Display 28/700
Heading 22/700
Title 17/600
Label 15/500 — акценты, кнопки
Body 15/300 — основной текст (тонкая база)
Secondary 14/300 — вторичный
Caption 12/300 — подписи

База — вес 300 (тонкая, antialiased). Веса: regular 400 · medium 500 · semibold 600 · bold 700. Фолбэк: -apple-system, BlinkMacSystemFont, 'Segoe UI'.

Цифры · IBM Plex Mono
1 215 000 ₽
Подписчиков 1 234 567 · ER 5,1%
Акт № A-2026-0042

Правило 1. Все цифры — в .tnum (IBM Plex Mono, tabular-nums). Оборачивать только числа, не слова рядом: от <span class="tnum">50 000 ₽</span>.

Правило 2. Тысячи разделяем пробелом (ru-RU): 50 000 · 1 215 000. В JS — n.toLocaleString('ru-RU'); в полях ввода — форматировать на лету.

Радиус
8 small
12 base
16 large
full · avatar
Иконки · Phosphor

Единый набор. Подключение: @phosphor-icons/web. Размер — через Tailwind text-*, вес — классом веса.

ph (regular)
ph-bold
ph-fill
ph-duotone
16 · 20 · 24 · 28
house
briefcase
images
chat-circle
wallet
seal-check
search
bell
microphone
tag
file-text
pen-nib
users
gear
heart
star
caret-right
paperclip

Кнопки

Иерархия (full-width) · контур

Крупные full/half-width CTA — контур: главное действие border-accent text-accent (active:bg-fuchsia-50), нейтральное border-line text-ink (active:bg-gray-50). Деструктив — заливка bg-rose-600. Мелкие/иконочные — см. ниже.

Размеры
Пара-развилка «отклонить / принять» · sticky CTA (cta-bar fixed bottom-0)

Развилка (отклонить/принять) на экране — асимметрично. «Отклонить» = shrink-0 px-5 border-ink (сжата по контенту). «Принять [сумма]» = flex-1 bg-emerald-600 text-white + ✓ (доминирует, тянется — вмещает любую сумму, напр. 100 000 000 ₽). Применять ко всем in-page парам отклонить/принять (торг, предложение агентства). НЕ путать с подтверждением в bottom-sheet — там стек: primary во всю ширину + «Отмена» призраком снизу.

Пара равноправных операций · sticky CTA

Две равноправные операции (не отклонить/принять и без суммы) — симметрично. Обе flex-1 h-12 text-[14px], иерархия задаётся заливкой главной (`bg-emerald-600`), вторичная — контур (`border-line`). Применять там, где оба исхода — легитимные шаги цикла, а не «деструктив vs подтверждение»: креативы (Запросить правки / Одобрить), договор (Скачать / Подписать). Асимметрию (Вариант с `shrink-0`) тут НЕ применять — длинная вторичная подпись сделала бы её визуально «главнее».

С иконкой · иконка · disabled

Формы

₽

Введите корректный email

Тоггл · чекбокс · радио

Выбор (Bottom Sheet Picker)

Единственный стандарт дизайн-системы для любого выбора из списка.

Правило дизайн-системы

Любой выбор из 2+ вариантов — только Bottom Sheet Picker. Нативный <select> запрещён во всех экранах.

Live demo · Состояния
Анатомия — Trigger
Размерh-12 (48px) · w-full · min touch 44px ✓
Границаborder-line → active: border-ink
Иконкаph ph-caret-down · text-faint · 16px · shrink-0
Меткаtext-[15px] · flex-1 · truncate
Disabledopacity-40 pointer-events-none
Анатомия — Bottom Sheet
Заголовок
Вариант A Подсказка
Вариант B (выбран) Подсказка
Вариант C Подсказка
Отмена
Drag handlew-10 h-1 bg-line · всегда первый элемент
Списокpx-3 py-2 space-y-1 — горизонтальные отступы + зазор между опциями
Опцияh-14 (56px) · px-3 · rounded-xl · border border-transparent · точка-индикатор слева (spacer 8×8) · метка · подсказка справа
Точкаw-2 h-2 — пустой spacer у неактивных (для выравнивания) · rounded-full bg-accent у выбранной
Выбраннаяфон #FDF4FF + border-color: #A21CAF + accent-точка слева + font-medium у метки
Отменапоследняя · h-12 · bg-gray-100 · rounded-xl · обязательна
Safe areapadding-bottom: env(safe-area-inset-bottom)
Правила
Любой выбор из 2+ фиксированных вариантов → Bottom Sheet Picker
Trigger всегда показывает текущее выбранное значение
Каждая опция в шите — минимум h-14 (56px)
Кнопка «Отмена» — обязательно в конце, всегда
Нативный <select> — запрещён на всех экранах
Горизонтальный скролл-чипов для выбора одного значения — запрещён, используем Picker
Hover-only взаимодействия — запрещены
Длительность
Платформы

Селекторы

Плиточные селекторы таланта. Активное состояние — data-on="1": border-accent + bg #FDF4FF.

cat-item · grid 2 колонки (множественный выбор)

Иконка phosphor 18px + метка 14px. Одиночный и множественный выбор используют одну разметку, отличается логика toggle.

ex-item · селектор на тёмной карточке (премиум)
Эксклюзивные категории
pick-tile · выбор картинки с галкой

Выбранная — outline-accent + галка. Для обложки витрины / выбора фото.

Отображение данных

Аватары · размеры · verified
АП
АП
АП
АП
Статусы сделки (бейджи)
Оффер Договор Оплата LoRA Креативы Выплаты Закрыта

6 этапов сделки (1→6) + «Закрыта» (отклонена/отменена). Цвета баннеров: оффер/оплата/креативы — amber, договор — violet, LoRA — indigo, выплаты — emerald.

Stat-карточки
12
сделок
3
активных
480К
доход

Карточки и списки

Info Card
Nike
Reels · beauty
Контент

Следующий шаг: загрузить контент до 25 мая

Список (заголовок секции + строки)
Заявки
Тариф Pro
Аккордеон
Основная информация
Содержимое раскрывающегося блока.
Карточка сделки (список «Сделки»)
Карточка креатива (компактная, в группе)
Key-value строки (детали / реестр / договор)
ИНН771234567890
КатегорииBeauty, Fashion, Lifestyle
Статус в реестреДействующее

Индикатор сделки

Баннер этапа (шапка экрана сделки)
Этап 5 из 6 · Креативы

Проверьте креативы и одобрите или запросите правки.

Цвет баннера = тон этапа (amber/violet/indigo/emerald/gray), синхронно со статус-бейджем сделки.

Компактный (полоса прогресса)
Этап 3 из 6 · Договор 50%
Точечный stepper (горизонтальный)
Заявка
Согл.
3
Договор
4
Контент
5
Оплата
6
Готово

Креатив (материал + обсуждение)

Отдельного «чата» нет — обсуждение живёт внутри экрана креатива. Полноэкранно: карусель версий · материалы сделки · действия · переписка · поле ввода.

Шапка экрана · плавающая пилюля
Reels v2
Карусель версий + файл
reels_final_v2.mp4
Материалы сделки
Материалы сделки · 2
Бриф_Nike.pdf240 КБ Мудборд.jpg1,8 МБ
Действия (когда креатив ждёт вас)

«Одобрить» — заливка emerald (позитивное подтверждение, исключение из контур-правила). «Запросить правки» — нейтральный контур.

Переписка
Сегодня
Договор подписан · 21 мая
Привет! Когда будет готов черновик?
14:32
Загружу финал сегодня до вечера 👍
14:35
reels_final_v2.mp412,4 МБ
14:48
Непрочитанные
15:02
Поле ввода (sticky снизу)

Контент-паттерны

Сетка фото · 4 состояния слота

Одобрено (emerald-галка) · на проверке (amber-часы + вуаль) · отклонено (rose-оверлей + причина, тап→замена) · пустой слот (пунктир + плюс).

Запись голоса · контрол (idle / запись / готово)
Записано · 0:34
Калькулятор цены · карточка результата
Фото300 — 900 ₽
Видео720 — 1 680 ₽
Фото + видео (пакет)720 — 2 016 ₽

Коэффициент: ×1.2

Множители выбираются через Bottom Sheet Picker (длительность · платформы · локация), результат — диапазоны цен + итоговый коэффициент.

Нумерованная инструкция (в шите)
1Читайте текст вслух в нужной интонации.
2Листайте текст по мере чтения — он прокручивается.
3Когда закончите — нажмите «Стоп».

Онбординг

Карточка прогресса
До публикации профиля 3 / 9
Шаги — 3 состояния
Pill-переключатель (демо-режимы, прототип)
Чекбокс с длинным текстом согласия

Элементы данных (item-ы)

Уведомление (4 типа иконок)
Транзакция (3 типа)
Disabled CTA (валидация не пройдена)

Состояния и обратная связь

Empty state
Пока нет сделок

Найдите персону в каталоге и отправьте заявку

Skeleton (загрузка)
Banner / alert
Подтвердите профиль. Без верификации заявки ограничены.
Сделка успешно завершена.
Toast
Заявка отправлена
Bottom Sheet (статичный пример)

Действия