Дизайн-система, вдохновлённая 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 на крупных размерах использует кернинг -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. Глубина и высота

Философия теней: Система теней Notion использует несколько слоёв с чрезвычайно низкой индивидуальной прозрачностью (от 0,01 до 0,05), которые накапливаются в мягкое, естественно выглядящее поднятие. 4-слойная тень карточки охватывает от 1,04px до 18px размытия, создавая градиент глубины, а не одну жёсткую тень. 5-слойная глубокая тень распространяется до 52px размытия при прозрачности 0,05, создавая окружающую окклюзию, напоминающую естественный свет, а не компьютерно генерированную глубину. Этот многослойный подход заставляет элементы казаться вписанными в страницу, а не парящими над ней.

Декоративная глубина

• Секция hero: декоративные иллюстрации персонажей (игривый, нарисованный от руки стиль)
• Чередование секций: смена фона с белого на тёплый белый (#f6f5f4)
• Нет жёстких границ секций — разделение достигается за счёт изменения цвета фона и отступов

7. Адаптивное поведение

Контрольные точки

Цели касания

• Кнопки используют комфортные отступы (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 и ссылок