admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f2d07b47adde0ca4a04e3af461a1c48e9917cc2d
workbuddy_skills/open-design/design-systems/notion/DESIGN-ru.md
T
admin 5afeb6b78a ④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根 
一、④段整套同步（用户选候选 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。
2026-10-15 21:17:28 +08:00

313 lines
32 KiB
Markdown
Raw Blame History

# Дизайн-система, вдохновлённая Notion
> Category: Продуктивность и SaaS
> Единое рабочее пространство. Тёплый минимализм, заголовки с засечками, мягкие поверхности.
## 1. Визуальная тема и атмосфера
Сайт Notion воплощает философию самого инструмента: чистый холст, который не мешает работе. Дизайн-система построена на тёплых нейтральных оттенках, а не на холодных серых, создавая самобытный, приближённый минимализм, напоминающий качественную бумагу, а не стерильное стекло. Холст страницы — чисто белый (`#ffffff`), но текст не является чисто чёрным — это тёплый почти-чёрный (`rgba(0,0,0,0.95)`), который едва уловимо смягчает восприятие при чтении. Тёплая шкала серых (`#f6f5f4`, `#31302e`, `#615d59`, `#a39e98`) несёт тонкие желтовато-коричневые подтоны, придавая интерфейсу тактильное, почти аналоговое тепло.
Кастомный шрифт NotionInter (модифицированный Inter) является основой системы. На крупных размерах (64px) используется агрессивный отрицательный кернинг (-2.125px), создающий заголовки, которые выглядят компактными и точными. Диапазон начертаний шире, чем в типичных системах: 400 для основного текста, 500 для элементов интерфейса, 600 для полужирных меток и 700 для заголовков. Функции OpenType `"lnum"` (выровненные цифры) и `"locl"` (локализованные формы) включены для крупного текста, добавляя типографическую изощрённость, которую можно оценить при внимательном чтении.
Отличительной чертой визуального языка Notion является философия границ. Вместо тяжёлых рамок или теней Notion использует сверхтонкие границы `1px solid rgba(0,0,0,0.1)` — границы, существующие как шёпот, едва заметные разделительные линии, создающие структуру без визуального веса. Система теней столь же сдержана: многослойные стеки с совокупной прозрачностью, никогда не превышающей 0,05, создают глубину, которую скорее ощущаешь, чем видишь.
**Ключевые характеристики:**
- NotionInter (модифицированный Inter) с отрицательным кернингом на крупных размерах (-2.125px при 64px)
- Тёплая нейтральная палитра: серые содержат желтовато-коричневые подтоны (`#f6f5f4` тёплый белый, `#31302e` тёплый тёмный)
- Почти-чёрный текст через `rgba(0,0,0,0.95)` — не чистый чёрный, создаёт микро-тепло
- Сверхтонкие границы: `1px solid rgba(0,0,0,0.1)` повсеместно — разделение с весом шёпота
- Многослойные стеки теней с индивидуальной прозрачностью менее 0,05 для едва ощутимой глубины
- Notion Blue (`#0075de`) как единственный акцентный цвет для CTA и интерактивных элементов
- Значки-пилюли (радиус 9999px) с тонированными синими фонами для статусных индикаторов
- Базовая единица отступов 8px с органичной, нежёсткой шкалой
## 2. Цветовая палитра и роли
### Основные цвета
- **Notion Black** (`rgba(0,0,0,0.95)` / `#000000f2`): Основной текст, заголовки, основной текст. Прозрачность 95% смягчает чистый чёрный, не жертвуя читаемостью.
- **Чистый белый** (`#ffffff`): Фон страницы, поверхности карточек, текст кнопки на синем.
- **Notion Blue** (`#0075de`): Основной CTA, цвет ссылок, интерактивный акцент — единственный насыщенный цвет в основном UI-хроме.
### Вторичные цвета бренда
- **Тёмно-синий** (`#213183`): Вторичный цвет бренда, используется редко для акцентов и тёмных секций с функциями.
- **Активный синий** (`#005bab`): Активное/нажатое состояние кнопки — более тёмный вариант Notion Blue.
### Тёплая нейтральная шкала
- **Тёплый белый** (`#f6f5f4`): Тонирование поверхности фона, чередование секций, тонкая заливка карточек. Жёлтый подтон имеет ключевое значение.
- **Тёплый тёмный** (`#31302e`): Тёмный фон поверхности, текст в тёмных секциях. Теплее стандартных серых.
- **Тёплый серый 500** (`#615d59`): Вторичный текст, описания, приглушённые метки.
- **Тёплый серый 300** (`#a39e98`): Текст заполнителя, отключённые состояния, текст подписей.
### Семантические акцентные цвета
- **Сине-зелёный** (`#2a9d99`): Состояния успеха, позитивные индикаторы.
- **Зелёный** (`#1aae39`): Подтверждение, значки завершения.
- **Оранжевый** (`#dd5b00`): Состояния предупреждения, индикаторы внимания.
- **Розовый** (`#ff64c8`): Декоративный акцент, выделение функций.
- **Фиолетовый** (`#391c57`): Премиальные функции, глубокие акценты.
- **Коричневый** (`#523410`): Земляной акцент, тёплые секции с функциями.
### Интерактивные цвета
- **Синий ссылки** (`#0075de`): Основной цвет ссылок с подчёркиванием при наведении.
- **Светло-синий ссылки** (`#62aef0`): Более светлый вариант ссылок для тёмного фона.
- **Синий фокуса** (`#097fe8`): Кольцо фокуса на интерактивных элементах.
- **Фон синего значка** (`#f2f9ff`): Фон значка-пилюли, тонированная синяя поверхность.
- **Текст синего значка** (`#097fe8`): Текст значка-пилюли, более тёмный синий для читаемости.
### Тени и глубина
- **Тень карточки** (`rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`): Многослойная высота карточки.
- **Глубокая тень** (`rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px`): Пятислойная глубокая высота для модальных окон и выделенного контента.
- **Граница-шёпот** (`1px solid rgba(0,0,0,0.1)`): Стандартная разделительная граница — карточки, разделители, секции.
## 3. Правила типографики
### Семейство шрифтов
- **Основной**: `NotionInter`, с запасными вариантами: `Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol`
- **Функции OpenType**: `"lnum"` (выровненные цифры) и `"locl"` (локализованные формы) включены для текстов крупного и заголовочного размера.
### Иерархия
| Роль | Шрифт | Размер | Начертание | Высота строки | Кернинг | Примечания |
|------|------|------|--------|-------------|----------------|-------|
| Крупный дисплей | NotionInter | 64px (4.00rem) | 700 | 1.00 (тесно) | -2.125px | Максимальное сжатие, заголовки-билборды |
| Дисплей вторичный | NotionInter | 54px (3.38rem) | 700 | 1.04 (тесно) | -1.875px | Вторичный hero, заголовки функций |
| Заголовок секции | NotionInter | 48px (3.00rem) | 700 | 1.00 (тесно) | -1.5px | Заголовки секций функций, с `"lnum"` |
| Подзаголовок крупный | NotionInter | 40px (2.50rem) | 700 | 1.50 | normal | Заголовки карточек, подсекции функций |
| Подзаголовок | NotionInter | 26px (1.63rem) | 700 | 1.23 (тесно) | -0.625px | Подзаголовки секций, заголовки контента |
| Заголовок карточки | NotionInter | 22px (1.38rem) | 700 | 1.27 (тесно) | -0.25px | Карточки функций, заголовки списков |
| Основной текст крупный | NotionInter | 20px (1.25rem) | 600 | 1.40 | -0.125px | Введения, описания функций |
| Основной текст | NotionInter | 16px (1.00rem) | 400 | 1.50 | normal | Стандартный текст для чтения |
| Основной текст Medium | NotionInter | 16px (1.00rem) | 500 | 1.50 | normal | Навигация, акцентированный текст интерфейса |
| Основной текст Semibold | NotionInter | 16px (1.00rem) | 600 | 1.50 | normal | Сильные метки, активные состояния |
| Основной текст Bold | NotionInter | 16px (1.00rem) | 700 | 1.50 | normal | Заголовки размером с основной текст |
| Навигация / Кнопка | NotionInter | 15px (0.94rem) | 600 | 1.33 | normal | Ссылки навигации, текст кнопок |
| Подпись | NotionInter | 14px (0.88rem) | 500 | 1.43 | normal | Метаданные, вторичные метки |
| Подпись Light | NotionInter | 14px (0.88rem) | 400 | 1.43 | normal | Подписи к тексту, описания |
| Значок | NotionInter | 12px (0.75rem) | 600 | 1.33 | 0.125px | Значки-пилюли, теги, метки статусов |
| Микроэтикетка | NotionInter | 12px (0.75rem) | 400 | 1.33 | 0.125px | Мелкие метаданные, временные метки |
### Принципы
- **Сжатие в масштабе**: NotionInter на крупных размерах использует кернинг -2.125px при 64px, постепенно ослабляя до -0.625px при 26px и normal при 16px. Сжатие создаёт плотность в заголовках, сохраняя читаемость на размерах основного текста.
- **Четырёхначертательная система**: 400 (основной текст/чтение), 500 (интерфейс/интерактивный), 600 (акцент/навигация), 700 (заголовки/дисплей). Более широкий диапазон начертаний по сравнению с большинством систем позволяет создавать нюансированную иерархию.
- **Тёплое масштабирование**: Высота строки уменьшается по мере увеличения размера — 1,50 для основного текста (16px), 1,23–1,27 для подзаголовков, 1,00–1,04 для дисплея. Это создаёт более плотные и выразительные заголовки.
- **Микро-трекинг значков**: 12px-текст значков использует положительный кернинг (0,125px) — единственный положительный трекинг в системе, делающий мелкий текст более широким и читаемым.
## 4. Стили компонентов
### Кнопки
**Основная синяя**
- Фон: `#0075de` (Notion Blue)
- Текст: `#ffffff`
- Отступ: 8px 16px
- Радиус: 4px (тонкий)
- Граница: `1px solid transparent`
- Наведение: фон темнеет до `#005bab`
- Активное состояние: трансформация scale(0.9)
- Фокус: обводка `2px solid`, тень `var(--shadow-level-200)`
- Использование: основной CTA («Get Notion free», «Try it»)
**Вторичная / Третичная**
- Фон: `rgba(0,0,0,0.05)` (полупрозрачный тёплый серый)
- Текст: `#000000` (почти-чёрный)
- Отступ: 8px 16px
- Радиус: 4px
- Наведение: изменение цвета текста, scale(1.05)
- Активное состояние: трансформация scale(0.9)
- Использование: вторичные действия, отправка форм
**Призрачная / Кнопка-ссылка**
- Фон: прозрачный
- Текст: `rgba(0,0,0,0.95)`
- Оформление: подчёркивание при наведении
- Использование: третичные действия, встроенные ссылки
**Кнопка-значок-пилюля**
- Фон: `#f2f9ff` (тонированный синий)
- Текст: `#097fe8`
- Отступ: 4px 8px
- Радиус: 9999px (полная пилюля)
- Шрифт: 12px начертание 600
- Использование: статусные значки, метки функций, теги «New»
### Карточки и контейнеры
- Фон: `#ffffff`
- Граница: `1px solid rgba(0,0,0,0.1)` (граница-шёпот)
- Радиус: 12px (стандартные карточки), 16px (выделенные/hero-карточки)
- Тень: `rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`
- Наведение: тонкое усиление тени
- Карточки с изображениями: верхний радиус 12px, изображение заполняет верхнюю половину
### Поля ввода и формы
- Фон: `#ffffff`
- Текст: `rgba(0,0,0,0.9)`
- Граница: `1px solid #dddddd`
- Отступ: 6px
- Радиус: 4px
- Фокус: синее кольцо обводки
- Заполнитель: тёплый серый `#a39e98`
### Навигация
- Чистая горизонтальная навигация на белом фоне, нефиксированная
- Логотип бренда выровнен по левому краю (иконка 33x34px + словесный знак)
- Ссылки: NotionInter 15px начертание 500–600, почти-чёрный текст
- Наведение: изменение цвета до `var(--color-link-primary-text-hover)`
- CTA: синяя кнопка-пилюля («Get Notion free») выровнена по правому краю
- Мобильный: сворачивание в меню-гамбургер
- Выпадающие меню продуктов с многоуровневыми категоризированными меню
### Обработка изображений
- Скриншоты продукта с границей `1px solid rgba(0,0,0,0.1)`
- Изображения с закруглёнными верхними углами: радиус `12px 12px 0px 0px`
- Скриншоты предпросмотра дашборда/рабочего пространства доминируют в секциях функций
- Тёплые градиентные фоны за hero-иллюстрациями (декоративные иллюстрации персонажей)
### Отличительные компоненты
**Карточки функций с иллюстрациями**
- Крупные иллюстративные заголовки (Большая волна, скриншоты UI продукта)
- Карточка с радиусом 12px и границей-шёпотом
- Заголовок 22px начертание 700, описание 16px начертание 400
- Вариант тёплого белого (`#f6f5f4`) фона для чередующихся секций
**Полоса доверия / Сетка логотипов**
- Логотипы компаний (секция доверенных команд) в их фирменных цветах
- Горизонтальная прокрутка или сеточная компоновка с количеством команд
- Отображение метрик: крупное число + описание
**Карточки метрик**
- Крупное отображение числа (напр., «$4,200 ROI»)
- NotionInter 40px+ начертание 700 для метрики
- Описание ниже в основном тексте тёплого серого цвета
- Контейнер-карточка с границей-шёпотом
## 5. Принципы компоновки
### Система отступов
- Базовая единица: 8px
- Шкала: 2px, 3px, 4px, 5px, 6px, 7px, 8px, 11px, 12px, 14px, 16px, 24px, 32px
- Нежёсткая органичная шкала с дробными значениями (5.6px, 6.4px) для микрорегулировок
### Сетка и контейнер
- Максимальная ширина контента: около 1200px
- Hero: центрированная одна колонка с щедрым верхним отступом (80–120px)
- Секции функций: сетки из 2–3 колонок для карточек
- Полноширинный тёплый белый (`#f6f5f4`) фон секций для чередования
- Скриншоты кода/дашборда ограничены границей-шёпотом
### Философия пустого пространства
- **Щедрый вертикальный ритм**: 64–120px между основными секциями. Notion даёт контенту дышать с помощью широких вертикальных отступов.
- **Тёплое чередование**: Белые секции чередуются с тёплыми белыми (`#f6f5f4`) секциями, создавая мягкий визуальный ритм без резких цветовых разрывов.
- **Контент-ориентированная плотность**: Блоки основного текста компактны (высота строки 1,50), но окружены достаточными отступами, создавая острова читаемого контента в море белого пространства.
### Шкала радиусов границ
- Микро (4px): Кнопки, поля ввода, функциональные интерактивные элементы
- Тонкий (5px): Ссылки, элементы списков, пункты меню
- Стандартный (8px): Маленькие карточки, контейнеры, встроенные элементы
- Комфортный (12px): Стандартные карточки, контейнеры функций, верхние части изображений
- Крупный (16px): Hero-карточки, выделенный контент, промо-блоки
- Полная пилюля (9999px): Значки, пилюли, статусные индикаторы
- Круг (100%): Индикаторы вкладок, аватары
## 6. Глубина и высота
| Уровень | Обработка | Использование |
|-------|-----------|-----|
| Плоский (Уровень 0) | Нет тени, нет границы | Фон страницы, текстовые блоки |
| Шёпот (Уровень 1) | `1px solid rgba(0,0,0,0.1)` | Стандартные границы, контуры карточек, разделители |
| Мягкая карточка (Уровень 2) | 4-слойный стек теней (макс. прозрачность 0,04) | Карточки контента, блоки функций |
| Глубокая карточка (Уровень 3) | 5-слойный стек теней (макс. прозрачность 0,05, размытие 52px) | Модальные окна, выделенные панели, hero-элементы |
| Фокус (Доступность) | Обводка `2px solid var(--focus-color)` | Фокус клавиатуры на всех интерактивных элементах |
**Философия теней**: Система теней Notion использует несколько слоёв с чрезвычайно низкой индивидуальной прозрачностью (от 0,01 до 0,05), которые накапливаются в мягкое, естественно выглядящее поднятие. 4-слойная тень карточки охватывает от 1,04px до 18px размытия, создавая градиент глубины, а не одну жёсткую тень. 5-слойная глубокая тень распространяется до 52px размытия при прозрачности 0,05, создавая окружающую окклюзию, напоминающую естественный свет, а не компьютерно генерированную глубину. Этот многослойный подход заставляет элементы казаться вписанными в страницу, а не парящими над ней.
### Декоративная глубина
- Секция hero: декоративные иллюстрации персонажей (игривый, нарисованный от руки стиль)
- Чередование секций: смена фона с белого на тёплый белый (`#f6f5f4`)
- Нет жёстких границ секций — разделение достигается за счёт изменения цвета фона и отступов
## 7. Адаптивное поведение
### Контрольные точки
| Название | Ширина | Ключевые изменения |
|------|-------|-------------|
| Мобильный малый | <400px | Узкая одна колонка, минимальные отступы |
| Мобильный | 400–600px | Стандартный мобильный, стопочная компоновка |
| Планшет малый | 600–768px | Начинаются сетки из 2 колонок |
| Планшет | 768–1080px | Полные сетки карточек, расширенные отступы |
| Настольный малый | 1080–1200px | Стандартная настольная компоновка |
| Настольный | 1200–1440px | Полная компоновка, максимальная ширина контента |
| Большой настольный | >1440px | Центрированный, щедрые поля |
### Цели касания
- Кнопки используют комфортные отступы (8px–16px по вертикали)
- Ссылки навигации 15px с достаточными отступами
- Значки-пилюли имеют горизонтальный отступ 8px для целей нажатия
- Кнопка переключения мобильного меню использует стандартную кнопку-гамбургер
### Стратегия сворачивания
- Hero: дисплей 64px → масштабируется до 40px → 26px на мобильном, пропорциональный кернинг сохраняется
- Навигация: горизонтальные ссылки + синий CTA → меню-гамбургер
- Карточки функций: 3 колонки → 2 колонки → одна стопочная колонка
- Скриншоты продукта: сохранение пропорций с адаптивными изображениями
- Логотипы полосы доверия: сетка → горизонтальная прокрутка на мобильном
- Подвал: многоколоночный → стопочная одна колонка
- Отступы секций: 80px+ → 48px на мобильном
### Поведение изображений
- Скриншоты рабочего пространства сохраняют границу-шёпот на всех размерах
- Hero-иллюстрации масштабируются пропорционально
- Скриншоты продукта используют адаптивные изображения с согласованным радиусом границы
- Полноширинные тёплые белые секции сохраняют обработку от края до края
## 8. Доступность и состояния
### Система фокуса
- Все интерактивные элементы получают видимые индикаторы фокуса
- Обводка фокуса: `2px solid` с цветом фокуса + уровень тени 200
- Навигация с помощью клавиши Tab поддерживается во всех интерактивных компонентах
- Высококонтрастный текст: почти-чёрный на белом превышает WCAG AAA (>14:1 соотношение)
### Интерактивные состояния
- **Стандартное**: Стандартный вид с границами-шёпотами
- **Наведение**: Изменение цвета текста, scale(1.05) для кнопок, подчёркивание для ссылок
- **Активное/Нажатое**: Трансформация scale(0.9), более тёмный вариант фона
- **Фокус**: Синее кольцо обводки с усилением тени
- **Отключённое**: Тёплый серый (`#a39e98`) текст, пониженная прозрачность
### Цветовой контраст
- Основной текст (rgba(0,0,0,0.95)) на белом: соотношение ~18:1
- Вторичный текст (#615d59) на белом: соотношение ~5,5:1 (WCAG AA)
- Синий CTA (#0075de) на белом: соотношение ~4,6:1 (WCAG AA для крупного текста)
- Текст значка (#097fe8) на фоне значка (#f2f9ff): соотношение ~4,5:1 (WCAG AA для крупного текста)
## 9. Руководство по промптам для агентов
### Быстрый справочник цветов
- Основной CTA: Notion Blue (`#0075de`)
- Фон: чистый белый (`#ffffff`)
- Альтернативный фон: тёплый белый (`#f6f5f4`)
- Текст заголовков: почти-чёрный (`rgba(0,0,0,0.95)`)
- Основной текст: почти-чёрный (`rgba(0,0,0,0.95)`)
- Вторичный текст: тёплый серый 500 (`#615d59`)
- Приглушённый текст: тёплый серый 300 (`#a39e98`)
- Граница: `1px solid rgba(0,0,0,0.1)`
- Ссылка: Notion Blue (`#0075de`)
- Кольцо фокуса: синий фокуса (`#097fe8`)
### Примеры промптов компонентов
- «Создайте hero-секцию на белом фоне. Заголовок 64px NotionInter начертание 700, высота строки 1,00, кернинг -2,125px, цвет rgba(0,0,0,0.95). Подзаголовок 20px начертание 600, высота строки 1,40, цвет #615d59. Синяя CTA-кнопка (#0075de, радиус 4px, отступ 8px 16px, белый текст) и призрачная кнопка (прозрачный фон, почти-чёрный текст, подчёркивание при наведении).»
- «Разработайте карточку: белый фон, граница 1px solid rgba(0,0,0,0.1), радиус 12px. Используйте стек теней: rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px, rgba(0,0,0,0.02) 0px 0.8px 2.93px, rgba(0,0,0,0.01) 0px 0.175px 1.04px. Заголовок 22px NotionInter начертание 700, кернинг -0,25px. Основной текст 16px начертание 400, цвет #615d59.»
- «Создайте значок-пилюлю: фон #f2f9ff, текст #097fe8, радиус 9999px, отступ 4px 8px, 12px NotionInter начертание 600, кернинг 0,125px.»
- «Создайте навигацию: белый заголовок. NotionInter 15px начертание 600 для ссылок, почти-чёрный текст. Синий CTA-пилюля 'Get Notion free' выровнен по правому краю (фон #0075de, белый текст, радиус 4px).»
- «Разработайте компоновку с чередующимися секциями: белые секции чередуются с тёплыми белыми (#f6f5f4) секциями. Каждая секция имеет вертикальный отступ 64–80px, максимальную ширину 1200px по центру. Заголовок секции 48px начертание 700, высота строки 1,00, кернинг -1,5px.»
### Руководство по итерации
1. Всегда используйте тёплые нейтральные оттенки — серые Notion имеют желтовато-коричневые подтоны (#f6f5f4, #31302e, #615d59, #a39e98), никогда не сине-серые
2. Кернинг масштабируется с размером шрифта: -2,125px при 64px, -1,875px при 54px, -0,625px при 26px, normal при 16px
3. Четыре начертания: 400 (читать), 500 (взаимодействовать), 600 (акцентировать), 700 (объявлять)
4. Границы — это шёпот: 1px solid rgba(0,0,0,0.1) — никогда не тяжелее
5. Тени используют 4–5 слоёв с индивидуальной прозрачностью не более 0,05
6. Тёплый белый (#f6f5f4) фон секций необходим для визуального ритма
7. Значки-пилюли (9999px) для статусов/тегов, радиус 4px для кнопок и полей ввода
8. Notion Blue (#0075de) — единственный насыщенный цвет в основном UI — использовать экономно для CTA и ссылок
Reference in new issue View Git Blame Copy Permalink