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 — Затишний осередок у нічному серверному — темне приміщення, де єдиний персиковий відблиск вказує на те, що дійсно важливо