admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
251 lines
32 KiB
Markdown
251 lines
32 KiB
Markdown
# Дизайн-система, вдохновлённая Apple
|
||
|
||
> Category: Медиа и потребительские товары
|
||
> Потребительская электроника. Премиальное «воздушное» пространство, SF Pro, кинематографичные изображения.
|
||
|
||
## 1. Визуальная тема и атмосфера
|
||
|
||
Веб-язык Apple — это выверенная редакторская система, чередующая галерейное спокойствие и плотные торговые информационные блоки. Визуальный тон остаётся сдержанным: широкие нейтральные полотна, тихий «хром» интерфейса, а почти вся выразительная нагрузка отдана изображениям продуктов. Интерфейс спроектирован так, чтобы исчезать, и тогда оборудование, материалы и варианты отделки выходят на повествовательный передний план.
|
||
|
||
На всех пяти проанализированных страницах ритм единообразен, но не монолитен. Маркетинговые поверхности (главная страница и Environment) используют кинематографичное чередование чёрного и света по «главам», тогда как коммерческие поверхности (Store и потоки покупки) вводят более плотные интервалы, больше утилитарных элементов управления и более насыщенные стопки карточек, не нарушая базовой грамматики бренда. В результате получается одна система с двумя передачами: режим витрины и режим транзакции.
|
||
|
||
Типографика выступает стабилизатором. SF Pro Display несёт иерархию героев и мерчандайзинга с компактной межстрочной высотой и контролируемым трекингом, а SF Pro Text обрабатывает метаданные продуктов, навигацию, фильтры и плотный интерфейс выбора. Типографика остаётся ненавязчивой, но диапазон масштаба достаточно широк, чтобы поддерживать как «биллбордные» героические сообщения, так и микроутилитарные подписи.
|
||
|
||
**Key Characteristics:**
|
||
- Бинарный ритм секций: глубокие чёрные сцены (`#000000`), чередующиеся с бледными нейтральными полями (`#f5f5f7`)
|
||
- Единое синее акцентное семейство для семантики действий и ссылок (`#0071e3`, `#0066cc`, `#2997ff`)
|
||
- Два режима работы в одной системе: кинематографичные модули-витрины и плотные коммерческие конфигураторы
|
||
- Сильная опора на изображения и материальные отделки; «хром» интерфейса остаётся визуально тонким
|
||
- Плотные заголовочные метрики (SF Pro Display, semibold) в паре с компактной типографикой текста/ссылок (SF Pro Text)
|
||
- Геометрия «пилюль» и капсул как фирменный язык действий (`18px` до `980px` и круглые элементы управления)
|
||
- Глубина используется экономно; контраст и разделение поверхностей выполняют большую часть работы по наслоению
|
||
- Многостраничный ритм цветовых блоков: чёрные героические главы -> бледные нейтральные мерчандайзинговые поля -> утилитарные белые торговые поверхности -> тёмные микроповерхности для элементов управления
|
||
|
||
## 2. Цветовая палитра и роли
|
||
|
||
> **Source Pages:** `https://www.apple.com/`, `https://www.apple.com/environment/`, `https://www.apple.com/store`, `https://www.apple.com/shop/buy-iphone/iphone-17-pro`, `https://www.apple.com/shop/accessories/all`
|
||
|
||
### Primary
|
||
- **Absolute Black** (`#000000`): Иммерсивные героические полотна, высокодраматичные продуктовые главы, глубокие интерфейсные опоры.
|
||
- **Pale Apple Gray** (`#f5f5f7`): Основная светлая поверхность для функциональных полос, блоков сравнения и редакторских переходов.
|
||
- **Near-Black Ink** (`#1d1d1f`): Цвет основного текста и тёмной заливки элементов управления на светлых полотнах.
|
||
|
||
### Secondary & Accent
|
||
- **Apple Action Blue** (`#0071e3`): Заливка основного действия и брендовый акцент, сигнализирующий о фокусе.
|
||
- **Body Link Blue** (`#0066cc`): Цвет встроенных ссылок, оптимизированный для читаемости длинных текстов.
|
||
- **High-Luminance Link Blue** (`#2997ff`): Яркое оформление ссылок на тёмных сценах, где требуется более сильный контраст.
|
||
|
||
### Surface & Background
|
||
- **Pure White Canvas** (`#ffffff`): Фоны торговых/продуктовых списков и плотные транзакционные секции.
|
||
- **Graphite Surface A** (`#272729`): Контекстный слой тёмных карточек и медиаэлементов управления.
|
||
- **Graphite Surface B** (`#262629`): Чуть более глубокий тёмный утилитарный слой для группировок элементов управления.
|
||
- **Graphite Surface C** (`#28282b`): Приподнятые тёмные вспомогательные поверхности.
|
||
- **Graphite Surface D** (`#2a2a2c`): Самая тёмная приподнятая ступень, используемая для разделения в более насыщенных тёмных сценах.
|
||
|
||
### Neutrals & Text
|
||
- **Secondary Neutral Gray** (`#6e6e73`): Второстепенный основной текст, вспомогательные описания, третичные метаданные.
|
||
- **Soft Border Gray** (`#d2d2d7`): Разделители, тонкие контуры и приглушённое утилитарное обрамление.
|
||
- **Mid Border Gray** (`#86868b`): Более выраженные контуры полей в контекстах конфигурации продуктов и фильтров.
|
||
- **Utility Dark Gray** (`#424245`): Переходный тёмно-нейтральный текст/поверхность в контекстах магазина.
|
||
|
||
### Semantic & Accent
|
||
- **Selection/Focus Signal** (`#0071e3`): Общий сигнал фокуса и выбранного состояния в маркетинговых и коммерческих контекстах.
|
||
- **Error/Warning/Success**: В извлечённом наборе поверхностей не было последовательно видимой отдельной семантической палитры.
|
||
|
||
### Gradient System
|
||
- Извлечённые страницы подавляюще управляются сплошными поверхностями. Визуальное богатство создаётся фотографией и рендерингом отделки, а не постоянными градиентами интерфейса.
|
||
|
||
## 3. Правила типографики
|
||
|
||
### Font Family
|
||
- **Display Family:** `SF Pro Display`, запасные варианты `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
|
||
- **Text Family:** `SF Pro Text`, запасные варианты `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
|
||
- **Usage Split:** Семейство Display отвечает за героические/продуктовые заголовки и мерчандайзинговые заголовки; семейство Text отвечает за навигацию, элементы управления, подписи и плотный коммерческий текст.
|
||
|
||
### Hierarchy
|
||
| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|
||
|------|------|--------|-------------|----------------|-------|
|
||
| Hero Display XL | 80px | 600 | 1.00-1.05 | -1.2px | Героический масштаб Environment/store |
|
||
| Hero Display L | 56px | 600 | 1.07 | -0.28px | Героические моменты главной страницы |
|
||
| Section Display | 48px | 500-600 | 1.08 | -0.144px | Заголовки крупных глав |
|
||
| Product Heading | 40px | 600 | 1.10 | normal | Заголовки секций продуктов и кампаний |
|
||
| Feature Display | 38px | 600 | 1.21 | 0.152px | Выноски устройств и мерчандайзинга |
|
||
| Promo Display | 32px | 300-600 | 1.09-1.13 | 0.128px to 0.352px | Подгерои уровня модуля |
|
||
| Card/Product Title | 28px | 600 | 1.14 | 0.196px | Названия уровня плитки и ключевой текст |
|
||
| Utility Heading | 24px | 600 | 1.17 | 0.216px / -0.2px | Заголовки конфигуратора и сгруппированного контента |
|
||
| Link/Action Heading | 21px | 600 | 1.14-1.38 | 0.231px | Более крупные промоссылки |
|
||
| Subhead | 19px | 600 | 1.21 | 0.228px | Компактные вступления секций |
|
||
| Body Primary | 17px | 400 | 1.47 | -0.374px | Стандартный основной текст и торговые описания |
|
||
| Body Emphasis | 17px | 600 | 1.24 | -0.374px | Выделенные подписи и ключевые значения |
|
||
| Control Label | 14px | 400-600 | 1.29-1.47 | -0.224px | Кнопки, вспомогательные подписи, компактный навигационный текст |
|
||
| Micro UI | 12px | 400-600 | 1.00-1.33 | -0.12px | Мелкий шрифт, микроподписи |
|
||
| Legal/Meta | 10px | 400 | 1.30-1.47 | -0.08px | Плотные метаданные и юридический вспомогательный текст |
|
||
|
||
### Principles
|
||
- **Преемственность между типами страниц:** Одна и та же типографическая ДНК охватывает кинематографичные запуски и потоки покупки продуктов, предотвращая раскол бренда между маркетингом и коммерцией.
|
||
- **Компрессия при масштабировании:** Уровни Display используют плотный интерлиньяж и контролируемый трекинг, чтобы ощущаться машинными и ориентированными на продукт.
|
||
- **Читаемая плотность на торговой глубине:** SF Pro Text балансирует компактность с достаточным вертикальным ритмом для длинных списков продуктов и матриц опций.
|
||
- **Выверенная лестница насыщенности:** 600 — доминирующий вес выделения; 700 появляется выборочно; 300 используется экономно для контраста в более крупных строках.
|
||
|
||
### Note on Font Substitutes
|
||
- Ближайшие свободно доступные замены: `Inter` для текстоёмкой реализации и метрики, похожие на `SF Pro Display-like`, аппроксимированные `Inter Tight` для заголовков.
|
||
- При замене слегка увеличивайте межстрочную высоту (+0.02 до +0.06) на размерах основного текста и снижайте интенсивность отрицательного трекинга, чтобы сохранить читаемость.
|
||
|
||
## 4. Стилизация компонентов
|
||
|
||
### Buttons
|
||
- **Primary Fill Action:** фон `#0071e3`, текст `#ffffff`, радиус 8px, компактные горизонтальные отступы (обычно 8px 15px). Используется для решительных действий покупки/продвижения.
|
||
- **Dark Fill Action:** фон `#1d1d1f`, текст `#ffffff`, радиус 8px. Используется, когда светлым поверхностям нужно сдержанное высококонтрастное основное действие.
|
||
- **Pill/Capsule Action Family:** крупные капсульные действия с радиусами `18px`-`56px` и крайние «пилюльные» ссылки на `980px`. Задаёт мягкий, но точный силуэт призыва к действию Apple.
|
||
- **Utility Filter/Button Shells:** светлые оболочки (`#fafafc` или полупрозрачный белый) с тонкими серыми границами (`#d2d2d7` / `#86868b`) для плотных контекстов конфигурации.
|
||
- **Pressed Behavior:** активные элементы управления обычно слегка уменьшают масштаб или сдвигают заливку, чтобы обозначить физическое подтверждение нажатия.
|
||
|
||
### Cards & Containers
|
||
- **Editorial/Product Cards:** светлые карточки на полях `#f5f5f7` или белых с минимальным обрамлением и композицией «изображение в первую очередь».
|
||
- **Dark Utility Cards:** графитовые ступени (`#272729` до `#2a2a2c`), используемые для оверлеев, медиаэлементов управления и модулей в тёмном контексте.
|
||
- **Configurator Panels:** скруглённые контейнеры (часто 12px-18px) с чётким, но сдержанным определением границ.
|
||
- **Carousel/Spotlight Modules:** более крупные скруглённые оболочки (`28px`-`36px`) для дорожек избранного контента.
|
||
|
||
### Inputs & Forms
|
||
- **Retail Input Fields:** полупрозрачные или белые фоны, тёмный текст (`#1d1d1f`), обрамление, ведомое границами (`#86868b`).
|
||
- **Selection Controls:** круглая/тумблероподобная геометрия элементов управления часто встречается в интерфейсах выбора продуктов.
|
||
- **Density Strategy:** поля форм остаются визуально тихими, чтобы изображения устройств и иерархия цен оставались доминирующими.
|
||
|
||
### Navigation
|
||
- **Global Marketing Nav:** компактная тёмная полупрозрачная панель с мелким текстом ссылок и сдержанной иконографикой.
|
||
- **Store/Sub-shop Nav Layers:** дополнительные утилитарные панели, чипы и сегментированные элементы управления для сужения категорий и продуктов.
|
||
- **Link Hierarchy:** синие цвета ссылок остаются основным интерактивным сигналом, а нейтральный текст поддерживает плотные навигационные наборы.
|
||
|
||
### Image Treatment
|
||
- **Object-First Photography:** оборудование и аксессуары выводятся на передний план на контролируемых сплошных поверхностях.
|
||
- **High-fidelity finish rendering:** отражающие/материальные детали являются центральными для визуального убеждения.
|
||
- **Mixed framing:** полноэкранные героические сцены сосуществуют со скруглёнными торговыми карточками и плотно кадрированными мерчандайзинговыми миниатюрами.
|
||
|
||
### Other Distinctive Components
|
||
- **Product Configurator Matrix:** стопки опций и селекторы, сочетающие чипы, элементы управления в стиле радиокнопок и контекстные блоки цены/сводки.
|
||
- **Carousel Control Dots/Arrows:** круглая лексика элементов управления в приглушённых оверлеях для продвижения по галерее.
|
||
- **Environment Story Panels:** повествовательные главы, сочетающие редакторскую типографику с кинематографичными визуальными образами продукта/окружения.
|
||
|
||
## 5. Принципы компоновки
|
||
|
||
### Spacing System
|
||
- Базовая единица фактически равна `8px`, но система поддерживает плотные микрошаги для точного выравнивания.
|
||
- Часто повторно используемые значения интервалов на страницах: `2`, `4`, `6`, `7`, `8`, `9`, `10`, `12`, `14`, `17`, `20` px.
|
||
- Универсальные константы ритма, видимые как в маркетинговых, так и в торговых потоках: каркас на единице `8px` с утилитарными интервалами `14-20px` для отступов компонентов и интервалов в списках.
|
||
|
||
### Grid & Container
|
||
- **Showcase pages:** крупные центральные колонки с широким горизонтальным «дыханием» и полноширинными цветовыми главами.
|
||
- **Commerce pages:** более плотные многоколоночные сетки продуктов и элементов управления с частым модульным наслоением.
|
||
- **Container behavior:** ограниченное читаемое ядро с щедрыми внешними полями при настольных ширинах.
|
||
|
||
### Whitespace Philosophy
|
||
- **Scene pacing:** крупные визуальные главы используют широкое верхнее/нижнее «дыхание».
|
||
- **Information compaction where needed:** торговые страницы намеренно сжимают интервалы, чтобы показать больше действенной информации на один экран.
|
||
- **Contrast-led separation:** переходы между секциями опираются больше на смену поверхностей, чем на декоративные разделители.
|
||
|
||
### Border Radius Scale
|
||
- **5px:** крошечные утилитарные ссылки/теги и мелкие небольшие оболочки.
|
||
- **8px-12px:** стандартные элементы управления и компактные поля.
|
||
- **16px-18px:** карточки, рамки модулей и коммерческие панели.
|
||
- **28px-36px:** более крупные модульные и «прожекторные» контейнеры.
|
||
- **56px / 100px / 980px:** капсулы, крупные «пилюли» и фирменные удлинённые формы CTA.
|
||
- **50%:** круглые медиа- и селекционные элементы управления.
|
||
|
||
## 6. Глубина и возвышение
|
||
|
||
| Level | Treatment | Use |
|
||
|------|-----------|-----|
|
||
| Level 0 | Плоские нейтральные поверхности (`#ffffff`, `#f5f5f7`, `#000000`) | Основное повествование и продуктовые сцены |
|
||
| Level 1 | Тонкое обрамление границей (`#d2d2d7`, `#86868b`) | Фильтры, поля ввода, утилитарные карточки |
|
||
| Level 2 | Мягкая тень (`rgba(0,0,0,0.08)` до `rgba(0,0,0,0.22)`, где присутствует) | Выделенные карточки и приподнятые мерчандайзинговые модули |
|
||
| Level 3 | Ступенчатость тёмных поверхностей (`#272729` -> `#2a2a2c`) | Оверлеи, медиаэлементы управления, тёмные утилитарные кластеры |
|
||
| Accessibility | Синий сигнал фокуса (`#0071e3`) | Выделение для клавиатуры и выбора |
|
||
|
||
Глубина намеренно сдержанна. Apple предпочитает тональный контраст, ступенчатость поверхностей и композиционную иерархию вместо тяжёлых нагромождений теней.
|
||
|
||
### Decorative Depth
|
||
- Декоративная глубина создаётся главным образом фотографическим реализмом и рендерингом материалов, а не синтетическими эффектами интерфейса.
|
||
- Полупрозрачные оверлеи и стеклоподобные утилитарные панели обеспечивают лёгкое атмосферное наслоение в навигации и элементах управления.
|
||
|
||
## 7. Что делать и чего не делать
|
||
|
||
### Do
|
||
- Используйте нейтральную триаду (`#000000`, `#f5f5f7`, `#ffffff`) как структурную основу.
|
||
- Резервируйте синие акценты для подлинной семантики действий и навигации.
|
||
- Держите типографику плотной и выверенной, особенно на масштабах Display.
|
||
- Поддерживайте язык геометрии капсулы/круга для элементов управления и ключевых действий.
|
||
- Позвольте изображениям продуктов нести визуальную драму; держите «хром» ненавязчивым.
|
||
- Используйте обрамление, ведомое границами, в плотных торговых контекстах вместо тяжёлого декора карточек.
|
||
- Сохраняйте чёткое разделение между модулями-витринами и транзакционными модулями, удерживая общие базовые токены.
|
||
|
||
### Don't
|
||
- Не вводите широкие вторичные акцентные палитры, конкурирующие с синим Apple.
|
||
- Не злоупотребляйте тенями, эффектами свечения или декоративными градиентами в основном «хроме» интерфейса.
|
||
- Не смешивайте несвязанные семейства шрифтов и не ослабляйте трекинг без разбора.
|
||
- Не выравнивайте все углы до единого радиуса; Apple использует целенаправленные уровни радиуса.
|
||
- Не перегружайте коммерческие модули толстыми границами или громкими визуальными эффектами.
|
||
- Не убирайте нейтральную контрастную каденцию между тёмными и светлыми главами.
|
||
- Не рассматривайте маркетинговые и покупочные потоки как отдельные дизайн-системы.
|
||
|
||
## 8. Адаптивное поведение
|
||
|
||
### Breakpoints
|
||
| Name | Width | Key Changes |
|
||
|------|-------|-------------|
|
||
| Small Mobile | 374px and below | Сжатые торговые элементы управления, одноколоночные стопки продуктов |
|
||
| Mobile | 375px-640px | Одноколоночные модули, компактные ряды действий, уплотнённые селекторы |
|
||
| Tablet | 641px-833px | Расширенные карточки и смешанные переходы между 1-2 колонками |
|
||
| Tablet Wide | 834px-1023px | Более стабильный многоколоночный мерчандайзинг, более крупные текстовые блоки |
|
||
| Desktop | 1024px-1240px | Полные торговые компоновки и структуры сравнения продуктов |
|
||
| Desktop Wide | 1241px-1440px | Расширение героического маркетинга и более широкие интервалы секций |
|
||
| Large Desktop | 1441px+ | Максимальное «дыхание» глав и широкая редакторская композиция |
|
||
|
||
### Touch Targets
|
||
- Основные и второстепенные действия обычно представлены в удобной для нажатия геометрии «пилюль»/кнопок.
|
||
- Круглые медиа- и селекционные элементы управления соответствуют минимальной нажимаемой цели в мобильных контекстах.
|
||
- Плотный коммерческий интерфейс использует компактные подписи, но сохраняет чёткие области попадания за счёт окружающих отступов формы.
|
||
|
||
### Collapsing Strategy
|
||
- Типографика героического маркетинга масштабируется вниз дискретными уровнями, сохраняя контраст иерархии.
|
||
- Сетки продуктов и коммерции сворачиваются из многоколоночных в стопки карточек с сохранением видимости селекторов.
|
||
- Утилитарная навигация сжимается в более простые группировки ссылок/элементов управления, сохраняя ключевые действия.
|
||
- Кластеры опций/конфигурации становятся вертикально последовательными, чтобы поток покупки оставался линейным на малых экранах.
|
||
|
||
### Image Behavior
|
||
- Изображения продуктов сохраняют пропорции и центральность через брейкпойнты.
|
||
- Героические визуальные образы остаются доминирующими на мобильных, с перепозиционированием текста вокруг приоритета медиа.
|
||
- Торговые миниатюры остаются разборчивыми за счёт более плотной логики кадрирования и более насыщенного наслоения карточек.
|
||
- Модули, ведомые изображениями, продолжают закреплять ритм по мере роста плотности компоновки.
|
||
|
||
## 9. Руководство по подсказкам для агента
|
||
|
||
### Quick Color Reference
|
||
- Синий основного действия: **Apple Action Blue** (`#0071e3`)
|
||
- Синий встроенных ссылок: **Body Link Blue** (`#0066cc`)
|
||
- Полотно тёмной главы: **Absolute Black** (`#000000`)
|
||
- Полотно светлой главы: **Pale Apple Gray** (`#f5f5f7`)
|
||
- Основной текст на светлом: **Near-Black Ink** (`#1d1d1f`)
|
||
- Второстепенный текст: **Secondary Neutral Gray** (`#6e6e73`)
|
||
- Мягкая торговая граница: **Soft Border Gray** (`#d2d2d7`)
|
||
- Сильная торговая граница: **Mid Border Gray** (`#86868b`)
|
||
|
||
### Example Component Prompts
|
||
- "Спроектируйте героический блок продукта в стиле Apple на чёрном полотне (`#000000`) с заголовком SF Pro Display semibold (48-56px), лаконичным вспомогательным текстом и двумя капсульными CTA с использованием `#0071e3` и `#1d1d1f`."
|
||
- "Создайте коммерческую панель конфигурации на белом (`#ffffff`) с карточками со скруглением 18px, полями границ `#86868b`, основным текстом SF Pro Text 17px и компактными селекторами опций."
|
||
- "Постройте сетку мерчандайзинговых карточек, чередующую поверхности `#f5f5f7` и белые, с карточками «изображение в первую очередь», сдержанными тенями и метаданными SF Pro Text 14-17px."
|
||
- "Сгенерируйте кластер элементов управления каруселью с использованием круглых кнопок (радиус 50%), приглушённых серых оверлеев и чёткой обратной связи об активном состоянии для навигации по галерее."
|
||
- "Скомпонуйте смешанный ритм маркетинговой + торговой страницы: тёмная глава-витрина -> светлая функциональная глава -> плотный модуль списка продуктов, сохраняя синие акценты только для действий и ссылок."
|
||
|
||
### Iteration Guide
|
||
1. Сначала зафиксируйте нейтральную основу (`#000000`, `#f5f5f7`, `#ffffff`), прежде чем настраивать акценты.
|
||
2. Держите синие акценты редкими и целенаправленными; если всё синее, иерархия рушится.
|
||
3. Настраивайте типографику в таком порядке: масштаб Display, читаемость основного текста, затем микроподписи.
|
||
4. Сопоставляйте радиус по классу компонента (поле, карточка, капсула, круг), а не одно универсальное скругление для всех.
|
||
5. Постепенно увеличивайте плотность при переходе от секций-витрин к коммерческим секциям.
|
||
6. Проверяйте, что изображения продуктов остаются сильнейшим визуальным слоем после каждой ревизии.
|
||
|
||
### Known Gaps
|
||
- Отдельные семантические цвета статуса (error/warning/success) не были последовательно видимы в извлечённом наборе страниц.
|
||
- Некоторые интерактивные микросостояния различаются по модулям и не представлены как универсальные системные токены.
|
||
- Несколько торговых модулей раскрывают контекстно-специфичные переопределения типографики, которые не встречаются на всех пяти страницах.
|