# Визуальная система RF4 Spotter

## Основа бренда

**RF4 Spotter** — имя продукта и основная подпись во всех интерфейсах, metadata, manifest и социальных карточках. **«Ни хвоста, ни чешуи»** — эмоциональный слоган сообщества; он не заменяет имя и всегда визуально вторичен.

Характер: полевой журнал современного рыболова — точный, спокойный, немного экспедиционный. Интерфейс не имитирует игровой клиент и не обещает гарантированный клёв.

## Визуальные роли

- Тёмная вода (`deep`, `teal`) — навигация, ключевые панели и высокий информационный вес.
- Бумага (`paper`, `white`) — рабочая поверхность и длинное чтение.
- Лайм (`lime`) — активное действие, свежий сигнал и фокус; не декоративная заливка больших площадей.
- Оранжевый — приманка и тёплый акцент, но не системный статус ошибки.
- Антиква Georgia — крупные редакционные заголовки и числа; Inter/system sans — управление, подписи и данные.

Семантические CSS-токены отделяют роль от оттенка: `--surface*`, `--text*`, `--border*`, `--focus`, `--success*`, `--warning*`, `--danger*` и `--source-*`. Компонент не должен вводить новый системный зелёный, жёлтый или красный без отдельной смысловой роли. Основной текст на светлой поверхности использует `--text`, вторичный — `--text-muted`; `--text-subtle` допустим только для крупного или вспомогательного текста, прошедшего WCAG AA.

## Фирменные мотивы

- Крючок — знак бренда и favicon.
- Поплавок — индекс активности и состояние ожидания.
- Леска — время и последовательность наблюдений.
- Рябь — свежесть или обновление, только в спокойной анимации.
- Координатная сетка/радар — точка, но не ложная карта водоёма.
- Силуэт рыбы — различение сущностей каталога, не фоновый орнамент каждой секции.

Один блок использует один главный мотив. Источник и качество всегда передаются текстом вместе с цветом. Декор не должен конкурировать с координатами, весом, свежестью и provenance.

Матрица применения:

| Мотив | Где используется | Где не используется |
|---|---|---|
| Крючок | знак RF4 Spotter, favicon | статусы и кнопки действий |
| Поплавок | индекс активности, ожидание и пустое состояние | ошибка, источник, координаты |
| Леска | временная шкала наблюдений | произвольный разделитель карточки |
| Рябь | живой пульс свежих данных | неполные и устаревшие записи |
| Радар/сетка | точные координаты | фон карточек без координат |
| Силуэт рыбы | каталог и карточка вида | общий орнамент страницы |

Неполные данные получают тёплую верхнюю полевую метку и текстовый статус. Ошибка не изображается «мёртвым поплавком»: она передаётся системным danger-состоянием и понятным действием пользователя.

## Компонентная подпись

`StatePanel` — единая рамка для пустых, недоступных и ошибочных состояний. Пустое состояние имеет роль `status`, недоступное и ошибочное — `alert`; цвет сообщает смысл, а не заменяет заголовок и пояснение. На вложенных карточках компонент используется без внешнего `content-grid`.

Секции данных используют `SectionHeading`: короткий uppercase eyebrow задаёт контекст, антиквенный заголовок называет сущность, необязательное описание объясняет правила, а счётчик всегда расположен справа или под текстом на мобильном. Так число результатов не конкурирует с названием раздела и одинаково читается в рекордах и полевых сигналах.

Каталоги, detail-выборки и страницы прозрачности используют `PageHero`: один контекст, один `h1`, одно короткое пояснение. Это сохраняет одинаковый вертикальный ритм и SEO-иерархию независимо от наличия данных.

## План внедрения

Рабочие статусы B01–B06 ведутся в [ROADMAP.md](ROADMAP.md). После каждого пакета выполняются Astro check/build и адресная визуальная проверка 320/390/768/1280 px. Новые bitmap-иллюстрации не добавляются, пока существующие SVG/CSS-мотивы решают задачу без лишнего веса.