Notion
Теплий паперовий блокнот під полуденним сонцем
Інтерфейс Notion виглядає як улюблений паперовий блокнот при світлі дня: тепле кремове полотно (#f6f5f4), яке відчувається швидше тактильним, ніж стерильним, щедра друкарня без засічок, що надає редакційну вагу тексту про продукт, і колір, що використовується як рідка пунктуація. основної дії, а змінний набір акцентних відтінків (кораловий, бурштиновий, небесний, північний) розфарбовує фон карток, наче стікери. Картки розташовуються на полотні з тонкими рамками та кутами – без тіней, без хрому – як розліновані секції у блокноті Moleskine. Анімація грайлива та пружна, з плавними переходами із затримкою в 200 мс та пружними анімаціями символів, які роблять інтерфейс живим, не будучи при цьому декоративним.
Центрована, максимальна ширина обмежена приблизно 1440px. Головний елемент є центрованим стосом: рядок із символами → великий заголовок у два рядки з вбудованою кольоровою таблеткою → підзаголовок → рядок з двома кнопками заклику до дії → великий макет інтерфейсу користувача. Під головним елементом секції чергуються між сітками із білих карток та повнокольоровими акцентними панелями. Стіна з логотипами є центрованою однорядною сіткою з логотипів партнерів у відтінках сірого. Блоки з функціями використовують двоколонне компонування (текст зліва, кольорова панель праворуч), яка чергується зліва направо між секціями. Розділ «Задайте питання своїм асистентам на запит» використовує сітку з карток 2×2, де верхня картка займає всю ширину, а нижній рядок поділяється на дві рівні колонки. Проміжки між секціями досить великі (~80px), створюючи спокійний вертикальний ритм. Навігація являє собою фіксовану верхню панель висотою 64px з центрованими елементами навігації та вирівняними праворуч кнопками дій.
Ілюстрації над усе, без фотографій. Візуальна мова побудована на плоских ілюстрованих символах (круглі грані в кольорових колах 2px), абстрактних декоративних елементах (намальовані від руки шипочки, блискітки, стрілки, форми кольорів) та макетах інтерфейсу користувача. Символи відображаються в головному вікні у вигляді горизонтального ряду з 7 аватарів і розкидані по сторінці як грайливих розділових знаків. Скріншоти продукту – єдині «реальні» візуальні елементи: вони показують реальний інтерфейс Notion (канбан-дошки, подання документів, панелі ІІ-агентів) з повним набором елементів та реальними даними. Макет продукту у головному вікні великий, центрований і відкидає єдину тінь, що відокремлює його від полотна. Тут немає фотографій у стилі лайфстайл, немає стікових зображень, немає абстрактних 3D-рендерів.
Палітра
Бренд
- Notion Blue
#0075de— Основний елемент, що заповнює кнопку заклику до дії (CTA), акцент в активній навігації, заповнені кнопки дій — єдине колірне рішення в майже монохромній системі досить насичене, щоб сприйматися як перемикач.
Нейтральні
- Paper Warmth
#f6f5f4— Полотно сторінки, тло головного вікна, тло розділів — теплий, трохи бежевий колір надає системі тактильного аналогового відчуття. - Pure White
#ffffff— Поверхня картки, підняті панелі, фону з логотипом, контрастний текст на темні картки. - Ink Black
#000000— Основний текст, навігаційні посилання, заголовки використовуються з різною прозорістю (100%, 95%, 90%, 60%, 40%, 20%) для побудови ієрархії без додавання нових кольорів. - Charcoal
#111111— Варіант тексту з темною гамою для тих моментів інтерфейсу користувача, де чистий чорний колір буде виглядати занадто різко. - Stone
#757575— Другий навігаційний текст, приглушений допоміжний текст, деактивовані підписи кнопок - альфа-канал чорнило 60% - Graphite
#615d59— Основний текст із теплим відтінком — коричнево-сірий, що гармонує з теплим фоном.
Друкарня
від 12 до 96px · 10 ступенів
- NotionInter — заміна: Inter · зображення 400, 500, 600, 700 · Основний шрифт без засічок – геометричний гуманістичний з невеликими особливостями, використовується у розмірі 400 для основного тексту, 500 для навігації/інтерфейсу користувача, 600-700 для заголовків. У шрифтовій шкалі використовується агресивна негативна міжлітерна відстань при великих розмірах (-4.6px при 96px, -2px при 72px), що робить заголовок компактнішим і впевненішим, а не повітряним.
- Lyon Text — заміна: Source Serif Pro · зображення 400 · Редакційний шрифт із засічками, зарезервований для окремих фрагментів основного тексту та вступів до розділів, використовується економно (4 рази), щоб надати шрифту літературної ваги, подібно до цитати в макеті журналу. Функціонує як системний акцент, а чи не як паралельна ієрархія.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | середня |
| Базовий крок | 8px |
| Радіус кнопок | 8px |
| Радіус карток | 12px |
| Тіні | ні — межі замість тіней |
| Між секціями | 80px |
| Ширина сторінки | 1440px |
ІІ збере ваш сайт у стилі Notion і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- ElevenLabs — Фоторепортаж у теплих кремових тонах із ненав'язливими заголовками. Блокнот у стилі Баухаус — папір кольору яєчної шкаралупи, чорне чорнило, один фіолетовий та помаранчевий акцент для демонстрації продукту.
- Awesomic — Редакційна цинкова сітка з помаранчевими розділовими знаками, що нагадують конфетті
- Monad — редакційний технічний журнал на теплому пергаменті
- Dub — матова панель управління Link на рисовому папері
- Seline Analytics — Тихий аналітичний стіл на теплий папір
- Anthropic — Науковий польовий журнал на теплому пергаменті — спокійні поверхні кольору слонової кістки, редакційні заголовки із засічками та єдиний глиняний акцент, що з'являється лише тоді, коли потрібно діяти
- Calendly — Темно-синє чорнило на холодному мармурі
- Augen Pro — Презентація Apple на білому тлі — клінічний, невагомий, електричний синій як єдиний акцент у монохромному просторі
- Antimetal — Редакційна хроніка на кремовому папері – тихий ранок у науковому журналі, де стриманість свідчить про впевненість, а засічки виконують основну роботу.
- Perk — Електричний лайм на теплому пергаментному папері
- Ditto — Залита сонцем майстерня зі створення зразків польових кольорів. Теплі кремові поверхні, яскравий жовтий основний колір, глибокі темно-сині чорнила, органічні колірні форми, що розквітають за виробом
- Officevibe — Редакційний журнал на папір теплого кремового кольору. Уявіть собі вдумливе есе з управління персоналом, оформлене у вигляді продукту — курсивний шрифт із засічками, що ніби шепоче крізь сучасний синій інтерфейс.