Что такое Cyberpunk веб-дизайн?

Cyberpunk как эстетика родом из научной фантастики 1980-х - «Бегущий по лезвию», «Нейромант» Уильяма Гибсона, позже «Матрица» и бесчисленные игры - построенной на контрасте «высокие технологии, низкий уровень жизни»: сияющий корпоративный хром и неоновые вывески поверх обветшалого, переполненного города. Визуально это выражается в насыщенном неоне на почти чёрном фоне, плотных информационных наложениях и интерфейсах, которые выглядят собранными из военного или корпоративного железа, а не дружелюбного потребительского софта.

В вебе это проявляется как почти чёрный фон, подсвеченный двумя-тремя неоновыми акцентами (электрик-циан, ядовитая магента, кислотно-зелёный), моноширинный или терминальный шрифт, создающий ощущение командной строки, и HUD-обвязка - угловые скобки-рамки, текстура скан-линий, глитч/хроматическая аберрация текста - вокруг вполне обычных блоков контента. Рамки и разделители чаще светятся, а не отбрасывают тень, отсылая к подсвеченным вывескам, а не к печатному дизайну.

Стиль подходит продуктам, которые хотят выглядеть технично, бунтарски или футуристично, а не гладко и корпоративно - в первую очередь играм, крипто/web3-проектам, кибербезопасности и развлекательным сайтам, - поскольку плотность и свечение стиля идут вразрез с воздушными, контрастно-белыми композициями, типичными для большинства SaaS и корпоративного дизайна.

Ключевые визуальные характеристики

• Почти чёрный фон, подсвеченный двумя-тремя насыщенными неоновыми акцентами - никогда мягкая пастельная палитра
• Текстура скан-линий и лёгкий глитч/хроматическая аберрация вместо обычной фактуры или зерна
• HUD-рамки с угловыми скобками вокруг панелей и изображений, как прицел или игровой оверлей
• Светящиеся рамки и тени текста вместо мягких теней - свет ведёт себя как подсвеченная вывеска, а не печать
• Едва заметная перспективная сетка на фоне, напоминающая схему или цифровой горизонт
• Мелкие мигающие индикаторы статуса и live/rec-метки в роли декоративного системного обвеса

Цветовые характеристики

• Почти чёрный или тёмно-фиолетовый фон вместо обычного белого или почти белого
• Два конкурирующих неоновых основных цвета - обычно электрик-циан и ядовитая магента/розовый - для заголовков, ссылок и свечения
• Высоконасыщенные акценты на мелких UI-деталях (точки, рамки, теги), а не на крупных плоских заливках
• Холодный, слегка приглушённый текст тела, чтобы неоновые акценты оставались самым ярким пятном на странице

Типографика

• Моноширинный или терминальный шрифт для лейблов, служебного текста и навигации, усиливающий ощущение командной строки
• Жирный, капительный дисплейный шрифт для заголовков, часто с глитч/сдвоенным эффектом слоя
• Микротекст с обилием слэшей и скобок (например, «// ACCESS_LEVEL», «[ SYSTEM ]») в роли структурного декора

UI-паттерны

• Верхняя панель с брендмарком в скобках, пронумерованными через слэш пунктами навигации и светящейся кнопкой с обводкой
• Служебная полоса с мелкими live-показателями (координаты, аптайм, мигающая rec/online-точка)
• Двухколоночный hero, сочетающий заголовок с глитч-эффектом и HUD-панель в рамке с угловыми скобками и «живыми» данными (полосы, кольца, статистика)
• Ряд карточек-модулей в терминальном стиле с угловыми скобками, моноширинными тегами и футером «ACCESS →»