Auros
Абиссальный терминал с биолюминесцентными шарами данных
Auros функционирует как финтех-терминал, расположенный в бездне: почти чёрный бирюзовый холст с биолюминесцентными шарами данных и градиентами света от бирюзового до розового, создающими ощущение глубины, текучести и потока. Интерфейс минималистичен и кинематографичен, полагаясь на единственный пользовательский дисплей (Matter) средней толщины с агрессивным отрицательным трекингом для создания масштаба без излишней броскости. Цвета распределены равномерно — ахроматические белые и серебристые оттенки используются почти для всего контента, в то время как хроматическая палитра зарезервирована для атмосферных градиентов, различения поверхностей карт и одной фирменной кнопки в форме таблетки, которая меняет цвет от бирюзово-голубого до лавандово-розового. Карты парят на едва заметных бирюзовых поверхностных выступах (радиус 16px, без теней), а не за счёт высоты, поэтому иерархия воспринимается как глубина воды, а не как тень на бумаге. Компоненты выглядят продуманными и похожими на инструменты: метки с трекингом в верхнем регистре, тонкие геометрические значки стрелок, крупные числовые показатели бледно-розового цвета.
Темный холст, занимающий всю ширину страницы, с контентом максимальной шириной 1440px. Главный элемент — это центрированный текстовый блок (бровь → заголовок → подтекст → призыв к действию), занимающий всю высоту области просмотра, с частицей в качестве фонового элемента. Разделы представляют собой полосы во всю ширину, разделенные большими вертикальными промежутками 68px+, чередующиеся между холстом и слегка утопленными поверхностями. Раздел «Исследовать» использует асимметричную двухколоночную компоновку: левая колонка содержит расположенные друг над другом карточки с функциями, правая колонка содержит геометрическую молекулярную иллюстрацию. Контент центрируется в узких колонках (максимум ~600px) для удобства чтения, а не растягивается от края до края. Нижний колонтитул представляет собой утопленную яму (#011d1c) с вертикальным отступом 120px, создающую эффект глубокого бассейна. Навигация представляет собой тонкую прозрачную панель с элементами, расположенными на расстоянии 16–24px друг от друга. Общий ритм кинематографичен и просторен — каждый участок дышит, а глубокая, как вода, цветовая гамма создает ощущение, что в каждом проходе падаешь все глубже.
Визуальный ряд минималистичен и атмосферен. На главной странице изображена трехмерная сфера из частиц — тысячи маленьких бирюзово-голубых и белых точек, образующих вращающийся шар, который перекликается с цветом холста и лавандово-розовым акцентом по краям, создавая эффект биолюминесценции, напоминающий информационный объект. В качестве декоративных элементов в правой колонке используются плоские геометрические молекулярные диаграммы (белые круги и тонкие соединительные линии на темном холсте). Никаких фотографий, никаких изображений, отражающих образ жизни, никаких людей — визуальный язык основан на чистой графике данных и абстрактных формах. Сфера из частиц является определяющим визуальным элементом фирменного стиля; она должна появляться хотя бы один раз на любой важной странице, чтобы закрепить метафору глубоководья.
Палитра
Бренд
- Liquid Abyss
#012624— Основной фон — это основа страницы, заголовок, главный элемент и доминирующее тёмно-бирюзовое поле. Создаёт атмосферу глубоководной среды. - Liquid Deep
#011d1c— Углубленный уровень поверхности — фон нижнего колонтитула и более глубокие картонные панели. Воспринимается как на полтона темнее холста, создавая едва заметный градиент глубины вниз. - Liquid Kelp
#003734— Приподнятая поверхность карточки и основная заливка кнопки — приподнятая поверхность, расположенная на ступеньку выше пропасти. Используется для карточек с функциями, панелей контента и начальной точки градиентной кнопки.
Нейтральные
- Liquid Mist
#edfffe— Холодный оттенок белого для выделения основного текста, заголовков разделов и теплых светлых типографических моментов. Едва уловимый голубой оттенок связывает основной текст с бирюзовой цветовой гаммой. - Platinum
#ffffff— Чисто белый цвет используется для заголовков, элементов навигации, обводки значков и высококонтрастного текста. Это основной цвет текста на всех уровнях заголовков и в основной навигации. - Silver Mist
#bbc7c6— Второстепенный текст, приглушенные описания и цвет ссылок в исходном состоянии. Имеет легкий зеленоватый оттенок, гармонирующий с бирюзовым фоном. - Ash
#f2f2f2— Дополнительный текст для цитат и отзывов. Нейтральный холодный серый оттенок, когда бирюзовый подтон Silver Mist кажется слишком ярким. - Slate Deep
#707777— Едва заметный поверхностный оттенок для неактивных или малозаметных фонов. Находится между холстом и картоном, обеспечивая очень незначительную дифференциацию по высоте. - Lavender Phosphor
#fde9ff— Цвет подсветки для крупных статистических данных, цифр счетчиков и важных показателей. Розовый оттенок в градиенте подписи — используется экономно в качестве светящихся акцентов на темных поверхностях.
Типографика
от 10 до 96px · 6 ступеней
- Matter — замена: Inter · начертания 400, 500 · Основной шрифт для заголовков и основного текста — используется с толщиной 500 для всех заголовков (H1–H3) и крупного кинетического текста (86–295px). Толщина 400 для основного текста и текста пользовательского интерфейса. Характеризуется агрессивным отрицательным межбуквенным расстоянием при больших размерах (-0.04em при 61px, -0.046em при 86px) и широким положительным межбуквенным расстоянием в заголовочных заглавных буквах (0.08em при 20px, 0.12em при 12px, 0.15em при 10px). Стратегия использования только средней толщины для заголовков является отличительной чертой — нет жирного или светлого шрифта — что придает шрифту единообразную механическую уверенность.
- Arial — замена: system-ui · начертания 400 · Вторичный резервный вариант для интерактивных элементов пользовательского интерфейса (навигация, кнопки, микротекст в заголовке, нижний колонтитул). Появляется только в 14px — используется в качестве безопасного универсального резервного варианта, когда Matter не загружен, и охватывает метки форм, текст кнопок и небольшой вспомогательный текст.
Интервалы и форма
| Назначение | Значение |
|---|---|
| Плотность | средняя |
| Базовый шаг | 20px |
| Радиус кнопок | 6px |
| Радиус карточек | 16px |
| Тени | нет — границы вместо теней |
| Между секциями | 68px |
| Ширина страницы | 1440px |
ИИ соберёт ваш сайт в стиле Auros и наполнит его
- Наполнит товарами и постами по ссылке — Instagram, TikTok, Facebook.
- Перенесёт контент со старого сайта — достаточно указать адрес.
- Современный дизайн на лучшем движке: React (Next.js) с серверным рендерингом и SEO-оптимизацией из коробки.
- Полная автоматическая SEO-оптимизация под поисковую выдачу и рекомендации нейросетей.
Похожие стили
- Design Full-Time — кинотеатр-студия с одним теплым прожектором
- Air — скульптура «Полуночное небо сквозь стекло»
- Slash — Полуночное хранилище с позолоченными линиями бухгалтерских книг
- Raycast — Полуночный командный центр, коралловый неон
- Dimension — рабочее место, освещенное сумерками, с панелями из матового стекла
- Modal — Фосфорный терминал в затемненной серверной комнате — единственным источником света является ярко-зеленый цвет
- Giga — Полуночный горизонт над матовым обсидианом
- Reflect Notes — Звездный фиолетовый космос — темная обсерватория, где ноты парят, словно созвездия, на фоне почти черной инд…
- Ameba — Диспетчерская в полночь — электрический синий пульс внутри матовых стеклянных панелей
- AgentQL — Северное сияние над ночным терминалом
- Frame — Кинозал для ночных кинопоказов. Темная комната, где единственный синий прожектор выполняет всю работу, а по…
- Harness — Центр управления полетами в полночь с фосфоресцирующими зелеными акцентами