Атлас
Приём оформления

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

Aurora Gradients

Размытые перетекающие цветовые поля, как северное сияние, с зерном и крупной чистой типографикой поверх.

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

Суть

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

Подробнее

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

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

Признаки

  • Фон из 3–5 крупных размытых цветовых полей, плавно перетекающих друг в друга без видимых границ.
  • Сильное размытие полей (40–90 px) и смешивание цветов в режиме screen на тёмном или multiply на светлом фоне.
  • Лёгкое зерно поверх градиента (прозрачность 6–15%), убирающее полосы и «пластиковый» вид.
  • Крупная чистая типографика: заголовки 64–100 px с плотным межстрочным интервалом и отрицательным трекингом.
  • Градиент повторяется в акцентах: числа с градиентной заливкой текста, полосы прогресса, волны, графики.
  • Сплошные непрозрачные панели и карточки поверх сияния — без стекла и размытия под ними.
  • Затемняющая или осветляющая подложка-переход (scrim) под текстом для гарантированного контраста.

Композиция

Композиция

  • Сияние сосредоточено в одной-двух зонах (обычно верх и правая часть первого экрана), а текст стоит на более спокойном участке.
  • Заголовок — крупный, выровненный по левому краю или по центру, занимает 60–90% ширины контента.
  • Ниже первого экрана градиент гаснет в сплошной фон, а рабочие блоки идут на непрозрачных поверхностях.
Ещё 2
  • В рабочих экранах сияние сводится к полосе или пятну в шапке раздела и к градиентным акцентам в данных.
  • Между блоками много воздуха: градиент — визуально «тяжёлый» элемент и не терпит тесноты.

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

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

Цвета

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

Полярная ночь

Рассветная дымка

Глубокий океан

Принципы работы с цветом
  • Сияние строится из 3–5 соседних по кругу оттенков (например, бирюзовый → синий → фиолетовый → розовый), а не из случайных цветов.
  • Фон под сиянием — глубокий почти чёрный с оттенком (тёмная аврора) или тёплый почти белый (светлая аврора).
  • Текст — однотонный: светлый на тёмной авроре, очень тёмный на светлой; градиент в тексте — только для крупных чисел и коротких слов.
  • Самые яркие участки сияния держите вдали от текста или закрывайте подложкой с затемнением 50–85%.
  • Поверхности карточек — сплошные цвета, на 4–8% светлее (тёмная тема) или темнее (светлая тема) фона.

Шрифты

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

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

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

    Заголовки
    Wix Madefor Display
    Текст
    Wix Madefor Text

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

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

    Заголовки
    Inter Tight
    Текст
    Inter

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

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

    Заголовки
    Commissioner
    Текст
    Commissioner
Принципы типографики
  • Крупный чистый гротеск без декора: сияние даёт достаточно характера, шрифт должен быть спокойным.
  • Заголовки 64–100 px на крупных экранах, вес 600–700, межстрочный интервал 0.95–1.05, трекинг −0.03…−0.045 em.
  • Основной текст 16–18 px, вес 400, межстрочный интервал 1.5–1.6, однотонный цвет.
  • Градиентная заливка текста — только для крупных чисел и коротких слов от 32 px, с проверкой контраста самого тёмного участка.

Компоненты

Кнопки

Главная кнопка — сплошная пилюля, максимально контрастная к фону: светлая с тёмным текстом на тёмной авроре, тёмная со светлым — на светлой. Вторичная — контур 1 px с полупрозрачной тёмной подложкой; градиентом кнопку не заливают.

Поля ввода

Поля — сплошные тёмные (или белые) с обводкой 1 px и скруглением 12–999 px; в фокусе обводка становится градиентной или цветом сияния, плюс отчётливое кольцо фокуса.

Карточки

Карточки — непрозрачные поверхности без размытия, скругление 20–28 px. Одна ключевая карточка на экран может быть залита светлым сиянием с тёмным текстом и зерном.

Навигация

Навигация — текстовая и лёгкая, стоит прямо на спокойном участке фона или на сплошной панели; активный пункт — светлый текст или полоса цвета сияния.

Применение

Где подходит

  • ИИ-сервисы, продукты для разработчиков и SaaS с акцентом на «магию» и технологию.
  • Музыка, подкасты, медитации, сон — продукты, связанные с настроением и звуком.
  • Лендинги запусков, конференций и новых версий продукта.
Ещё 1
  • Личные кабинеты, где сияние служит фирменным акцентом в шапке и ключевых показателях.

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

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

Ограничения

Ограничения

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

Ошибки

  • Ставить белый текст на самый яркий бирюзовый или розовый участок сияния без подложки.
  • Делать стеклянные панели главным элементом — это уже глассморфизм, а не аврора.
  • Заливать градиентом всё: кнопки, заголовки, иконки и рамки одновременно.
Ещё 3
  • Брать несочетающиеся цвета с противоположных сторон круга — на стыке появляется грязно-серый.
  • Забывать про зерно: на плавных переходах видны ступеньки и полосы.
  • Чёткие края у пятен — получаются цветные круги, а не сияние.

Сочетания

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

  • Минимализм

    Минимализм задаёт воздух, один крупный заголовок и сдержанную сетку, аврора добавляет за ним единственный яркий элемент — сияние; вместе это чистый современный лендинг.

    Направление

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

    Технологичное направление даёт тёмный фон, моноширинные детали и плотные данные, аврора — свечение в шапке и градиентные графики для ИИ- и девелоперских продуктов.

    Направление

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

    Два приёма делят роли: аврора рисует яркий перетекающий фон, а глассморфизм — немногие стеклянные панели над ним; главным должен остаться один из них.

    Приём

  • Премиальное оформление

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

    Направление

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

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

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