From fc22795b630949747b157eb376fabb0a8dd919bc Mon Sep 17 00:00:00 2001 From: IK Date: Sat, 12 Sep 2026 09:56:16 +0700 Subject: [PATCH] refactor: clarify visual motif grammar --- apps/web/src/styles/global.css | 3 +++ docs/ROADMAP.md | 2 +- docs/brand-system.md | 13 +++++++++++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css index f7bf2c0..43c9755 100644 --- a/apps/web/src/styles/global.css +++ b/apps/web/src/styles/global.css @@ -41,3 +41,6 @@ footer{min-height:118px;background:var(--deep);color:#dbe4df;padding:28px max(32 @media(max-width:720px){.signal-heading{display:block;padding-top:45px}.signal-count{display:inline-block;margin-top:14px}.signal-grid{grid-template-columns:1fr}.signal-card__top{align-items:flex-start}.source-strip{margin-bottom:4px}} .load-more,.signal-more{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border:1px solid #c8d3cb;border-radius:10px;background:#f8faf5;color:#526662;font-size:14px;text-decoration:none;transition:.2s ease}.load-more:hover,.signal-more:hover{background:#eef2ec;border-color:#a8b8af}.load-more span,.signal-more span{color:#405552;font-size:13px} .not-found{min-height:calc(100vh - 204px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-block:70px}.not-found__float{width:130px;height:130px;display:grid;place-items:center;position:relative;margin-bottom:28px;border:1px solid #b8c8be;border-radius:50%;color:#55751e;box-shadow:0 0 0 16px #dce7d722}.not-found__float strong{position:absolute;right:-18px;bottom:5px;padding:5px 9px;border-radius:20px;background:var(--deep);color:var(--lime);font:italic 14px Georgia,serif}.not-found h1{margin:14px 0 22px;font:400 clamp(58px,8vw,105px)/.88 Georgia,serif;letter-spacing:-.06em}.not-found h1 em{color:#497074;font-weight:400}.not-found p{max-width:600px;color:#4d605d;font-size:17px;line-height:1.6}.not-found>a{display:flex;align-items:center;gap:10px;margin-top:18px;padding:14px 18px;border-radius:10px;background:var(--deep);color:#fff;font-weight:750;text-decoration:none}.not-found>a .fish-icon{color:var(--lime)} + +/* Brand grammar: radar belongs to coordinates; incomplete signals use a field-note edge, not decorative ripples. */ +.detail-card:before,.signal-card:after{content:none}.signal-card{border-top:3px solid #c9ad55} diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md index 0c5ecb7..fc1401e 100644 --- a/docs/ROADMAP.md +++ b/docs/ROADMAP.md @@ -22,7 +22,7 @@ - [x] **B01 · Иерархия имени.** RF4 Spotter — единое имя продукта в UI, metadata, manifest и документации; «Ни хвоста, ни чешуи» — поддерживающий слоган. Обновлены wordmark в header/footer и подпись выпуска. - [x] **B02 · Дизайн-токены.** Добавлены семантические роли поверхностей, текста, границ, фокуса, success/warning/danger и всех источников. На токены переведены паспорта данных, status-карточки, skeleton и focus; контрастные пары зафиксированы в brand system. -- [ ] **B03 · Графическая грамматика.** Согласовать применение крючка, поплавка, лески, ряби, координатной сетки и рыбьих силуэтов; убрать случайные декоративные элементы и повторы. +- [x] **B03 · Графическая грамматика.** Мотивы закреплены за функциями: крючок — бренд, поплавок — активность/ожидание, леска — время, радар — координаты, силуэт — сущность рыбы. Убраны ложная рябь неполных сигналов и дублирующие радар круги карточки лидера; неполнота теперь подчёркнута спокойной полевой меткой. - [ ] **B04 · Компонентная подпись.** Унифицировать заголовки секций, CTA, карточки, плашки источников, состояния качества и пустые экраны на публичных и admin-страницах. - [ ] **B05 · Motion-система.** Оставить только смысловые микроанимации поклёвки/пульса/перехода, задать общие длительности и полностью поддержать reduced motion. - [ ] **B06 · Brand QA.** Проверить favicon, maskable icons, manifest, OG 1200×630, светлый/тёмный фон, 16/32 px и mobile/desktop screenshots; записать правила в [brand-system.md](brand-system.md). diff --git a/docs/brand-system.md b/docs/brand-system.md index bf6a691..101cb52 100644 --- a/docs/brand-system.md +++ b/docs/brand-system.md @@ -27,6 +27,19 @@ Один блок использует один главный мотив. Источник и качество всегда передаются текстом вместе с цветом. Декор не должен конкурировать с координатами, весом, свежестью и provenance. +Матрица применения: + +| Мотив | Где используется | Где не используется | +|---|---|---| +| Крючок | знак RF4 Spotter, favicon | статусы и кнопки действий | +| Поплавок | индекс активности, ожидание и пустое состояние | ошибка, источник, координаты | +| Леска | временная шкала наблюдений | произвольный разделитель карточки | +| Рябь | живой пульс свежих данных | неполные и устаревшие записи | +| Радар/сетка | точные координаты | фон карточек без координат | +| Силуэт рыбы | каталог и карточка вида | общий орнамент страницы | + +Неполные данные получают тёплую верхнюю полевую метку и текстовый статус. Ошибка не изображается «мёртвым поплавком»: она передаётся системным danger-состоянием и понятным действием пользователя. + ## План внедрения Рабочие статусы B01–B06 ведутся в [ROADMAP.md](ROADMAP.md). После каждого пакета выполняются Astro check/build и адресная визуальная проверка 320/390/768/1280 px. Новые bitmap-иллюстрации не добавляются, пока существующие SVG/CSS-мотивы решают задачу без лишнего веса.