Атлас
Приём оформления

Неоморфизм

Neumorphism

Мягкий пластик: элементы выдавлены из фона того же цвета двумя тенями — светлой и тёмной, а нажатые вдавлены внутрь.

Способ отрисовки поверхностей и элементов. Обычно накладывается на основное направление, а не заменяет его. Направления, приёмы оформления и способы компоновки — разные уровни решений, и их можно сочетать: например, Bento-компоновка в минималистичном стиле или стеклянные панели в технологичном интерфейсе.

Использовать Все направления
Сайт Приложение Веб-платформа
Учебная демонстрация
Демонстрация, а не реальный проект: сайт в стиле «Неоморфизм». Тексты и данные вымышлены и показывают структуру, типографику и характер элементов.

О стиле

Неоморфизм (Soft UI) — приём оформления поверхностей, при котором кнопки, карточки и переключатели сделаны из того же материала, что и фон. Объём создают только две мягкие тени: светлая сверху слева (свет падает из угла) и тёмная снизу справа. Выпуклый элемент кажется выдавленным из поверхности, нажатый или активный — вдавленным внутрь (те же тени, но внутренние). Палитра почти монохромная: светлый серо-голубой, тёплый бежевый или графитовый фон.

Как приём неоморфизм накладывается на основное направление: чаще всего на минимализм (мало элементов, спокойная типографика), на технологичное оформление (тёмные панели умных устройств, пульты, плееры) и на премиальное (мягкий материал и тактильность). Он хорошо работает для отдельных объектов — регуляторов, плееров, панелей управления устройствами, калькуляторов, — но редко подходит для целого продукта с формами и таблицами.

У неоморфизма серьёзные проблемы доступности: границы элементов почти не видны, кнопку трудно отличить от карточки, а нажатое состояние — от обычного, особенно на плохих экранах и у людей со сниженным зрением. Поэтому рабочий неоморфизм всегда компенсирует это: усиленные тени, акцентный цвет для активных состояний и главного действия, подписи вместо одних иконок, тонкая обводка у полей ввода, тёмный текст с нормальным контрастом и заметное кольцо фокуса.

Основные признаки

  • Элементы и фон одного цвета; объём создают две мягкие тени — светлая сверху слева и тёмная снизу справа.
  • Вдавленные состояния: нажатые кнопки, активные пункты, поля ввода и треки ползунков оформлены внутренними тенями.
  • Монохромная мягкая палитра — светлый серо-голубой, тёплый бежевый или графит — и один акцент для активного и главного.
  • Крупные скругления 12–32 px, круглые кнопки и регуляторы, ощущение мягкого пластика.
  • Минимум элементов на экране и щедрые отступы: тени требуют пространства вокруг.
  • Физические метафоры: ручки, тумблеры, ползунки, кнопки-клавиши, циферблаты.
  • Отсутствие обводок и цветных заливок у большинства поверхностей.

Композиция и визуальная иерархия

Композиция

  • Крупные самостоятельные объекты на однородном фоне: панель, циферблат, плеер, карточка устройства.
  • Между выпуклыми элементами — не меньше 20–32 px, иначе тени слипаются и объём пропадает.
  • Группы элементов объединяются в одну выпуклую панель или вдавленный желоб (сегментный переключатель, трек).
  • Симметричные и центрированные композиции подходят лучше всего — как у физического устройства.
  • Неоморфизм ограничивают управляющими элементами и сводками; плотные списки и таблицы — на плоских поверхностях.

Визуальная иерархия

  • Высота рельефа = важность: главный объект выдавлен сильнее (тени дальше и шире), второстепенные — плоско.
  • Активное и выбранное — вдавлено и окрашено акцентом; одной формы тени для различения недостаточно.
  • Главное действие — единственный элемент с акцентной заливкой или акцентным текстом и значком.
  • Типографика контрастная по размеру и весу: крупные цифры и заголовки компенсируют малую разницу цвета.
  • Подписи и значения — тёмным текстом, а не светло-серым «в тон» фону.

Цвета и примеры палитр

  • Фон — средне-светлый, не белый: от чистого белого светлая тень не видна. Подходит светлота 88–93% для светлой темы.
  • Светлая тень — на 6–10% светлее фона (часто белый), тёмная — на 15–25% темнее фона того же оттенка.
  • Текст не берётся «в тон»: основной — тёмный с контрастом от 7:1, вторичный — не ниже 4.5:1 к фону.
  • Один акцентный цвет для активного состояния, главного действия и фокуса — он компенсирует слабую видимость рельефа.
  • В тёмной версии фон — графит 15–20% светлоты, светлая тень лишь на 4–6% светлее фона, тёмная — почти чёрная.

Палитры — примеры, а не обязательный набор. Нажмите на цвет, чтобы скопировать HEX-код.

Холодный серый

Классический неоморфизм для плееров, умных устройств и панелей управления.

Тёплый песок

Мягкая тактильная гамма для дома, ухода, кухонной техники.

Тёмный графит

Ночной вариант для аудио, авто и умного дома; рельеф слабее, акцент ярче.

Типографика

  • Мягкие гротески с округлыми формами поддерживают ощущение пластика; шрифт может задавать и основное направление.
  • Иерархию строят размером и весом: крупные цифры 32–64 px, подписи 13–15 px весом 500.
  • Текст всегда контрастный к фону — никакого «тиснения» текста тенями и серого текста в тон поверхности.
  • Основной текст 15–17 px, межстрочный интервал 1.45–1.6; прописные — только для коротких меток.

Все шрифты в примерах поддерживают кириллицу.

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    M PLUS Rounded 1c
    Текст
    M PLUS Rounded 1c

    Скруглённые окончания штрихов повторяют мягкие формы кнопок и регуляторов.

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Comfortaa
    Текст
    Nunito

    Округлый Comfortaa для крупных заголовков и цифр, хорошо читаемый Nunito для интерфейса.

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Rubik
    Текст
    Rubik

    Слегка скруглённый гротеск с плотными весами — держит контраст даже на мягком фоне.

Кнопки, поля, карточки и навигация

Кнопки

Кнопки выдавлены двумя тенями; в нажатом и активном состоянии — вдавлены и окрашены акцентом. Главная кнопка дополнительно выделена акцентным текстом и значком или акцентной заливкой.

Поля ввода

Поля вдавлены внутренними тенями и обязательно имеют тонкую обводку 1 px, видимую подпись над полем и заметный акцентный фокус.

Карточки

Карточки — мягкие выпуклые панели со скруглением 20–32 px; внутри — вдавленные индикаторы, ползунки и переключатели.

Навигация

Навигация — выпуклая панель или вдавленный желоб; активный пункт вдавлен и отмечен акцентным цветом текста или значка, у всех пунктов есть подписи.

Рекомендации по применению

Где подходит

  • Управление умными устройствами: термостаты, освещение, колонки, бытовая техника.
  • Аудио- и медиаплееры, калькуляторы, таймеры, трекеры с одним-двумя крупными показателями.
  • Концепты, промостраницы и отдельные виджеты внутри продукта в другом стиле.
  • Панели управления с небольшим числом крупных регуляторов.

Как применять

  • Используйте неоморфизм для управляющих элементов и сводок, а списки, таблицы и формы делайте плоскими с обычными границами.
  • Задайте 2–3 уровня рельефа (плоский, выпуклый, вдавленный) и токены теней для каждого — не подбирайте тени вручную.
  • Проверьте экран в оттенках серого и при пониженной яркости: интерактивные элементы должны находиться без теней — по подписи, значку, обводке или акценту.
  • Добавьте акцентный цвет хотя бы для трёх вещей: главное действие, активное состояние и фокус.

Ограничения и типичные ошибки

Ограничения

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

Типичные ошибки

  • Белый фон — светлая тень не видна, и пропадает половина объёма.
  • Светло-серый текст «в тон» фону с контрастом 2–3:1.
  • Выбранное состояние показано только сменой тени с внешней на внутреннюю, без цвета и значка.
  • Поля ввода без обводки и подписи — неясно, куда вводить.
  • Тени слишком сильные и тёмные (почти чёрные) — пластик превращается в грязную объёмную графику.
  • Неоморфизм на каждом элементе плотного списка или таблицы — тени слипаются, экран рябит.

Сочетания с другими направлениями

Направления, приёмы оформления и способы компоновки — разные уровни решений, и их можно сочетать: например, Bento-компоновка в минималистичном стиле или стеклянные панели в технологичном интерфейсе.

  • Минимализм

    Самое естественное основание: мало элементов, спокойная типографика и много воздуха, в котором тени успевают раскрыться.

    Направление

  • Технологичное оформление

    Тёмный графитовый неоморфизм с неоновым акцентом — панели умных устройств, аудиотехника, автомобильные интерфейсы.

    Направление

  • Скевоморфизм

    Родственный приём: неоморфизм — упрощённый скевоморфизм без текстур; вместе дают тактильные ручки и тумблеры с мягким материалом.

    Направление

  • Плоский дизайн

    Плоские иконки, списки и формы внутри неоморфных панелей снимают проблемы читаемости и плотности.

    Направление

Применить стиль «Неоморфизм»

Получите промпт для ИИ-разработчика: выберите тип продукта — и инструкция будет собрана с учётом стиля и особенностей сайта, приложения или веб-платформы.

Использовать