
Modal
Фосфорный терминал в затемненной серверной комнате — единственным источником света является ярко-зеленый цвет
Modal работает как фосфоресцирующий терминал в затемненной серверной комнате: почти черный холст, бледно-зеленый шрифт и единственный яркий салатовый акцент, который ведет себя как светодиодный индикатор состояния. Язык дизайна ориентирован на разработчиков — моноширинные окна кода с точками светофора, изометрические 3D-иконки, выполненные в фирменном зеленом цвете, и большое количество пустого пространства, позволяющего одному элементу в каждом разделе светиться. Типографика разделена между пользовательским шрифтом (Goga) для заголовков и переменным шрифтом Inter для всех элементов пользовательского интерфейса, оба настроены с узким отрицательным трекингом. Цвета распределены равномерно: большинство экранов ахроматические, а яркий салатовый цвет появляется только на основных действиях, логотипе, 3D-иллюстрациях и моментах акцента. Компоненты плоские и без рамок, глубина создается за счет тонких зеленых границ и размытия фона, а не теней.
Модальное окно использует полноэкранный темный макет с максимальной шириной 1280px для размещения контента. Геройское окно расположено по центру: заголовок (первая фраза салатового цвета), подзаголовок, два призыва к действию и один трехмерный объект в качестве визуального якоря — без разделения макета и боковой панели. Разделы контента следуют единому ритму: метка «брови» (заглавные буквы, Moss 70) → заголовок Goga → приглушенный основной текст, затем либо двухколоночный макет с описанием функции (текст + код/визуальная карточка), либо трехколоночная сетка карточек. Промежутки между разделами достаточно большие — 80px. Страница чередуется между глубокими пустыми (#000000) и слегка более светлыми фоновыми (#181818) полосами, с одной светлой секцией (#def0dd), появляющейся посередине страницы в качестве визуального «дыхания». Навигация представляет собой единую фиксированную верхнюю панель с размытием фона — без боковой панели и мега-меню. Нижний колонтитул компактный, темный, со столбцами ссылок приглушенного зеленого цвета. Плотность размещения текста комфортная: каждому разделу отведено достаточно места, и для карточных сеток используется не более 3 столбцов.
Визуальный язык Modal разделен на два режима: трехмерные светящиеся рендеры продуктов и темные макеты окон кода. В центре внимания — один трехмерный куб, отрисованный с использованием маркетингового градиента (от салатового до изумрудного), расположенный в радиальном градиентном ореоле, который заливает пустое пространство зеленым светом — это фирменный визуальный стиль бренда. Карточки рабочих нагрузок содержат изометрические трехмерные иконки (каркасный куб, сплошная лестница, слои), отрисованные тем же салатово-зеленым цветом на темном фоне. Код и результаты бенчмарков представлены в виде карточек окон терминала с точками светофора, моноширинной подсветкой синтаксиса в фосфорной палитре и приглушенной зеленой рамкой — они выглядят как скриншоты реального интерфейса командной строки. Логотипы клиентов отображаются в виде ненасыщенных зелено-серых меток в одной строке с низким контрастом, сигнализируя о доверии без визуальной конкуренции. Общая плотность низкая — большинство страниц содержат преимущественно текст, а изображения представлены в виде отдельных фокусных объектов, а не сеток фотографий. Фотографий нет; Вся визуальная система является рендерированной, геометрической и излучающей.
Палитра
Бренд
- Lime Pulse
#7fee64— Основные элементы фирменного стиля — логотип, главный призыв к действию (CTA), заполнение тегов, активные состояния, базовый цвет иллюстрации.
Нейтральные
- Phosphor White
#ddffdc— Основной текст, цвет заголовка, обводка иконок, закрашенный текст кнопок — основная читаемая поверхность. - Void Black
#000000— Холст страницы, самый глубокий фоновый слой - Ground Iron
#181818— Основная заливка кнопки, поверхности карточек на темных участках, базовая поверхность пользовательского интерфейса. - Carbon Veil
#212525— Возвышенные поверхности, навигационный фон, слегка светлее земли. - Circuit Border
#485346— Контурная/призрачная рамка действия, основная интерактивная тонкая линия — приглушенный зеленовато-серый оттенок. - Phosphor Blue-Black
#1f2a33— Вторичные тонкие линии разметки, разделительные штрихи между темными полосами.
Типографика
от 12 до 64px · 8 ступеней
- Goga — замена: Inter Tight or Space Grotesk · начертания 400, 500 · Шрифт для заголовков и подзаголовков — используется для всех заголовков H1–H4 и карточек. Goga — это пользовательский геометрический шрифт без засечек с узкими апертурами и слегка квадратными окончаниями. Средний вес (500) зарезервирован для выделения заголовков на уровне карточек; обычный вес (400) используется для заголовков-героев и разделов. Для доступа к альтернативным формам глифов, определяющим индивидуальность Modal, необходимо включить его стилистический набор 'ss01'. Отрицательное межбуквенное расстояние постепенно уменьшается от -0.007em на 48px до -0.017em на 21px.
- Inter Variable — замена: Inter · начертания 400, 500 · Интерфейс пользователя и основной текст — навигация, кнопки, основной текст, подписи, нижний колонтитул. Средний вес (500) используется по умолчанию для интерактивных элементов и навигации; обычный (400) — для абзацев. Межбуквенное расстояние заметно уменьшено даже при небольших размерах (-0.026em в 14px, -0.022em в 16px), что придает интерфейсу сжатую, терминальную плотность. Для альтернативной пунктуации следует включить вариант символа 'cv11'. Подписи в виде заглавных букв в 12px используют межбуквенное расстояние +0.05em в качестве противовеса плотности основного текста.
Интервалы и форма
| Назначение | Значение |
|---|---|
| Плотность | средняя |
| Базовый шаг | 20px |
| Радиус кнопок | 12px |
| Радиус карточек | 8px |
| Тени | нет — границы вместо теней |
| Между секциями | 80px |
| Ширина страницы | 1280px |
ИИ соберёт ваш сайт в стиле Modal и наполнит его
- Наполнит товарами и постами по ссылке — Instagram, TikTok, Facebook.
- Перенесёт контент со старого сайта — достаточно указать адрес.
- Современный дизайн на лучшем движке: React (Next.js) с серверным рендерингом и SEO-оптимизацией из коробки.
- Полная автоматическая SEO-оптимизация под поисковую выдачу и рекомендации нейросетей.
Похожие стили
- Slash — Полуночное хранилище с позолоченными линиями бухгалтерских книг
- AgentQL — Северное сияние над ночным терминалом
- GitHub — Космическая командная панель с биолюминесцентными контрольными точками — темное, атмосферное рабочее простра…
- Doppler — Фиолетовое освещение хранилища в полночь. Почти чёрное полотно светится единственным лавандовым сигналом и з…
- Basedash — Полуночный терминал данных с матовым шрифтом. Темная обсерватория, где метрики светятся фиолетовым и зеленым…
- Superwhisper — Северное сияние растворяется над полуночным стеклом
- Better Stack — Полуночная консоль SRE
- Langbase — Полуночное северное сияние консоль
- Astro — Центр управления полетами в дальнем космосе с одиночным фиолетовым свечением туманности
- Wayfinder — Черный киноэкран с едва слышным названием, парящим над живой иллюстрацией. Интерфейс представляет собой регу…
- HashiCorp — Диспетчерская в полночь с фиолетовым неоном — темная техническая поверхность, где светящийся шестиугольный к…
- Umbrel — Уютный очаг в ночной серверной — темное помещение, где единственный персиковый отблеск указывает на то, что …