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。
234 lines
20 KiB
Markdown
234 lines
20 KiB
Markdown
# Система Дизайну, Натхненна Pinterest
|
||
|
||
> Category: Media & Consumer
|
||
> Візуальне відкриття. Червоний акцент, сітка masonry, зображення на першому плані.
|
||
|
||
## 1. Візуальна Тема та Атмосфера
|
||
|
||
Вебсайт Pinterest — це тепле, надихаюче полотно, яке перетворює візуальне відкриття на стиль мисленнєвого журналу. Дизайн побудований на м'якому, злегка теплому білому тлі, де Pinterest Red (`#e60023`) є єдиним сміливим акцентом бренду. На відміну від холодних відтінків синього більшості технологічних платформ, нейтральна шкала Pinterest має виразно теплий підтон — сірі відтінки тяжіють до оливково-піщаних тонів (`#91918c`, `#62625b`, `#e5e5e0`) замість холодної сталі, утворюючи затишну, ремісничу атмосферу, яка запрошує до перегляду.
|
||
|
||
Типографіка використовує Pin Sans — власний фірмовий шрифт із широким стеком запасних варіантів, включаючи японські шрифти, що відображає глобальний охоплення Pinterest. На відображальному масштабі (70px, жирність 600) Pin Sans створює великі, привабливі заголовки. На менших розмірах система компактна: кнопки 12px, підписи 12–14px. Система іменування CSS-змінних (`--comp-*`, `--sema-*`, `--base-*`) розкриває складну трирівневу архітектуру токенів дизайну: токени рівня компонента, семантичного рівня та базового рівня.
|
||
|
||
Pinterest вирізняється щедрою системою border-radius (12px–40px, плюс 50% для кіл) і теплими фонами кнопок. Другорядна кнопка (`#e5e5e0`) має виразно теплий, піщаний тон, а не холодний сірий. Основна червона кнопка використовує радіус 16px — округла, але не пігулкоподібна. У поєднанні з теплими фонами значків (`hsla(60,20%,98%,.5)` — ледь помітна жовто-тепла підсвітка) та макетами, де домінує фотографія, результатом є дизайн, що відчувається як рукотворний і особистісний, а не корпоративний і стерильний.
|
||
|
||
**Ключові Характеристики:**
|
||
- Тепле біле полотно з оливково/піщаними нейтральними тонами — затишне, не клінічне
|
||
- Pinterest Red (`#e60023`) як єдиний сміливий акцент — ніколи не ненав'язливий, завжди впевнений
|
||
- Фірмовий шрифт Pin Sans із глобальним стеком запасних варіантів (включаючи CJK)
|
||
- Трирівнева архітектура токенів: `--comp-*` / `--sema-*` / `--base-*`
|
||
- Теплі другорядні поверхні: піщаний сірий (`#e5e5e0`), тепла нашивка (`hsla(60,20%,98%,.5)`)
|
||
- Щедрий border-radius: стандартний 16px, до 40px для великих контейнерів
|
||
- Контент, де зображення на першому місці — пін/зображення є основним візуальним елементом
|
||
- Темно-майже-фіолетовий текст (`#211922`) — теплий, з відтінком сливи
|
||
|
||
## 2. Кольорова Палітра та Ролі
|
||
|
||
### Основний Бренд
|
||
- **Pinterest Red** (`#e60023`): Основний CTA, акцент бренду — сміливий, впевнений червоний
|
||
- **Green 700** (`#103c25`): `--base-color-green-700`, акцент успіху/природи
|
||
- **Green 700 Hover** (`#0b2819`): `--base-color-hover-green-700`, натиснутий зелений
|
||
|
||
### Текст
|
||
- **Сливовий Чорний** (`#211922`): Основний текст — теплий майже чорний із відтінком сливи
|
||
- **Чорний** (`#000000`): Другорядний текст, текст кнопок
|
||
- **Оливковий Сірий** (`#62625b`): Другорядні описи, приглушений текст
|
||
- **Тепле Срібло** (`#91918c`): `--comp-button-color-text-transparent-disabled`, вимкнений текст, межі полів введення
|
||
- **Білий** (`#ffffff`): Текст на темних/кольорових поверхнях
|
||
|
||
### Інтерактивні
|
||
- **Синій Фокус** (`#435ee5`): `--comp-button-color-border-focus-outer-transparent`, кільця фокусування
|
||
- **Фіолетовий Продуктивності** (`#6845ab`): `--sema-color-hover-icon-performance-plus`, функції продуктивності
|
||
- **Фіолетовий Рекомендації** (`#7e238b`): `--sema-color-hover-text-recommendation`, рекомендація ШІ
|
||
- **Синій Посилань** (`#2b48d4`): Колір тексту посилань
|
||
- **Синій Facebook** (`#0866ff`): `--facebook-background-color`, соціальний вхід
|
||
- **Натиснутий Синій** (`#617bff`): `--base-color-pressed-blue-200`, натиснутий стан
|
||
|
||
### Поверхня та Межа
|
||
- **Піщаний Сірий** (`#e5e5e0`): Фон другорядної кнопки — теплий, ремісничий
|
||
- **Тепле Світло** (`#e0e0d9`): Фони круглих кнопок, нашивки
|
||
- **Тепле Промивання** (`hsla(60, 20%, 98%, 0.5)`): `--comp-badge-color-background-wash-light`, ледь помітний теплий фон нашивки
|
||
- **Туман** (`#f6f6f3`): Світла поверхня (при 50% прозорості)
|
||
- **Вимкнена Межа** (`#c8c8c1`): `--sema-color-border-disabled`, вимкнені межі
|
||
- **Сірий Hover** (`#bcbcb3`): `--base-color-hover-grayscale-150`, межа hover
|
||
- **Темна Поверхня** (`#33332e`): Фони темних секцій
|
||
|
||
### Семантичні
|
||
- **Червоний Помилки** (`#9e0a0a`): Стани помилок для прапорців/форм
|
||
|
||
## 3. Правила Типографіки
|
||
|
||
### Сімейство Шрифтів
|
||
- **Основний**: `Pin Sans`, запасні: `-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`
|
||
|
||
### Ієрархія
|
||
|
||
| Роль | Шрифт | Розмір | Жирність | Висота рядка | Міжлітерний інтервал | Примітки |
|
||
|------|-------|--------|---------|--------------|---------------------|---------|
|
||
| Відображальний Герой | Pin Sans | 70px (4.38rem) | 600 | нормальний | нормальний | Максимальний ефект |
|
||
| Заголовок секції | Pin Sans | 28px (1.75rem) | 700 | нормальний | -1.2px | Від'ємне трекінгування |
|
||
| Основний текст | Pin Sans | 16px (1.00rem) | 400 | 1.40 | нормальний | Стандартне читання |
|
||
| Жирний підпис | Pin Sans | 14px (0.88rem) | 700 | нормальний | нормальний | Виразні метадані |
|
||
| Підпис | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | нормальний | Малий текст, теги |
|
||
| Кнопка | Pin Sans | 12px (0.75rem) | 400 | нормальний | нормальний | Мітки кнопок |
|
||
|
||
### Принципи
|
||
- **Компактна типографічна шкала**: Діапазон — від 12px до 70px із драматичним стрибком; більшість функціонального тексту — 12–16px, утворюючи щільну ієрархію інформації на кшталт додатка.
|
||
- **Теплий розподіл жирності**: 600–700 для заголовків, 400–500 для основного тексту. Без ультралегких жирностей — типографіка завжди відчувається вагомою.
|
||
- **Від'ємне трекінгування в заголовках**: -1.2px у заголовках 28px створює затишні, інтимні назви секцій.
|
||
- **Одне сімейство шрифтів**: Pin Sans обслуговує все — не виявлено другорядного відображального або моноширинного шрифту.
|
||
|
||
## 4. Стилі Компонентів
|
||
|
||
### Кнопки
|
||
|
||
**Основний Червоний**
|
||
- Фон: `#e60023` (Pinterest Red)
|
||
- Текст: `#000000` (чорний — незвичний вибір для контрасту на червоному)
|
||
- Відступ: 6px 14px
|
||
- Радіус: 16px (щедро округлений, не пігулкоподібний)
|
||
- Межа: `2px solid rgba(255, 255, 255, 0)` (прозора)
|
||
- Фокус: семантична межа + обведення через CSS-змінні
|
||
|
||
**Другорядний Піщаний**
|
||
- Фон: `#e5e5e0` (теплий піщаний сірий)
|
||
- Текст: `#000000`
|
||
- Відступ: 6px 14px
|
||
- Радіус: 16px
|
||
- Фокус: та сама семантична система меж
|
||
|
||
**Кругла Дія**
|
||
- Фон: `#e0e0d9` (тепле світло)
|
||
- Текст: `#211922` (сливовий чорний)
|
||
- Радіус: 50% (коло)
|
||
- Використання: дії з пінами, елементи навігації
|
||
|
||
**Ghost / Прозорий**
|
||
- Фон: прозорий
|
||
- Текст: `#000000`
|
||
- Без межі
|
||
- Використання: третинні дії
|
||
|
||
### Картки та Контейнери
|
||
- Картки пінів із пріоритетом фотографії та щедрим радіусом (12px–20px)
|
||
- Немає традиційної box-shadow на більшості карток
|
||
- Білі або теплі туманні фони
|
||
- Товста біла межа 8px на деяких контейнерах зображень
|
||
|
||
### Поля Введення
|
||
- Введення email: білий фон, межа `1px solid #91918c`, радіус 16px, відступ 11px 15px
|
||
- Фокус: семантична система меж і обведення через CSS-змінні
|
||
|
||
### Навігація
|
||
- Чистий заголовок на білому або теплому фоні
|
||
- Логотип Pinterest + рядок пошуку по центру
|
||
- Pin Sans 16px для навігаційних посилань
|
||
- Акценти Pinterest Red для активних станів
|
||
|
||
### Обробка Зображень
|
||
- Сітка masonry у стилі пінів (фірмовий макет Pinterest)
|
||
- Скруглені кути: 12px–20px на зображеннях
|
||
- Фотографія як основний контент — кожен пін є зображенням
|
||
- Товсті білі межі (8px) на виділених контейнерах зображень
|
||
|
||
## 5. Принципи Макету
|
||
|
||
### Система Відступів
|
||
- Базова одиниця: 8px
|
||
- Шкала: 4px, 6px, 7px, 8px, 10px, 11px, 12px, 16px, 18px, 20px, 22px, 24px, 32px, 80px, 100px
|
||
- Великі стрибки: 32px → 80px → 100px для відступів між секціями
|
||
|
||
### Сітка та Контейнер
|
||
- Сітка masonry для контенту пінів (фірмовий макет)
|
||
- Центровані секції контенту із щедрою максимальною шириною
|
||
- Темний футер на всю ширину
|
||
- Рядок пошуку як основний елемент навігації
|
||
|
||
### Філософія Пустого Простору
|
||
- **Щільність натхнення**: Сітка masonry щільно пакує піни — щільність контенту є ціннісною пропозицією. Пустий простір існує між секціями, але не всередині сітки.
|
||
- **Дихання зверху, щільність знизу**: Секції героя/функцій отримують щедрий відступ; сітка пінів компактна й занурююча.
|
||
|
||
### Шкала Border Radius
|
||
- Стандартний (12px): Малі картки, посилання
|
||
- Кнопка (16px): Кнопки, поля введення, середні картки
|
||
- Комфортний (20px): Картки функцій
|
||
- Великий (28px): Великі контейнери
|
||
- Секція (32px): Елементи вкладок, великі панелі
|
||
- Герой (40px): Контейнери героїв, великі блоки функцій
|
||
- Коло (50%): Кнопки дії, індикатори вкладок
|
||
|
||
## 6. Глибина та Висота
|
||
|
||
| Рівень | Обробка | Використання |
|
||
|--------|---------|-------------|
|
||
| Плаский (Рівень 0) | Без тіні | За замовчуванням — піни покладаються на контент, а не на тінь |
|
||
| Ледь помітний (Рівень 1) | Мінімальна тінь (із токенів) | Піднятими накладки, спадні меню |
|
||
| Фокус (Доступність) | Кільце `--sema-color-border-focus-outer-default` | Стани фокусування |
|
||
|
||
**Філософія Тіней**: Pinterest використовує мінімальні тіні. Сітка masonry покладається на контент (фотографію) для створення візуального інтересу, а не на ефекти підняття. Глибина походить від теплоти кольорів поверхонь і щедрого скруглення контейнерів.
|
||
|
||
## 7. Що Робити і Чого Уникати
|
||
|
||
### Робити
|
||
- Використовуй теплі нейтральні тони (`#e5e5e0`, `#e0e0d9`, `#91918c`) — теплий оливково/піщаний тон є ідентичністю
|
||
- Застосовуй Pinterest Red (`#e60023`) лише для основних CTA — він сміливий і єдиний
|
||
- Використовуй Pin Sans виключно — один шрифт для всього
|
||
- Застосовуй щедрий border-radius: 16px для кнопок/полів введення, 20px+ для карток
|
||
- Зберігай сітку masonry щільною — щільність контенту є цінністю
|
||
- Використовуй теплі фони нашивок (`hsla(60,20%,98%,.5)`) для ледь помітних теплих промивань
|
||
- Використовуй `#211922` (сливовий чорний) для основного тексту — він тепліший за чистий чорний
|
||
|
||
### Уникати
|
||
- Не використовуй холодні сірі нейтральні тони — завжди теплий/оливковий відтінок
|
||
- Не використовуй чистий чорний (`#000000`) як основний текст — використовуй сливовий чорний (`#211922`)
|
||
- Не використовуй кнопки пігулкоподібної форми — радіус 16px округлений, але не пігулкоподібний
|
||
- Не додавай важких тіней — Pinterest плаский за своєю суттю, глибина від контенту
|
||
- Не використовуй малий border-radius (<12px) на картках — щедре скруглення є основним
|
||
- Не вводь додаткові кольори бренду — червоний + теплі нейтральні є повною палітрою
|
||
- Не використовуй тонкі жирності шрифту — Pin Sans мінімум 400
|
||
|
||
## 8. Адаптивна Поведінка
|
||
|
||
### Точки Перелому
|
||
| Назва | Ширина | Ключові Зміни |
|
||
|-------|--------|--------------|
|
||
| Мобільний | <576px | Один стовпець, компактний макет |
|
||
| Великий Мобільний | 576–768px | Сітка пінів у 2 стовпці |
|
||
| Планшет | 768–890px | Розширена сітка |
|
||
| Малий Десктоп | 890–1312px | Стандартна сітка masonry |
|
||
| Десктоп | 1312–1440px | Повний макет |
|
||
| Великий Десктоп | 1440–1680px | Розширені стовпці сітки |
|
||
| Ультрашироке | >1680px | Максимальна щільність сітки |
|
||
|
||
### Стратегія Згортання
|
||
- Сітка пінів: 5+ стовпців → 3 → 2 → 1
|
||
- Навігація: рядок пошуку + іконки → спрощена мобільна навігація
|
||
- Секції функцій: поруч → укладені
|
||
- Герой: 70px → масштабується пропорційно вниз
|
||
- Футер: темний багатоколонковий → укладений
|
||
|
||
## 9. Посібник із Запитів Агента
|
||
|
||
### Швидка Кольорова Довідка
|
||
- Бренд: Pinterest Red (`#e60023`)
|
||
- Фон: Білий (`#ffffff`)
|
||
- Текст: Сливовий Чорний (`#211922`)
|
||
- Другорядний текст: Оливковий Сірий (`#62625b`)
|
||
- Поверхня кнопки: Піщаний Сірий (`#e5e5e0`)
|
||
- Межа: Тепле Срібло (`#91918c`)
|
||
- Фокус: Синій Фокус (`#435ee5`)
|
||
|
||
### Приклади Запитів для Компонентів
|
||
- "Створи блок героя: білий фон. Заголовок 70px Pin Sans жирність 600, сливовий чорний (#211922). Червона кнопка CTA (#e60023, радіус 16px, відступ 6px 14px). Другорядна піщана кнопка (#e5e5e0, радіус 16px)."
|
||
- "Спроєктуй картку пінів: білий фон, радіус 16px, без тіні. Фотографія заповнює верхню частину, опис Pin Sans 16px жирність 400 нижче у кольорі #62625b."
|
||
- "Побудуй кругла кнопку дії: фон #e0e0d9, радіус 50%, іконка #211922."
|
||
- "Створи поле введення: білий фон, 1px solid #91918c, радіус 16px, відступ 11px 15px. Фокус: синє обведення через семантичні токени."
|
||
- "Спроєктуй темний футер: фон #33332e. Логотип Pinterest скриптом у білому. Посилання 12px Pin Sans у #91918c."
|
||
|
||
### Посібник з Ітерацій
|
||
1. Теплі нейтральні скрізь — оливково/піщані сірі, ніколи холодна сталь
|
||
2. Pinterest Red лише для CTA — сміливий і єдиний
|
||
3. Радіус 16px на кнопках/полях введення, 20px+ на картках — щедрий, але не пігулкоподібний
|
||
4. Pin Sans є єдиним шрифтом — компактний 12px для UI, 70px для відображення
|
||
5. Фотографія несе дизайн — UI залишається теплим і мінімалістичним
|
||
6. Сливовий чорний (#211922) для тексту — тепліший за чистий чорний
|