Huly

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

Huly создает атмосферу космического рабочего пространства: почти черный холст с единственным фиолетово-янтарным сиянием, прорезающим главный элемент, а ниже — более спокойная сетка для повышения производительности. Система работает в узком цветовом диапазоне — один ярко-синий и один коралловый цвета выполняют всю работу по продвижению бренда на фоне многослойных графитовых поверхностей, поэтому темный режим никогда не кажется нейтральным. Типографика выполнена в стиле Inter для всего функционального, с пользовательским шрифтом (Esbuild), зарезервированным для ключевых моментов, с шагом 80–84px и агрессивным отрицательным межбуквенным расстоянием. Компоненты имеют форму капсулы: радиусы 9999px на элементах управления, 12px на карточках, минимальная тень и светящиеся градиентные линии в качестве основного декора. Страница чередуется между темными, занимающими всю страницу участками, и спокойными светлыми секциями, поэтому любой новый экран должен определиться с режимом работы, прежде чем выбирать цвета.

Заглавная страница во всю ширину страницы с вертикальным лучом северного сияния и заголовком, выровненным по левому краю, а также скриншотом продукта, расположенным внизу справа. Под главной страницей находится область контента максимальной ширины 1200px, чередующаяся с темными и светлыми полосами. Каждый раздел представляет собой единый вертикальный блок: заголовок + 3- или 4-колоночная сетка карточек, разделенных 96px промежутками. Раздел «MetaBrain» нарушает сетку центрированным заголовком и мозаикой из карточек разного размера (большая главная карточка + меньшие вспомогательные карточки). Страница насыщена контентом по стандартам SaaS, но использует чередование темных и светлых полос, чтобы дать каждому разделу пространство для «дыхания». Навигация представляет собой единую прозрачную верхнюю панель, которая становится непрозрачной при прокрутке.

Главный элемент — это чистый градиент северного сияния, без фотографий. Все иллюстрации — это реальные скриншоты пользовательского интерфейса продукта (канбан в темном режиме, входящие сообщения, календарь), заключенные в рамки карточек, которые служат одновременно доказательством и украшением. Никаких фотографий в стиле лайфстайл, никаких стоковых изображений, никаких 3D-рендеров. Единственный визуальный элемент, не относящийся к пользовательскому интерфейсу, — это теплое радиальное свечение в виде солнечных лучей у основания северного сияния, нарисованное в виде градиента CSS. Иконки — монохромные линейные иконки в цвете #95979 или белом, никогда не многоцветные. Система рассматривает свой собственный темный пользовательский интерфейс как главный элемент — продуктом являются фотографии.

Чистый SaaS Мягкие градиенты Минимализм

https://huly.io

Палитра

Бренд

Electric Iris #5683da — Основной фон, индикатор активной навигации, эффектный акцент в виде северного сияния — яркий фиолетово-синий цвет на угольно-черном фоне создает впечатление вовлеченности, а не корпоративной активности.
Ember Pulse #ff8964 — Вторичный акцент, теплая зона северного сияния, точка уведомления, выделение иллюстрации — янтарный оттенок, который нарушает сдержанность синего цвета и придает лучу теплоту.

Нейтральные

Obsidian Canvas #303236 — Фон страницы, доминирующая поверхность — почти черный цвет с легким оттенком тепла, стандартная среда для всего контента.
Void #090a0c — Самый глубокий поверхностный слой для градиентов на главном экране, модальных фонов и рамок, которые должны сливаться с холстом.
Charcoal Card #111111 — Приподнятые поверхности из картона и панелей, расположенные на одну ступеньку выше холста.
Slate Edge #4a4b50 — Тонкие границы и разделители на темных поверхностях
Iron Veil #6b6c6d — Приглушенный фон для тегов, заливки элементов списка и заливки в отключенном состоянии.
Smoke #95979e — Обводка иконок, дополнительный текст и неактивные элементы управления — основной рабочий элемент средне-серого цвета.

Типографика

от 11 до 80px · 8 ступеней

Inter — замена: DM Sans · начертания 300, 400, 500, 600, 700 · Весь функциональный текст пользовательского интерфейса — основной текст, навигация, кнопки, элементы списков, подписи, небольшие заголовки. Используется с толщиной шрифта 500–600 для выделения, 400 для основного текста, 300 — экономно для ненавязчивых метаданных.
Esbuild — замена: Sora · начертания 400, 500, 600 · Только для отображения: заголовки-заставки, заголовки разделов, заголовки статей MetaBrain. Сжатая геометрия и плотное межбуквенное расстояние создают ощущение, что 84px больше подходит для редакционной работы, чем для SaaS-проектов. Никогда не используется ниже 28px.

Интервалы и форма

Назначение	Значение
Плотность	просторная
Базовый шаг	12px
Радиус кнопок	9999px
Радиус карточек	12px
Тени	мягкие тени
Между секциями	96px
Ширина страницы	1200px

ИИ соберёт ваш сайт в стиле Huly и наполнит его

Наполнит товарами и постами по ссылке — Instagram, TikTok, Facebook.
Перенесёт контент со старого сайта — достаточно указать адрес.
Современный дизайн на лучшем движке: React (Next.js) с серверным рендерингом и SEO-оптимизацией из коробки.
Полная автоматическая SEO-оптимизация под поисковую выдачу и рекомендации нейросетей.

Создать сайт в этом стиле

Huly

Палитра

Типографика

Интервалы и форма

ИИ соберёт ваш сайт в стиле Huly и наполнит его

Похожие стили