Дизайн-система Карометр

1. Принципы интерфейса

1. Аналитика в фокусе: пользователь должен сразу видеть KPI и изменения динамики.
2. Низкая когнитивная нагрузка: один экран — одна главная задача.
3. Стабильность визуального языка: единые цвета, отступы, шрифтовая иерархия.
4. Контраст и читаемость: интерфейс ориентирован на долгую работу с графиками.

2. Визуальный стиль

2.1 Цвета

1. Primary (бренд): оттенки зелёного для акцентов и позитивной динамики.
2. Neutral: slate/gray для фона и вторичного текста.
3. Semantic:

• успех: green
• предупреждение: amber
• критично: red
• информация: blue

2.2 Типографика

1. Заголовки: semibold/bold, плотный трекинг.
2. Основной текст: regular/medium.
3. Табличные данные и KPI: использование tabular-nums.

2.3 Отступы и сетка

1. Базовый шаг: 4px.
2. Карточки и панели: скругление rounded-xl/rounded-2xl.
3. Контейнеры: адаптивная ширина, приоритет контента над декоративностью.

3. Компонентная модель

3.1 Базовые компоненты

1. Header (прозрачный/стеклянный, со скролл-состояниями).
2. KPI Cards.
3. Фильтры (дата, бренд, модель, регион).
4. Графики (линейный, столбчатый, stacked).
5. Таблицы и drill-down панели.
6. Модальные окна и тосты статусов.

3.2 Состояния компонентов

1. default
2. hover
3. focus
4. active
5. disabled
6. loading
7. error

4. Дашборды и визуализация

1. Верхняя зона: KPI и изменение к периоду/году.
2. Средняя зона: динамика индексов и сравнительные графики.
3. Нижняя зона: таблицы детализации и экспорт.
4. Для всех графиков: легенда, подсказки, единые форматы дат/чисел.

5. Адаптивность

1. Desktop-first (основной сценарий работы аналитика).
2. Tablet: компактные фильтры и перенос блоков в 2 колонки.
3. Mobile: приоритет обзорных KPI и быстрых срезов.

6. Доступность интерфейса

1. Контраст не ниже WCAG AA.
2. Полная навигация с клавиатуры.
3. Видимые focus-стили.
4. Атрибуты aria для интерактивных элементов.

7. Тёмная и светлая темы

1. Поддержка двух тем через UColorMode.
2. Логотипы и иконки должны иметь версии под обе темы.
3. Графики адаптируются под тему без потери читаемости.

8. Правила пользовательского опыта для аналитики

1. Фильтры сохраняют выбор пользователя между сессиями.
2. Любой показатель должен иметь источник и дату актуализации.
3. Для прогнозов обязательно показывать диапазон неопределённости.
4. Любые «пустые данные» сопровождаются понятным состоянием empty-state.

9. Артефакты дизайна

1. UI-kit компонентов.
2. Макеты ключевых страниц (Figma).
3. Гайд по токенам (цвет, типографика, spacing).
4. Спецификация взаимодействий и анимаций.