Notion

Теплый бумажный блокнот под полуденным солнцем

Интерфейс Notion выглядит как любимый бумажный блокнот при свете дня: тёплый кремовый холст (#f6f5f4), который ощущается скорее тактильным, чем стерильным, щедрая типография без засечек, придающая редакционный вес тексту о продукте, и цвет, используемый в качестве редкой пунктуации — персиковые «пилюли» выделяют глаголы, один синий цвет служит якорем для основного действия, а меняющийся набор акцентных оттенков (коралловый, янтарный, небесный, полуночный) раскрашивает фон карточек, словно стикеры. Карточки располагаются на холсте с тонкими рамками и углами — без теней, без хрома — как разлинованные секции в блокноте Moleskine. Анимация игривая и пружинистая, с плавными переходами с задержкой в 200 мс и упругими анимациями символов, которые делают интерфейс живым, не будучи при этом декоративным.

Центрированная, максимальная ширина ограничена примерно 1440px. Главный элемент представляет собой центрированную стопку: строка с символами → большой заголовок в две строки со встроенной цветной таблеткой → подзаголовок → строка с двумя кнопками призыва к действию → большой макет пользовательского интерфейса продукта. Под главным элементом секции чередуются между сетками из белых карточек и полноцветными акцентными панелями. Стена с логотипами представляет собой центрированную однорядную сетку из логотипов партнеров в оттенках серого. Блоки с функциями используют двухколоночную компоновку (текст слева, цветная панель справа), которая чередуется слева направо между секциями. Раздел «Задайте вопрос своим ассистентам по запросу» использует сетку из карточек 2×2, где верхняя карточка занимает всю ширину, а нижняя строка разделяется на две равные колонки. Промежутки между секциями достаточно большие (~80px), создавая спокойный вертикальный ритм. Навигация представляет собой фиксированную верхнюю панель высотой 64px с центрированными элементами навигации и выровненными по правому краю кнопками действий.

Иллюстрации превыше всего, без фотографий. Визуальный язык построен на плоских иллюстрированных символах (круглые грани в цветных кругах 2px), абстрактных декоративных элементах (нарисованные от руки закорючки, блестки, стрелки, формы цветов) и макетах пользовательского интерфейса продукта. Символы отображаются в главном окне в виде горизонтального ряда из 7 аватаров и разбросаны по странице в качестве игривых знаков препинания. Скриншоты продукта — единственные «реальные» визуальные элементы: они показывают реальный интерфейс Notion (канбан-доски, представления документов, панели ИИ-агентов) с полным набором элементов и реальными данными. Макет продукта в главном окне большой, центрированный и отбрасывает единственную тень, отделяющую его от холста. Здесь нет фотографий в стиле лайфстайл, нет стоковых изображений, нет абстрактных 3D-рендеров.

Чистый SaaS Минимализм Редакционный

https://notion.so

Палитра

Бренд

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-оптимизация под поисковую выдачу и рекомендации нейросетей.

Создать сайт в этом стиле

Notion

Палитра

Типографика

Интервалы и форма

ИИ соберёт ваш сайт в стиле Notion и наполнит его

Похожие стили