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。
30 KiB
30 KiB
Дизайн-система, натхненна Notion
Category: Продуктивність і SaaS Універсальний робочий простір. Теплий мінімалізм, заголовки із засічками, м'які поверхні.
1. Візуальна тема та атмосфера
Вебсайт Notion утілює філософію самого інструмента: чисте полотно, яке не стає у вас на шляху. Дизайн-система побудована на теплих нейтральних відтінках, а не на холодних сірих, створюючи виразно доступний мінімалізм, що відчувається радше як якісний папір, ніж стерильне скло. Полотно сторінки чисто біле (#ffffff), але текст не чисто чорний -- це теплий, майже чорний відтінок (rgba(0,0,0,0.95)), який непомітно пом'якшує досвід читання. Шкала теплих сірих (#f6f5f4, #31302e, #615d59, #a39e98) несе тонкі жовто-коричневі підтони, надаючи інтерфейсу тактильну, майже аналогову теплоту.
Кастомний шрифт NotionInter (модифікований Inter) є хребтом системи. У великих розмірах (64px) він використовує агресивний від'ємний міжлітерний інтервал (-2.125px), створюючи заголовки, що відчуваються стиснутими й точними. Діапазон насиченості ширший, ніж у типових системах: 400 для основного тексту, 500 для елементів UI, 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% непрозорості пом'якшує чистий чорний без втрати читабельності. - Pure White (
#ffffff): Тло сторінки, поверхні карток, текст кнопки на синьому. - Notion Blue (
#0075de): Основний CTA, колір посилання, інтерактивний акцент -- єдиний насичений колір у базовому обрамленні UI.
Вторинні бренду
- Deep Navy (
#213183): Вторинний колір бренду, використовується помірно для акцентування та темних секцій функцій. - Active Blue (
#005bab): Активний/натиснутий стан кнопки -- темніший варіант Notion Blue.
Шкала теплих нейтральних
- Warm White (
#f6f5f4): Тонування поверхні тла, чергування секцій, тонке заповнення картки. Жовтий підтон є ключовим. - Warm Dark (
#31302e): Тло темної поверхні, текст темної секції. Тепліший за стандартні сірі. - Warm Gray 500 (
#615d59): Вторинний текст, описи, приглушені мітки. - Warm Gray 300 (
#a39e98): Текст-заповнювач, вимкнені стани, текст підписів.
Семантичні акцентні кольори
- Teal (
#2a9d99): Стани успіху, позитивні індикатори. - Green (
#1aae39): Підтвердження, значки завершення. - Orange (
#dd5b00): Стани попередження, індикатори уваги. - Pink (
#ff64c8): Декоративний акцент, виділення функцій. - Purple (
#391c57): Преміум-функції, глибокі акценти. - Brown (
#523410): Земляний акцент, теплі секції функцій.
Інтерактивні
- Link Blue (
#0075de): Основний колір посилання з підкресленням при наведенні. - Link Light Blue (
#62aef0): Світліший варіант посилання для темного тла. - Focus Blue (
#097fe8): Кільце фокуса на інтерактивних елементах. - Badge Blue Bg (
#f2f9ff): Тло значка-пігулки, тонована синя поверхня. - Badge Blue Text (
#097fe8): Текст значка-пігулки, темніший синій для читабельності.
Тіні та глибина
- Card Shadow (
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): Багатошарове підняття картки. - Deep Shadow (
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): П'ятишарове глибоке підняття для модальних вікон і виділеного контенту. - Whisper Border (
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"(локалізовані форми) увімкнені для великого та заголовкового тексту.
Ієрархія
| Роль | Шрифт | Розмір | Насиченість | Висота рядка | Міжлітерний інтервал | Примітки |
|---|---|---|---|---|---|---|
| Display Hero | NotionInter | 64px (4.00rem) | 700 | 1.00 (щільна) | -2.125px | Максимальне стиснення, білборд-заголовки |
| Display Secondary | NotionInter | 54px (3.38rem) | 700 | 1.04 (щільна) | -1.875px | Вторинний hero, заголовки функцій |
| Section Heading | NotionInter | 48px (3.00rem) | 700 | 1.00 (щільна) | -1.5px | Заголовки секцій функцій, із "lnum" |
| Sub-heading Large | NotionInter | 40px (2.50rem) | 700 | 1.50 | normal | Заголовки карток, підсекції функцій |
| Sub-heading | NotionInter | 26px (1.63rem) | 700 | 1.23 (щільна) | -0.625px | Підзаголовки секцій, заголовки контенту |
| Card Title | NotionInter | 22px (1.38rem) | 700 | 1.27 (щільна) | -0.25px | Картки функцій, заголовки списків |
| Body Large | NotionInter | 20px (1.25rem) | 600 | 1.40 | -0.125px | Вступи, описи функцій |
| Body | NotionInter | 16px (1.00rem) | 400 | 1.50 | normal | Стандартний текст для читання |
| Body Medium | NotionInter | 16px (1.00rem) | 500 | 1.50 | normal | Навігація, виділений текст UI |
| Body Semibold | NotionInter | 16px (1.00rem) | 600 | 1.50 | normal | Сильні мітки, активні стани |
| Body Bold | NotionInter | 16px (1.00rem) | 700 | 1.50 | normal | Заголовки в розмірі основного тексту |
| Nav / Button | NotionInter | 15px (0.94rem) | 600 | 1.33 | normal | Навігаційні посилання, текст кнопки |
| Caption | NotionInter | 14px (0.88rem) | 500 | 1.43 | normal | Метадані, вторинні мітки |
| Caption Light | NotionInter | 14px (0.88rem) | 400 | 1.43 | normal | Підписи контенту, описи |
| Badge | NotionInter | 12px (0.75rem) | 600 | 1.33 | 0.125px | Значки-пігулки, теги, мітки стану |
| Micro Label | NotionInter | 12px (0.75rem) | 400 | 1.33 | 0.125px | Малі метадані, часові позначки |
Принципи
- Стиснення в масштабі: NotionInter у великих розмірах використовує міжлітерний інтервал -2.125px при 64px, поступово послаблюючись до -0.625px при 26px і normal при 16px. Стиснення створює щільність у заголовках, зберігаючи читабельність у розмірах основного тексту.
- Система з чотирьох насиченостей: 400 (основний/читання), 500 (UI/інтерактивний), 600 (акцент/навігація), 700 (заголовки/великі). Ширший діапазон насиченості порівняно з більшістю систем дозволяє нюансовану ієрархію.
- Тепле масштабування: Висота рядка стискається зі збільшенням розміру -- 1.50 в основному тексті (16px), 1.23-1.27 у підзаголовках, 1.00-1.04 у великих. Це створює щільніші, більш виразні заголовки.
- Мікротрекінг значків: Текст значка 12px використовує додатний міжлітерний інтервал (0.125px) -- єдиний додатний трекінг у системі, що створює ширший, більш розбірливий малий текст.
4. Стилі компонентів
Кнопки
Primary Blue
- Тло:
#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")
Secondary / Tertiary
- Тло:
rgba(0,0,0,0.05)(напівпрозорий теплий сірий) - Текст:
#000000(майже чорний) - Відступи: 8px 16px
- Радіус: 4px
- Наведення: колір тексту зміщується, scale(1.05)
- Активний: трансформація scale(0.9)
- Використання: Вторинні дії, надсилання форм
Ghost / Link Button
- Тло: прозоре
- Текст:
rgba(0,0,0,0.95) - Декорація: підкреслення при наведенні
- Використання: Третинні дії, вбудовані посилання
Pill Badge Button
- Тло:
#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. Глибина та підняття
| Рівень | Обробка | Використання |
|---|---|---|
| Плаский (Level 0) | Без тіні, без межі | Тло сторінки, текстові блоки |
| Шепіт (Level 1) | 1px solid rgba(0,0,0,0.1) |
Стандартні межі, контури карток, роздільники |
| М'яка картка (Level 2) | 4-шаровий стос тіней (макс. непрозорість 0.04) | Картки контенту, блоки функцій |
| Глибока картка (Level 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. Адаптивна поведінка
Точки зламу
| Назва | Ширина | Ключові зміни |
|---|---|---|
| Mobile Small | <400px | Щільний один стовпець, мінімальні відступи |
| Mobile | 400-600px | Стандартний мобільний, складене компонування |
| Tablet Small | 600-768px | Починаються 2-стовпчикові сітки |
| Tablet | 768-1080px | Повні сітки карток, розширені відступи |
| Desktop Small | 1080-1200px | Стандартне настільне компонування |
| Desktop | 1200-1440px | Повне компонування, максимальна ширина контенту |
| Large Desktop | >1440px | Центроване, щедрі поля |
Цілі дотику
- Кнопки використовують комфортні відступи (8px-16px по вертикалі)
- Навігаційні посилання при 15px з достатнім інтервалом
- Значки-пігулки мають 8px горизонтального відступу для цілей дотику
- Перемикач мобільного меню використовує стандартну гамбургер-кнопку
Стратегія згортання
- Hero: 64px великий -> масштабується до 40px -> 26px на мобільному, зберігає пропорційний міжлітерний інтервал
- Навігація: горизонтальні посилання + синій CTA -> гамбургер-меню
- Картки функцій: 3-стовпчикові -> 2-стовпчикові -> один стовпець складений
- Скріншоти продукту: зберігають співвідношення сторін з адаптивними зображеннями
- Логотипи панелі довіри: сітка -> горизонтальне прокручування на мобільному
- Підвал: багатостовпчиковий -> складений один стовпець
- Інтервал секцій: 80px+ -> 48px на мобільному
Поведінка зображень
- Скріншоти робочого простору зберігають межу шепоту в усіх розмірах
- Hero-ілюстрації масштабуються пропорційно
- Скріншоти продукту використовують адаптивні зображення з узгодженим радіусом межі
- Секції в теплому білому на всю ширину зберігають обробку від краю до краю
8. Доступність та стани
Система фокуса
- Усі інтерактивні елементи отримують видимі індикатори фокуса
- Контур фокуса:
2px solidз кольором фокуса + тінь level 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) - Тло: Pure White (
#ffffff) - Альтернативне тло: Warm White (
#f6f5f4) - Текст заголовка: Майже чорний (
rgba(0,0,0,0.95)) - Основний текст: Майже чорний (
rgba(0,0,0,0.95)) - Вторинний текст: Warm Gray 500 (
#615d59) - Приглушений текст: Warm Gray 300 (
#a39e98) - Межа:
1px solid rgba(0,0,0,0.1) - Посилання: Notion Blue (
#0075de) - Кільце фокуса: Focus Blue (
#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, білий текст) і ghost-кнопка (прозоре тло, майже чорний текст, підкреслення при наведенні)."
- "Спроєктуй картку: біле тло, межа 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 вертикального відступу, max-width 1200px центроване. Заголовок секції 48px насиченість 700, висота рядка 1.00, міжлітерний інтервал -1.5px."
Посібник з ітерацій
- Завжди використовуй теплі нейтральні відтінки -- сірі Notion мають жовто-коричневі підтони (#f6f5f4, #31302e, #615d59, #a39e98), ніколи синьо-сірі
- Міжлітерний інтервал масштабується з розміром шрифту: -2.125px при 64px, -1.875px при 54px, -0.625px при 26px, normal при 16px
- Чотири насиченості: 400 (читання), 500 (взаємодія), 600 (акцент), 700 (оголошення)
- Межі — це шепіт: 1px solid rgba(0,0,0,0.1) -- ніколи важчі
- Тіні використовують 4-5 шарів з індивідуальною непрозорістю, що ніколи не перевищує 0.05
- Тло секцій у теплому білому (#f6f5f4) є важливим для візуального ритму
- Значки-пігулки (9999px) для стану/тегів, радіус 4px для кнопок і полів введення
- Notion Blue (#0075de) — єдиний насичений колір у базовому UI -- використовуй його помірно для CTA та посилань