# Дизайн-система, натхненна 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."

### Посібник з ітерацій
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 та посилань