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

Ретрофутуризм

Retrofuturism

Будущее глазами прошлого: неон на тёмном фоне, сетки-горизонты, полосатые закаты, хром, ЭЛТ-экраны и синтвейв.

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

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

О стиле

Ретрофутуризм показывает будущее таким, каким его представляли в 1960–1980-х: космические рейсы, компьютеры с зелёными экранами, неоновые города и хромированные логотипы. Это не ностальгия по прошлому, а ностальгия по несбывшемуся будущему.

Узнаваемые мотивы — тёмное ночное или космическое небо, солнце с горизонтальными прорезями на закате, уходящая к горизонту сетка в перспективе, неоновые розовый и циановый, хромированные градиенты в заголовках, развёртка и строки ЭЛТ-монитора, звёзды и орбиты.

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

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

  • Тёмный фон: ночное небо, глубокий фиолетовый, космический синий или почти чёрный.
  • Неоновые акценты — розовый, циановый, фиолетовый, оранжевый — со свечением.
  • Солнце-закат с горизонтальными прорезями и градиентом от жёлтого к розовому.
  • Сетка в перспективе, уходящая к горизонту, и линии-горизонты.
  • Хромированные градиентные заголовки, техно- и космические шрифты.
  • Мотивы ЭЛТ-экрана: строки развёртки, скруглённый «кинескоп», моноширинные показания.
  • Космические детали: звёзды, орбиты, ракеты, планеты с кольцами.

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

Композиция

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

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

  • Первый уровень — крупный заголовок с хромированным или закатным градиентом и свечением.
  • Второй уровень — неоновые подзаголовки и метки широким техношрифтом прописными с разрядкой.
  • Третий уровень — светлый текст без свечения на тёмных панелях.
  • Главное действие — неоновая кнопка с самым сильным свечением на экране.

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

  • Фон тёмный: от глубокого фиолетового до почти чёрного; поверхности панелей на 1–2 ступени светлее.
  • 2–3 неоновых акцента со свечением; один из них — главный для действий.
  • Закатный градиент (жёлтый → оранжевый → розовый → фиолетовый) — для солнца, заголовков и крупных декоративных элементов.
  • Хром — градиент от светлого к тёмному с резким бликом по горизонту, только для крупного текста и логотипов.
  • Основной текст — светлый нейтральный, без свечения, с контрастом не ниже 7:1.

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

Синтвейв-закат

Классика 80-х: фиолетовая ночь, розовый и циановый неон, оранжевое солнце.

Космическая гонка

Будущее из 60-х: бирюза, ракетный оранжевый и хром на глубоком сине-зелёном.

Зелёный терминал

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

Типографика

  • Заголовки — широкий, геометричный или «космический» шрифт, часто прописными, с хромом или неоновым свечением.
  • Основной текст — читаемый технологичный гротеск 400–500, 16–18 px, без свечения.
  • Метки, показания и цифры — моноширинный или техношрифт с разрядкой +0.08…+0.2 em.
  • Курсивный наклон заголовков на 6–12° передаёт «скорость» в духе аутрана, но только для коротких строк.

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

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

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

    Заголовки
    Russo One
    Текст
    Exo 2

    Плотный Russo One хорошо держит хромированный градиент, Exo 2 сохраняет технологичный характер в тексте.

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

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

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

    Угловатый Tektur похож на шрифт пульта управления, Jura добавляет лёгкость фантастики 70-х.

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

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

    Заголовки
    Unbounded
    Текст
    Exo 2

    Широкий Unbounded прописными напоминает логотипы космических программ и синтвейв-обложек.

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

Кнопки

Неоновая кнопка: тёмная или градиентная заливка, светящаяся обводка 1–2 px и внешнее свечение; текст широким шрифтом прописными. Часто со скошенными углами.

Поля ввода

Тёмное поле-«дисплей» с тонкой неоновой рамкой, моноширинный текст ввода; при фокусе рамка и свечение усиливаются, появляется мигающий курсор-блок.

Карточки

Тёмная панель со скошенными углами или кинескопным скруглением, тонкая светящаяся рамка, строки развёртки на фоне; заголовок неоновым цветом.

Навигация

Меню широким шрифтом прописными с разрядкой; активный пункт светится неоном и подчёркнут светящейся линией. На мобильных — панель-пульт с подсвеченными иконками.

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

Где подходит

  • Музыкальные сервисы, радио, фестивали, ночные мероприятия.
  • Игры, киберспорт, развлекательные и медиапроекты.
  • Технологичные бренды с характером, промостраницы запусков.
  • Космическая и научно-популярная тематика, музеи и выставки.

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

  • Выберите одну ветку: синтвейв 80-х (неон, закат, сетка), космическую эру 60-х (хром, орбиты, ракеты) или терминал (люминофор, ЭЛТ).
  • Свечение давайте 2–4 элементам на экран; весь остальной интерфейс — тёмные панели и светлый текст.
  • Сетку-горизонт и солнце используйте как фон сцены, а не за текстом, чтобы не мешать чтению.
  • Для длинных текстов и таблиц используйте обычный читаемый шрифт без свечения.

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

Ограничения

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

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

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

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

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

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

    Технологичная точность данных внутри неоновых панелей-пультов — хороший вариант для рабочих инструментов.

    Направление

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

    Стеклянные панели с лёгким неоновым краем поверх закатной сцены — приём для промоэкранов.

    Приём

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

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

    Компоновка

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

    Игровые персонажи и анимация хорошо живут в синтвейв-сцене развлекательных продуктов.

    Направление

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

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

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