Атлас
Визуальное направление

Необрутализм

Neo-Brutalism

Толстые чёрные обводки, жёсткие смещённые тени без размытия, яркие плоские заливки, крупный гротеск и наклейки.

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

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

О стиле

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

Главный узнаваемый приём — сочетание чёрной обводки 2–4 px и смещённой тени того же чёрного цвета без размытия. Элементы выглядят как вырезанные из цветной бумаги и наклеенные на страницу; при нажатии кнопка «вдавливается», съезжая на место своей тени.

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

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

  • Чёрная обводка 2–4 px у всех значимых элементов: кнопок, карточек, полей, изображений.
  • Смещённая тень без размытия (например, 4–8 px вправо и вниз) того же цвета, что и обводка.
  • Яркие плоские заливки — жёлтый, розовый, лаймовый, голубой, оранжевый — без градиентов.
  • Крупный жирный гротеск в заголовках, часто на цветной подложке-«плашке».
  • Наклейки, звёзды-бейджи, слегка повёрнутые на 2–8° элементы и бегущие строки.
  • Небольшие или нулевые скругления, одинаковые во всём интерфейсе.
  • Видимая конструкция: блоки не прячут свои границы, сетка читается.
  • Тактильное нажатие: элемент сдвигается на место тени, тень исчезает.

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

Композиция

  • Крупные блоки с явными границами, собранные в сетку, где каждый модуль — отдельная «карточка из бумаги».
  • Асимметрия и лёгкие повороты отдельных элементов (наклейки, бейджи) поверх строгой сетки.
  • Полосы-разделители во всю ширину: бегущая строка, цветная лента, чёрная полоса с текстом.
  • Между блоками заметные промежутки 16–32 px, чтобы тени не слипались с соседями.
  • Плотность средняя: элементы крупные, но экран заполнен, пустоты оформляются цветом.

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

  • Главный заголовок — жирный широкий гротеск 800–900, в 3–5 раз крупнее основного текста.
  • Ключевое слово заголовка выделяется цветной плашкой с обводкой, а не только цветом текста.
  • Главное действие — самая яркая кнопка с самой большой тенью на экране.
  • Второстепенное — белые карточки с обводкой и меньшей тенью; третичное — текст без рамок.
  • Наклейки и бейджи привлекают внимание к одному-двум фактам, а не к каждому блоку.

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

  • Чёрный (#111111 или близкий) — основа: им рисуются обводки, тени и текст.
  • Фон — светлый тёплый или пастельный, чтобы яркие блоки и чёрные линии читались.
  • 3–4 ярких плоских цвета для заливок блоков; у каждого цвета — постоянная роль (действие, предупреждение, категория).
  • Без градиентов и полупрозрачности: цвет либо есть, либо его нет.
  • Текст на ярких заливках — чёрный: большинство насыщенных светлых цветов дают с ним контраст выше 7:1.

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

Лимонный поп

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

Сиреневая жвачка

Пастельный фон и кислотные акценты для творческих и образовательных сервисов.

Ночной стикер

Тёмный вариант: светлые обводки и тени, неоново-яркие заливки.

Типографика

  • Заголовки — жирный или сверхжирный гротеск (700–900), часто широкий или округлый.
  • Основной текст — простой читаемый гротеск 400–500, 16–18 px, межстрочный 1.5.
  • Разница размеров резкая: коэффициент шкалы 1.414–1.5, крупные заголовки с плотным интервалом 1.0–1.1.
  • Прописные буквы уместны в бейджах, кнопках и бегущих строках с разрядкой +0.02…+0.06 em.

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

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

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

    Заголовки
    Unbounded
    Текст
    Golos Text

    Широкий сверхжирный Unbounded даёт плакатный заголовок, Golos Text сохраняет читаемость текста.

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

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

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

    Округлый Rubik в начертании 800–900 выглядит дружелюбно и мягко поддерживает толстые обводки.

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

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

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

    Моноширинный акцидентный Rubik Mono One годится для коротких заголовков и наклеек, Onest — для всего остального текста.

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

Кнопки

Прямоугольник с чёрной обводкой 2–3 px, яркой заливкой и смещённой чёрной тенью 4 px; при наведении тень растёт, при нажатии кнопка сдвигается на место тени. Текст жирный, часто прописной.

Поля ввода

Белое поле с чёрной обводкой 2–3 px и небольшой тенью; подпись жирная над полем. Фокус — цветная заливка-подсветка или увеличенная тень плюс яркое кольцо.

Карточки

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

Навигация

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

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

Где подходит

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

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

  • Зафиксируйте два токена — толщину обводки и смещение тени — и не отступайте от них ни в одном компоненте.
  • Назначьте каждому яркому цвету роль: например, жёлтый — действие, розовый — новинка, голубой — информация.
  • Наклейки и повороты — специи: 1–3 на экран, иначе внимание рассыпается.
  • Проверьте экран в оттенках серого: благодаря обводкам и теням структура должна читаться и без цвета.
  • Оставляйте между блоками место под тень — 16 px и больше.

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

Ограничения

  • Громкий характер плохо подходит для банков, медицины, юридических и траурных тем.
  • Плотные таблицы и сложные отчёты с толстыми рамками у каждой ячейки становятся тяжёлыми.
  • Яркие цвета быстро утомляют при долгой работе, если не дозировать их.
  • Стиль стал популярным, и без собственного характера легко выглядит шаблонно.

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

  • Размытые мягкие тени вместо жёстких — стиль сразу теряется.
  • Разные толщины обводок и разные смещения теней в соседних компонентах.
  • Белый текст на жёлтой, лаймовой или голубой заливке с плохим контрастом.
  • Повороты, наклейки и бегущие строки на каждом блоке — экран превращается в шум.
  • Градиенты и полупрозрачность, которые спорят с плоскими заливками.
  • Тени, налезающие на соседние элементы из-за слишком маленьких промежутков.

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

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

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

    Игривые формы и иллюстрации усиливают дружелюбие; обводки и жёсткие тени остаются главным признаком.

    Направление

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

    Bento-плитка из разноцветных карточек с обводками — частая компоновка для обзоров возможностей.

    Компоновка

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

    Плоские иконки и иллюстрации хорошо ложатся на плоские заливки, если обвести их той же чёрной линией.

    Направление

  • Ретро

    Ретро-шрифты и тёплые цвета дают необрутализму винтажный оттенок «журнальной вырезки».

    Направление

Применить стиль «Необрутализм»

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

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