Modal
Фосфоресциращ терминал в затъмнена сървърна стая - единственият източник на светлина е яркозелен цвят
Модалът функционира като фосфоресциращ терминал в затъмнена сървърна стая: почти черно платно, бледозелен шрифт и един ярък лимоненозелен акцент, който действа като LED индикатор за състоянието. Дизайнерският език е фокусиран върху разработчиците - моношироки кодови прозорци с точки на светофара, изометрични 3D икони в характерния зелен цвят и много бяло пространство, позволяващо на един елемент във всяка секция да свети. Типографията е разделена между персонализиран шрифт (Goga) за заглавия и променлив шрифт (Inter) за всички елементи на потребителския интерфейс, като и двата са зададени с тясно негативно проследяване. Цветовете са разпределени равномерно: повечето екрани са ахроматични, а яркозеленият цвят се появява само при ключови действия, логото, 3D илюстрациите и моментите на акцент. Компонентите са плоски и без рамки, с дълбочина, създадена чрез фини зелени рамки и размазване на фона, а не чрез сенки.
Модалният прозорец използва тъмен дизайн с пълна ширина и максимална ширина от 1280px, за да побере съдържанието. Главният прозорец е центриран: заглавието (първото изречение в лимонено зелено), подзаглавие, две подкани за действие и един 3D обект като визуална котва - без да отделя оформлението от страничната лента. Секциите със съдържание следват равномерен ритъм: етикет за вежди (главни букви, Moss 70) → заглавие от Goga → приглушен текст на тялото, след това или оформление с две колони с описание на функция (текст + код/визуална карта), или мрежа от карти с три колони. Разстоянията между секциите са щедри - 80px. Страницата се редува между дълбоки празни (#000000) и леко по-светли фонови (#181818) ивици, като една светла секция (#def0dd) се появява в средата на страницата като визуален „дишащ“ елемент. Навигацията се състои от една фиксирана горна лента с размазан фон - без странична лента или мега-меню. Долният колонтитул е компактен и тъмен, с приглушени зелени колони за връзки. Плътността на текста е удобна: на всеки раздел е отделено достатъчно място, а решетките с карти използват не повече от три колони.
Визуалният език на Modal е разделен на два режима: 3D светещи продуктови рендери и тъмни макети на прозорци с код. Фокусната точка е единичен 3D куб, рендиран с помощта на маркетингов градиент (от лимоненозелено до изумрудено), разположен в радиален градиентен ореол, който облива празното пространство в зелена светлина - емблематичният визуален стил на марката. Картите с работни натоварвания съдържат изометрични 3D икони (куб с телена рамка, плътно стълбище, слоеве), рендирани в същия лимоненозелен цвят на тъмен фон. Резултатите от кода и бенчмарковете са представени като карти с прозорци на терминали с точки на светофара, моношироко разположено синтаксисно подчертаване във фосфоресцентна палитра и приглушена зелена рамка - те наподобяват екранни снимки на истински интерфейс на командния ред. Логотата на клиентите се показват като ненаситени зелено-сиви етикети в един ред с нисък контраст, сигнализирайки доверие без визуална конкуренция. Общата плътност е ниска - повечето страници съдържат предимно текст, а изображенията са представени като отделни фокусни точки, а не като решетки от снимки. Няма снимки; цялата визуална система е рендирана, геометрична и сияйна.
Палитра
Марка
- 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 — Уютно огнище в нощната сървърна стая - тъмна стая, където един-единствен прасковен блясък подчертава това, което е наистина важно.