5.4 KiB
Визуальная система 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-состоянием и понятным действием пользователя.
Компонентная подпись
Секции данных используют SectionHeading: короткий uppercase eyebrow задаёт контекст, антиквенный заголовок называет сущность, необязательное описание объясняет правила, а счётчик всегда расположен справа или под текстом на мобильном. Так число результатов не конкурирует с названием раздела и одинаково читается в рекордах и полевых сигналах.
План внедрения
Рабочие статусы B01–B06 ведутся в ROADMAP.md. После каждого пакета выполняются Astro check/build и адресная визуальная проверка 320/390/768/1280 px. Новые bitmap-иллюстрации не добавляются, пока существующие SVG/CSS-мотивы решают задачу без лишнего веса.