60 lines
7.4 KiB
Markdown
60 lines
7.4 KiB
Markdown
# Визуальная система 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`.
|
|
|
|
CTA задаются смыслом через `data-action`: `primary` — основное безопасное действие, `secondary` — продолжение или навигация, `inverse` — действие на тёмном фоне, `danger` и `quiet-danger` — отрицательное и необратимое действие, `quiet` — сброс или малозаметная отмена. На одном экране по возможности оставляется один визуально главный CTA.
|
|
|
|
## Движение
|
|
|
|
Движение объясняет состояние: пульс означает живой сигнал, поплавок — активность точки, sweep — загрузку, короткий сдвиг — отклик интерактивного элемента. Декоративные бесконечные анимации не используются. Длительности берутся из `--motion-fast`, `--motion-base`, `--motion-signal`, easing — из `--ease-out`; `prefers-reduced-motion` сводит все анимации и переходы к одному кадру.
|
|
|
|
Секции данных используют `SectionHeading`: короткий uppercase eyebrow задаёт контекст, антиквенный заголовок называет сущность, необязательное описание объясняет правила, а счётчик всегда расположен справа или под текстом на мобильном. Так число результатов не конкурирует с названием раздела и одинаково читается в рекордах и полевых сигналах.
|
|
|
|
Каталоги, detail-выборки и страницы прозрачности используют `PageHero`: один контекст, один `h1`, одно короткое пояснение. Это сохраняет одинаковый вертикальный ритм и SEO-иерархию независимо от наличия данных.
|
|
|
|
## План внедрения
|
|
|
|
Рабочие статусы B01–B06 ведутся в [ROADMAP.md](ROADMAP.md). После каждого пакета выполняются Astro check/build и адресная визуальная проверка 320/390/768/1280 px. Новые bitmap-иллюстрации не добавляются, пока существующие SVG/CSS-мотивы решают задачу без лишнего веса.
|