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

Клеймоморфизм

Claymorphism

Приём «пластилина»: пухлые пастельные элементы с крупными скруглениями и двойными внутренними тенями парят над фоном.

Использовать Все направления
Сайт Приложение Веб-платформа
Учебная демонстрация

Суть

Клеймоморфизм — приём оформления поверхностей, при котором кнопки, карточки и иконки выглядят как вылепленные из мягкого цветного пластилина или глины. Каждый элемент получает пастельную заливку, очень крупное скругление (24–40 px и больше), две внутренние тени — светлую сверху и тёмную снизу, создающие объём «подушки», — и мягкую рассеянную внешнюю тень, из-за которой элемент будто парит над фоном. Дополняют приём 3D-подобные иконки и фигурки: шары, кольца, капсулы, монетки, персонажи с бликом и собственной тенью.

Подробнее

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

Приём накладывается на основное направление. С игривым он даёт тактильные детские и семейные продукты, с минимализмом — спокойный интерфейс с одним-двумя объёмными акцентами, с Bento — плитку пухлых разноцветных карточек, с плоским стилем — интерфейс, где плоские иллюстрации заменены на мягкие 3D-фигурки. Типографику, сетку и тон текста задаёт основное направление; клеймоморфизм отвечает за материал и объём.

Признаки

  • Очень крупные скругления: карточки 28–40 px, кнопки и чипы — полностью округлые (пилюли).
  • Двойная внутренняя тень: светлая сверху и тёмная снизу создают выпуклость «подушки».
  • Мягкая крупная внешняя тень, смещённая вниз и окрашенная в оттенок фона, — элемент парит над поверхностью.
  • Пастельные, но насыщенные заливки: каждый тип карточки или раздела получает свой цвет.
  • 3D-подобные иконки и фигурки: шары, кольца, капсулы, кубики с бликом и собственной тенью.
  • Плотный непрозрачный материал без размытия и стекла.
  • Утопленные элементы (треки прогресса, поля, переключатели) — с инвертированной внутренней тенью.
  • Жирная округлая типографика, которая выглядит такой же «мягкой», как поверхности.

Композиция

Композиция

  • Элементы располагаются отдельными «островками» с промежутками 16–28 px: каждой выпуклой форме нужно место для тени.
  • Объёмные фигурки и иллюстрации работают как центр композиции первого экрана или крупной карточки.
  • Ряды и сетки из разноцветных карточек одинаковой высоты; цвет помогает различать группы.
Ещё 2
  • Навигация и панели — тоже «вылепленные» плашки, отделённые от краёв экрана, а не прилипшие к ним.
  • Фон спокойный и светлый, с 1–2 очень мягкими цветными пятнами, чтобы объёмы читались.

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

  • Главное действие — самый насыщенный и самый «высокий» элемент: тёмная или яркая заливка и наибольшая тень.
  • Ключевые числа и заголовки — жирный округлый шрифт 700–800 крупным кеглем.
  • Второстепенные элементы — белые или светлые пастельные плашки с меньшей тенью.
Ещё 2
  • Неактивные и утопленные элементы — без внешней тени, с внутренней тенью «вдавливания».
  • Цвет карточки обозначает категорию, а не важность: важность задаётся размером, тенью и контрастом.

Цвета

Примеры палитр · нажмите на цвет, чтобы скопировать

Лавандовый пластилин

Тёплая глина

Небесная лепка

Принципы работы с цветом
  • Фон — светлый слегка окрашенный (лавандовый, кремовый, голубой), не чистый белый: на нём лучше видны белые блики.
  • Карточки — 4–6 пастельных оттенков одинаковой светлоты (L 85–92%), по одному на категорию.
  • Акцент для главного действия — насыщенный и достаточно тёмный, чтобы белый текст на нём давал контраст не ниже 4.5:1.
  • Тени окрашены: тёмная внутренняя и внешняя — в тёмный оттенок фона (фиолетовый, коричневый, синий), а не в серый.
  • Текст на пастели — очень тёмный оттенок той же гаммы; серый средней светлоты на пастели почти всегда не проходит по контрасту.

Шрифты

С поддержкой кириллицы

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

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

    Заголовки
    Montserrat Alternates
    Текст
    Mulish

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

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

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

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

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

    Заголовки
    Rubik
    Текст
    Rubik
Принципы типографики
  • Заголовки — жирный геометрический или округлый гротеск 700–800: мягкие формы букв продолжают материал.
  • Основной текст — спокойный гротеск 400–600, 15–17 px, межстрочный интервал 1.45–1.6.
  • Крупные числа (суммы, счётчики) — самые заметные элементы, 28–40 px, вес 800.
  • Не используйте тонкие начертания 100–300: на объёмных плашках они теряются и выглядят чужеродно.

Компоненты

Кнопки

Кнопки-пилюли высотой 48–58 px с насыщенной заливкой, светлой внутренней тенью сверху, тёмной снизу и окрашенной внешней тенью. Вторичные — белые плашки той же формы с меньшей тенью; при нажатии кнопка «вдавливается».

Поля ввода

Поля — утопленные лунки: светлая заливка, внутренняя тень сверху, скругление 18–24 px, видимая подпись над полем. В фокусе поле получает цветную обводку 2 px поверх объёма.

Карточки

Карточки — пастельные «подушки» со скруглением 28–40 px, двойной внутренней тенью и мягкой тенью вниз. Внутри — 3D-иконка или фигурка, жирный заголовок и одно ключевое число.

Навигация

Навигация — отдельная выпуклая плашка, отступающая от краёв: в шапке сайта — пилюля, в приложении — парящая нижняя панель с выпуклой центральной кнопкой, в платформе — панель-островок. Активный пункт — цветная выпуклая пилюля.

Применение

Где подходит

  • Семейные финансы, копилки, детские и образовательные сервисы.
  • Приложения для привычек, здоровья, питания и ухода за домашними животными.
  • Промостраницы и онбординг, где нужно дружелюбие и ощущение «можно потрогать».
Ещё 1
  • Игровые и геймифицированные элементы внутри более строгих продуктов.

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

  • Соберите тени в 3 токена (маленькая, средняя, большая) и используйте только их — так объём будет единым.
  • Сделайте набор из 6–10 3D-фигурок в одном освещении: свет всегда сверху-слева, блик и тень в одних местах.
  • Проверьте экран в оттенках серого: если карточки сливаются, увеличьте разницу светлоты фона и поверхности.
Ещё 2
  • Оставляйте вокруг выпуклых элементов не меньше 16 px — иначе тени слипаются в грязь.
  • Для плотных экранов (таблицы, списки) применяйте объём к контейнерам и ключевым элементам, а строки оставляйте плоскими.

Ограничения

Ограничения

  • Плохо масштабируется на плотные интерфейсы: таблицы и длинные списки из «подушек» занимают много места и рябят.
  • Множество составных теней нагружает отрисовку на слабых устройствах, особенно при анимации.
  • Детский, игрушечный характер не подходит для серьёзных юридических, медицинских и B2B-сценариев без смягчения.
Ещё 1
  • Пастельные заливки сужают выбор цвета текста: часть фирменных цветов придётся затемнять.

Ошибки

  • Делать элементы цвета фона — это уже неоморфизм, а не клеймоморфизм.
  • Серые тени вместо окрашенных: материал выглядит грязным, а не мягким.
  • Разное направление света у фигурок и карточек: блики слева, а тени справа.
Ещё 3
  • Мелкие скругления 4–8 px с объёмными тенями — элемент выглядит как раздутый прямоугольник.
  • Светло-серый текст на пастельной карточке с контрастом ниже 4.5:1.
  • Объём у каждого мелкого элемента, включая строки таблиц и подписи: интерфейс превращается в кашу.

Сочетания

Подходы разного уровня — их можно сочетать.

  • Игривый дизайн

    Игривое направление задаёт тон, иллюстрации и шрифты, клеймоморфизм превращает кнопки, карточки и персонажей в мягкие объёмные фигурки — классика детских и семейных продуктов.

    Направление

  • Bento-компоновка

    Bento-компоновка даёт плитку разноразмерных ячеек, а приём делает каждую ячейку пухлой пастельной «подушкой» своего цвета с 3D-иконкой.

    Компоновка

  • Минимализм

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

    Направление

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

    Плоское направление сохраняет простую сетку и яркие цвета, а плоские иконки и иллюстрации заменяются мягкими 3D-фигурками из «пластилина».

    Направление

Применить стиль

Промпт для ИИ под ваш тип продукта.

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