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

Y2K

Y2K Aesthetic

Цифровой оптимизм рубежа 2000-х: хром и жидкий металл, перламутр, гелевые кнопки-пузыри, капсульные окна, звёзды и бабочки.

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

Суть

Y2K — эстетика интерфейсов и графики около 1998–2004 годов, когда цифровое будущее казалось блестящим и дружелюбным. Её узнают по хромированным надписям, перламутровым и голографическим переливам, полупрозрачному «леденцовому» пластику, гелевым кнопкам с бликом и скруглённым окнам-капсулам, как у плееров, пейджеров и первых мессенджеров.

Подробнее

В отличие от ретрофутуризма с его неоном на ночном небе и сеткой-горизонтом, Y2K светлый, глянцевый и игрушечно-технологичный: пастельно-перламутровый фон, объёмные блестящие объекты, пиксельные звёздочки и бабочки как наклейки на корпусе. От игривого стиля его отличает материал: здесь всё сделано из хрома, геля и пластика, а не из плоских весёлых фигур.

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

Признаки

  • Хромированный или жидкометаллический текст и объекты: резкий градиент с тёмной «линией горизонта» посередине и бликом сверху.
  • Перламутровые и голографические переливы фона: розовый, сиреневый, голубой и лаймовый, мягко перетекающие друг в друга.
  • Гелевые кнопки-пузыри: полностью скруглённые, с вертикальным градиентом, внутренним бликом в верхней половине и цветной тенью.
  • Окна-капсулы с глянцевой серебристой шапкой и цветными кнопками-точками, как в интерфейсах плееров и мессенджеров начала 2000-х.
  • Декор-наклейки: четырёхлучевые звёзды-блики, пиксельные звёздочки, бабочки, CD-диски с радужным отливом, хромовые шарики.
  • Широкие скруглённые шрифты для заголовков и пиксельный шрифт для чисел и коротких системных меток.
  • Объекты «из пластика»: полупрозрачные леденцовые корпуса, мягкие объёмные тени и подсветка по краю.
  • Цифровой оптимизм в тексте: счётчики «онлайн», версии «2.0», списки друзей, дружелюбные статусы.

Композиция

Композиция

  • Свободный коллаж из плавающих окон-капсул и объектов: элементы слегка повёрнуты (±3–8°) и перекрывают друг друга, создавая глубину.
  • Главный объект — блестящее устройство, диск или хромовая фигура — стоит на перламутровом пятне-капле и окружён мелкими звёздами.
  • Навигация собрана в одну плавающую капсулу, а не растянута линией по краю экрана.
Ещё 2
  • Контентные блоки — скруглённые полупрозрачные окна с собственной шапкой-заголовком; внутри них порядок и обычная сетка.
  • Декор держится по краям и в паузах между блоками, не заходя под основной текст.

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

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

Цвета

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

Перламутровый лёд

Жвачка и лайм

Ночной хром

Принципы работы с цветом
  • Основа — светлый перламутровый фон из 3–4 пастельных оттенков, мягко перетекающих друг в друга.
  • Хром — набор холодных серых от белого до тёмного сине-серого с резким переходом посередине; это «металл», а не цвет текста.
  • Два-три насыщенных «леденцовых» акцента: синий или голубой гель, ярко-розовый, лаймовый; каждый — с более тёмным оттенком для низа градиента.
  • Текст — глубокий тёмно-синий или фиолетовый вместо чистого чёрного; на гелевых кнопках — белый с тёмной подложкой градиента.
  • Допустим тёмный «ночной» вариант: тёмно-синий фон, хром и голубые акценты — но глянец и перламутр сохраняются.

Шрифты

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

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

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

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

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

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

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

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

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

    Заголовки
    Pixelify Sans
    Текст
    Jura
Принципы типографики
  • Заголовки — широкий скруглённый или техно-гротеск в одном начертании, часто с хромовой заливкой и тонкой тёмной обводкой.
  • Основной текст — простой гротеск с лёгким техно-характером, 15–17 px, вес 500–600 для читаемости на градиентах.
  • Пиксельный шрифт — только для чисел, версий, времени и коротких латинских меток; длинный кириллический текст им не набирают.
  • Прописные с разрядкой +0.08…+0.12 em — для шапок окон и бейджей.

Компоненты

Кнопки

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

Поля ввода

Поля — светлые капсулы с внутренней тенью «вдавленного» пластика и тонкой серебристой обводкой; при фокусе появляется цветное свечение и обводка цвета геля.

Карточки

Карточки — окна-капсулы со скруглением 20–28 px, полупрозрачной светлой заливкой и глянцевой шапкой с цветными точками; иногда с объёмным шаром или блестящей иконкой.

Навигация

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

Применение

Где подходит

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

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

  • Ограничьте хром одним-двумя крупными элементами: заголовком и главным объектом; интерфейсные тексты оставьте плоскими.
  • Сделайте один набор гелевых кнопок (основная, вторичная, круглая) и используйте его везде без вариаций.
  • Проверяйте экран без декора: если без звёзд и бабочек он рассыпается, композиция держится на украшениях.
Ещё 1
  • Для иллюстраций используйте объёмные блестящие объекты из CSS или векторных градиентов — диски, шарики, капли, устройства.

Ограничения

Ограничения

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

Ошибки

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

Сочетания

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

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

    Матовое стекло подходит для окон-капсул: Y2K даёт хром и гель, стекло — полупрозрачные слои.

    Приём

  • Аврора-градиенты

    Переливающиеся градиенты-сияния усиливают перламутровый фон; держите их мягкими, чтобы хром оставался главным.

    Приём

  • Скевоморфизм

    Объёмные материалы и блики роднят их: из скевоморфизма берите правдоподобные кнопки и регуляторы плеера.

    Направление

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

    Плитка разноразмерных карточек упорядочивает коллаж Y2K: каждая плитка становится окном-капсулой.

    Компоновка

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

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

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