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

Киберпанк

Cyberpunk

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

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

Суть

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

Подробнее

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

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

Признаки

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

Композиция

Композиция

  • Асимметричная плотная сетка: крупный блок-заголовок соседствует с узкими колонками данных и вертикальными плашками.
  • Края экрана заняты служебной информацией: бегущая строка, коды узлов, время, координаты.
  • Блоки плотно прилегают друг к другу с промежутками 8–16 px; пустота используется только вокруг главного заголовка.
Ещё 2
  • Важные зоны отмечаются предупреждающими полосами, цветной верхней кромкой или плашкой-тегом.
  • Декоративные сбои (полосы, смещения) размещаются на границах блоков и не перекрывают ключевые данные.

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

  • Первый уровень — огромный узкий или тяжёлый заголовок прописными с глитч-эффектом.
  • Второй уровень — крупные цифры и коды (время, количество, номер) кислотным цветом.
  • Третий уровень — моноширинные метки 11–13 px приглушённым или циановым цветом.
Ещё 2
  • Кислотно-жёлтый — главное действие и ключевой показатель; розовый — тревоги и сбои; циан — информация и навигация.
  • Тревоги выделяются формой (полосы, плашки), а не только цветом.

Цвета

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

Кислотный неон

Красная тревога

Токсичный

Принципы работы с цветом
  • Основа — почти чёрный с лёгким синим или фиолетовым подтоном (светлота 3–8%), панели на 1–2 ступени светлее.
  • 2–3 неоновых акцента с чёткими ролями: действие, тревога, информация; не смешивайте их роли.
  • Тёмный текст (#0B0B0B) на кислотных плашках — обязательный приём: так плашки читаются и выглядят как маркировка.
  • Цветные свечения и градиенты применяются точечно; основной шум создают полосы, сканлайны и сбои.

Шрифты

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

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

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

    Заголовки
    Dela Gothic One
    Текст
    Sofia Sans Extra Condensed

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

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

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

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

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

    Заголовки
    Oswald
    Текст
    Ubuntu Mono
Принципы типографики
  • Заголовки — тяжёлый или узкий гротеск прописными, плотный межстрочный интервал 0.95–1.05.
  • Данные, коды, время и метки — моноширинный шрифт 11–14 px.
  • Основной текст — узкий гротеск 17–21 px весом 500 или моноширинный 13–14 px в служебных блоках.
  • Иероглифоподобные и кодовые надписи — только декоративные дубли, смысл всегда продублирован текстом на языке интерфейса.

Компоненты

Кнопки

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

Поля ввода

Поле на тёмной панели с тонкой циановой рамкой, моноширинным вводом и кодовой подписью вида «// АДРЕС»; фокус — жёлтая рамка и маркер.

Карточки

Панели со скошенным углом, цветной верхней кромкой, кодом зоны, крупной цифрой и сегментированным индикатором; тревожные — розовые с плашкой.

Навигация

Пункты прописными с моноширинными номерами 01–05; активный — кислотная плашка или линия. На мобильных — скошенные вкладки с декоративными подписями.

Применение

Где подходит

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

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

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

Ограничения

Ограничения

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

Ошибки

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

Сочетания

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

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

    Точность и порядок технологичного стиля для рабочих экранов, а киберпанк — для заголовков, тревог и промо.

    Направление

  • Брутализм

    Сырой системный вид и моноширинный шрифт брутализма усиливают «уличную» подачу терминала.

    Направление

  • Глассморфизм

    Тёмное матовое стекло с неоновой кромкой как приём для всплывающих панелей и интерфейса поверх видео.

    Приём

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

    Плотная плитка из разноразмерных панелей — удобная компоновка для дашбордов и обзоров в киберпанке.

    Компоновка

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

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

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