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

Брутализм

Brutalism

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

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

Суть

Веб-брутализм вырос из протеста против гладких шаблонных сайтов. Как бетон в архитектуре брутализма, интерфейс показывает свою «конструкцию»: голую структуру HTML, системные и моноширинные шрифты, стандартные синие ссылки, таблицы с рамками, резкие контрасты и прямые углы.

Подробнее

Стиль намеренно отказывается от полировки: нет теней, скруглений, плавных переходов и декоративных иллюстраций. Выразительность создают размер и плотность текста, толстые чёрные рамки, инверсия цвета, служебные знаки ([ ], >, #, ===) и ощущение документа или терминала, а не маркетинговой страницы.

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

Признаки

  • Моноширинный или системный шрифт во всём интерфейсе, включая крупные заголовки.
  • Жёсткие чёрные рамки 2–4 px вокруг блоков, таблиц, кнопок и полей; углы строго прямые.
  • Видимая «конструкция»: таблицы с рамками, номера строк, пути, метки файлов, служебные знаки [ ], >, #.
  • Стандартные синие подчёркнутые ссылки и почти «браузерные» элементы управления.
  • Резкий контраст: чёрное на белом, инверсия блоков, один кричащий сигнальный цвет.
  • Отсутствие теней, градиентов, скруглений, иллюстраций и плавных анимаций.
  • Плотная вёрстка с минимальными отступами и крупными, иногда огромными, словами прописными.
  • Нарочито «неотполированные» детали: ASCII-разделители, отметки времени, счётчики и технические подписи.

Композиция

Композиция

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

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

  • Первый уровень — огромные слова прописными (64–160 px) моноширинным шрифтом, вес 700–800.
  • Второй уровень — инвертированные полосы-заголовки: белый текст на чёрной заливке.
  • Третий уровень — основной текст 14–16 px моноширинным шрифтом с интервалом 1.4–1.5.
Ещё 2
  • Служебный слой — пути, даты, номера, размеры файлов в квадратных скобках.
  • Сигнальный цвет — подсветка одного важного элемента, ошибки или главного действия.

Цвета

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

Сырой HTML

Бетон

Терминал

Принципы работы с цветом
  • Основа — чистые чёрный и белый (или сырой серый «бетон») с максимальным контрастом.
  • Ссылки — классический синий #0000EE с подчёркиванием, посещённые — фиолетовый.
  • Один кричащий сигнальный цвет (жёлтый маркер, красно-оранжевый, кислотно-зелёный) используется точечно как заливка.
  • Никаких полутонов ради мягкости: серый — только для служебного текста и с контрастом не ниже 4.5:1.

Шрифты

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

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

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

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

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

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

    Заголовки
    IBM Plex Mono
    Текст
    IBM Plex Sans

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

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

    Заголовки
    Rubik Mono One
    Текст
    Roboto Mono
Принципы типографики
  • Моноширинный шрифт (или системный стек) на всё: заголовки, текст, кнопки, таблицы.
  • Резкий скачок размеров: огромные слова прописными рядом с мелким служебным текстом, без плавной шкалы.
  • Прописные, подчёркивания и инверсия вместо курсива и цветовых нюансов.
  • Основной текст 14–16 px, межстрочный интервал 1.4–1.5, служебные знаки и квадратные скобки как часть набора.

Компоненты

Кнопки

Прямоугольник с рамкой 2–3 px, текст прописными моноширинным шрифтом, часто в квадратных скобках: [ ОТПРАВИТЬ ]. Главная кнопка — инвертированная чёрная или сигнальная заливка.

Поля ввода

Поле с чёрной рамкой 2 px и белым фоном, подпись над полем в формате «имя_поля:» моноширинным шрифтом, без скруглений и теней.

Карточки

Ячейка с рамкой 2 px, заголовочная полоса с инверсией и служебными метками (номер, дата, размер), содержание плотное.

Навигация

Строка подчёркнутых синих ссылок или ряд ячеек с рамками; активный пункт инвертирован или помечен «>».

Применение

Где подходит

  • Независимые студии, музыкальные лейблы, галереи, зины и арт-проекты.
  • Инструменты разработчика, технические документы, архивы и каталоги.
  • Манифесты, личные сайты и проекты, которым нужно выделиться и показать характер.
Ещё 1
  • Внутренние сервисы, где честная функциональность важнее упаковки.

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

  • Начинайте с семантической разметки без стилей — брутализм должен сохранять её логику.
  • Выберите одну толщину рамки (2 или 3 px) и используйте её везде.
  • Добавьте один кричащий сигнальный цвет и не используйте больше.
Ещё 2
  • Используйте служебные детали (пути, номера, даты) как декор, но только если они правдивы.
  • Проверяйте, что «грубость» не мешает выполнять задачи: кнопки и ссылки должны быть очевидны.

Ограничения

Ограничения

  • Не подходит продуктам, где важно доверие и спокойствие: финансы, медицина, детские сервисы.
  • Моноширинный текст хуже читается в длинных абзацах, чем пропорциональный.
  • Легко скатиться в небрежность, которая выглядит как ошибка вёрстки, а не как стиль.
Ещё 1
  • Огромные слова и плотная вёрстка сложно адаптируются к узким экранам.

Ошибки

  • Добавлять скругления, мягкие тени и градиенты — стиль превращается в обычный интерфейс или необрутализм.
  • Использовать много ярких цветов и пастельные заливки вместо одного сигнального.
  • Делать «грязно» без системы: разные толщины рамок, случайные отступы и шрифты.
Ещё 3
  • Ломать удобство: прятать кнопки, отключать фокус, делать нечитаемые контрасты ради эпатажа.
  • Ставить декоративные иллюстрации и 3D-объекты, которые противоречат сырой эстетике.
  • Набирать длинные статьи мелким моноширинным шрифтом без ограничения длины строки.

Сочетания

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

  • Швейцарский стиль

    Швейцарская сетка дисциплинирует брутализм: те же огромные слова и контраст, но с выверенными колонками.

    Направление

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

    Технологичный стиль разделяет моноширинный шрифт и терминальную эстетику; брутализм делает её грубее и честнее.

    Направление

  • Ретро

    Ретро-приёмы раннего веба (системные окна, синие ссылки, пиксельные элементы) усиливают «сырость» брутализма.

    Направление

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

    Bento — способ компоновки: модульные плитки с рамками 2–3 px и без скруглений превращаются в брутальную таблицу-витрину.

    Компоновка

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

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

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