Цветовая палитра в духе Notion
Палитра в духе Notion - тёплая, «бумажная» нейтральная система: слегка кремовый фон, тёплый почти чёрный текст и один синий акцент, используемый экономно для ссылок и интерактивных элементов.
Посмотрите, как палитра в духе Notion выглядит в реальном, живом интерфейсе ниже - не на плоском свотче. Переключитесь на «Ваша палитра», чтобы увидеть свои цвета в том же интерфейсе.
Как выглядит палитра в духе Notion?
Инструменты для заметок и документов почти полностью избегают насыщенного цвета, потому что интерфейс должен раствориться за тем, что человек на самом деле пишет. Итог - обычно тёплый, слегка кремовый фон (а не клинически белый), тёплый почти чёрный для текста вместо резкого чистого чёрного и один сдержанный акцентный цвет, зарезервированный для ссылок, иконок и мелких интерактивных штрихов.
Этот мокап - тонкая боковая панель рядом с документом с чек-листом - заимствует это тихое, «бумажное» ощущение, чтобы показать, как палитра работает в инструменте, ориентированном на контент, где сам текст - главное, а не окружающий его интерфейс. Это оригинальный макет в этом духе, а не копия реальной дизайн-системы какого-либо конкретного продукта.
Ключевые визуальные характеристики
- Тёплый, слегка кремовый фон вместо резкого белого
- Тонкая боковая панель с иконками и текстом для навигации по страницам
- Простые чекбоксы и элементы списка-переключателя в виде обычных текстовых строк, а не тяжёлых карточек
- Минимум границ - области контента разделены в основном пустым пространством
- Один акцентный цвет, зарезервированный для ссылок, иконок и мелких интерактивных состояний
Цветовые характеристики
- Тёплая, «бумажная» почти белая база вместо клинически белого
- Тёплый почти чёрный текст для максимальной читаемости без резкости
- Один синий (или столь же спокойный) акцентный цвет, используемый экономно - не полноценная брендовая палитра
Типографика
- Простой, легко читаемый системный гротеск для основного текста, читаемость важнее индивидуальности
- Чёткая иерархия размеров заголовков (H1/H2/H3), так как интерфейс - по сути редактор документов
- Просторный межстрочный интервал для долгого чтения и письма
UI-паттерны
- Тонкая левая боковая панель со списком страниц, часто с маленькими иконками у каждого пункта
- Одноколоночный вид документа как основная область контента
- Инлайн-элементы чек-листа и списка-переключателя в виде обычных строк, а не карточек в рамках
- Простая верхняя панель с хлебными крошками вместо тяжёлого меню навигации
Частые вопросы
Какие цвета обычно используются в интерфейсе в духе Notion?
Тёплый кремовый фон, тёплый почти чёрный текст и один сдержанный акцентный цвет - часто синий - используемый только для ссылок и мелких интерактивных элементов, чтобы фокус оставался на самом контенте.
Это официальные цвета бренда Notion?
Нет - это оригинальный макет, вдохновлённый общим видом инструментов для заметок и документов вроде Notion, а не копия его официальной цветовой палитры или защищённого товарным знаком дизайна.
Почему инструменты-редакторы документов используют так мало цвета?
Насыщенный цвет конкурирует с контентом, который человек реально читает или пишет, поэтому такие инструменты обычно держат палитру почти нейтральной и оставляют цвет для нескольких мелких интерактивных штрихов вроде ссылок и иконок.
Можно ли посмотреть свои цвета в этом интерфейсе в духе Notion, а не только палитру по умолчанию?
Да - переключите тумблер «Ваша палитра» над предпросмотром, чтобы увидеть свои текущие цвета в живом интерфейсе в духе Notion вместо цветов по умолчанию.