Дизайн-система
Токены перенесены из HTML-прототипа в globals.css через @theme Tailwind v4. Палитра графиков проверена на цветовую слепоту и контраст.
1. Палитра
Нейтральные и поверхности
ink-900
#0E1116ink-700
#2B313Bink-500
#5A6373ink-400
#7C8593line
#E6E9EEpage
#F5F6F8surface
#FFFFFFАкцент продукта
acc-50
#FFF4ECacc-100
#FFE2CEacc-500
#E8590Cacc-600
#C74A08Статусы — только для состояния, никогда как цвет серии
good
#0CA30Cwarn
#FAB219serious
#EC835Acrit
#D03B3BСерии графиков — фиксированный порядок, не циклится
s1
#2a78d6s2
#eb6834s3
#1baf7as4
#eda100Порядковая шкала воронки (один тон, светлый → тёмный)
ord-1
#86b6eford-2
#3987e5ord-3
#1c5cabХудшая соседняя пара серий при протанопии ΔE 9,1 (порог 8), при обычном зрении ΔE 22,9 (порог 15). Три цвета из четырёх ниже контраста 3:1 к белому — поэтому у каждого графика обязательна легенда и переключатель «Таблица».
2. Типографика
Display · 30 / 36 · 680
Heading 1 · 22 / 29 · 660
Heading 2 · 17 / 24 · 640
Heading 3 · 15 / 22 · 620
Body · 14 / 21 — основной текст интерфейса
Small · 13 / 19 — вторичный текст
Micro · 12 / 16 — метки и подписи осей
1 042 · 87 530 ₽ · 4,8%
Один шрифт на весь интерфейс: Inter с кириллицей, подключён через
next/font. Табличные цифры включаются только в таблицах и на осях.3. Сетка, отступы, радиусы
4
8
12
16
24
32
48
xs
sm
md
lg
xl
| Desktop ≥ 1280 | сайдбар 252 px, 6 KPI в ряд, полная таблица |
| Tablet 768–1279 | сайдбар 76 px (иконки), 3 KPI в ряд, таблица с горизонтальной прокруткой |
| Mobile < 768 | сайдбар как drawer, нижняя навигация, 1 KPI в ряд, карточки вместо таблицы, фильтры в sheet |
Раскладка описана контейнерными запросами (
@tab, @desk), поэтому дев-переключатель Desktop/Tablet/Mobile меняет настоящую раскладку, а не только ширину рамки.4. Компоненты
Кнопки
Поля и селекты
Badges статусов — цвет никогда не единственный признак
АктивноСрок истёкОтклоненоЗаблокированоУдаленоXL-объявление
Метки источника данных
Данные APIРасчёт платформыТребует подтвержденияРасширенный доступНедоступно
Состояния блока
Loading — skeleton формы
Ничего не найдено
Причина и одно целевое действие
Ошибка
Понятный текст и повтор
AVITO_429Показатель недоступен на вашем тарифе АвитоАвито не присылает этот показатель для вашего аккаунта. Мы не подставляем ноль, чтобы не искажать выводы.
5. Доступность
| Контраст ≥ 4.5:1 | основной текст #0E1116 и вторичный #5A6373 на белом и на #F5F6F8 |
| Фокус | глобальный :focus-visible — обводка 2 px акцентом со смещением 2 px |
| Цвет не единственный носитель | каждый badge несёт иконку и подпись, дельта — стрелку и знак |
| Таблица к каждому графику | переключатель «График / Таблица» с полными значениями |
| Мобильные таблицы | превращаются в карточки с теми же полями |
| Skeleton вместо спиннера | анимация отключается при prefers-reduced-motion |