Ниже — инструкция для дизайн-агента, которая задаёт стиль, структуру и принципы интерфейса для твоего SPA. Она ориентирована на **минимализм, читаемость данных и удовольствие от использования**, а не на “перегруженный фитнес-дэшборд”.

# 🎯 Общая задача

Создать **чистый, современный, минималистичный интерфейс** для SPA-приложения бегуна, где пользователь:

- отслеживает свои старты (прошлые и будущие),
- видит прогресс и личные рекорды,
- сравнивает результаты,
- получает ощущение “контроля над своей беговой историей”.

---

# 🧭 Общая философия дизайна

### 1. “Спокойная сила”, а не “спортивная агрессия”

Не:

- кислотные цвета,
- перегруженные графики,
- “фитнес-клуб стиль 2015”.

Да:

- чистый интерфейс,
- воздух,
- акцент на данных,
- ощущение премиальности.

---

### 2. Минимум визуального шума

Каждый экран должен отвечать на вопрос:

> “Что здесь главное?”

Если не ясно — убрать лишнее.

---

### 3. Данные — главный герой

Интерфейс не про “украшения”, а про:

- результаты,
- прогресс,
- сравнение,
- числа.

---

# 🎨 Визуальный стиль

## Цвета

### Основа:

- фон: светлый (#F7F8FA или близко)
- карточки: белые
- текст:
  - основной: почти чёрный (#111)
  - вторичный: серый (#666)

### Акцент:

- 1 основной цвет:
  - глубокий синий или изумрудный (например #2F6BFF или #1FA37A)

### Дополнительно:

- PR / успех: мягкий зелёный
- предупреждения: нейтральный жёлтый
- ошибки: мягкий красный

❗ Никаких “радуг”.

---

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

- современный sans-serif (Inter / SF Pro / аналог)
- крупные числа:
  - результаты (время) — большие, жирные
- иерархия:
  - H1 — экран
  - H2 — блок
  - body — данные
  - caption — мета

---

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

- много воздуха
- карточки с padding 16–24px
- равномерная вертикальная ритмика
- закругления: 12–16px

---

# 🧱 Основные экраны

## 1. Главный экран (Dashboard)

### Цель:

дать быстрый ответ:

- что впереди
- где я сейчас
- какой прогресс

### Блоки:

#### 🔹 Ближайший старт

- название
- дата
- дистанция
- countdown (“через 12 дней”)

#### 🔹 Последний результат

- время
- дистанция
- место
- дата

#### 🔹 Личный рекорд

- по ключевой дистанции
- выделен визуально

#### 🔹 Сезон

- количество стартов
- лучший результат
- краткая статистика

---

## 2. Календарь стартов

### Два раздела:

- будущие
- прошедшие

### Карточка старта:

- название
- дата
- дистанция
- статус:
  - планирую
  - зарегистрирован
  - пробежал

Минимум кликов.

---

## 3. Карточка старта

- название
- дата
- дистанция
- время
- темп
- место (если есть)
- заметки (опционально)

---

## 4. Личные рекорды (PR)

- список дистанций:
  - 5K
  - 10K
  - 21.1
  - 42.2

Для каждой:

- лучшее время
- дата
- старт

---

## 5. Сравнение стартов (ВАЖНО)

Это ключевая фича.

### UI:

таблица или карточки:


| Год | Время | Темп | Место |
| --- | ----- | ---- | ----- |


Можно добавить:

- стрелки (лучше/хуже)
- визуальный прогресс

---

# 📊 Графики

Минимально и аккуратно:

- линия прогресса по дистанции
- без перегруза
- без 10 линий сразу

---

# 🧩 Компоненты

- карточки
- таблицы (очень аккуратно)
- фильтры
- переключатели (tabs)
- кнопки (primary / secondary)

---

# 🧠 UX принципы

### 1. Минимум кликов

Любая частая задача:  
→ максимум 2–3 клика

---

### 2. Быстрое считывание

Пользователь должен за 2 секунды понять:

- что это
- где он
- что делать

---

### 3. Консистентность

- одинаковые карточки
- одинаковые статусы
- одинаковые действия

---

# 🧪 Для аналитики (важно)

Заложить:

- зоны кликов
- понятные CTA
- отсутствие “пустых зон”

---

# 🖼️ Использование изображений

## Когда использовать:

- пустые состояния
- onboarding
- вдохновение

## Когда НЕ использовать:

- в данных
- в списках стартов
- в результатах

---

## Если генерировать изображения

Стиль:

- минимализм
- спорт без пафоса
- одиночный бегун
- город / парк
- мягкий свет
- утро / вечер

### Пример prompt:

> “minimalist photo of a runner jogging alone in a city park at sunrise, soft light, calm mood, no crowd, modern aesthetic”

---

# 🚫 Чего избегать

- перегруженных дашбордов
- 100 метрик сразу
- ярких кислотных цветов
- сложных графиков
- таблиц как в Excel
- лишних иконок
- “геймификации ради геймификации”

---

# 💡 Вдохновение (по духу)

Если бы нужно было описать стиль:

- как Notion, но для бегунов
- как Apple Fitness, но менее ярко
- как Strava, но более спокойно и чисто

---

# 🧭 Финальный ориентир

Интерфейс должен вызывать ощущение:

> “Я контролирую свою беговую историю и прогресс”

а не:

> “Я заполняю таблицу результатов”

---