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 е прилагоден геометриски sans-serif фонт со тесни отвори и малку квадратни терминали. Средната тежина (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 — Удобно огниште во ноќната серверска соба - темна соба каде што еден праскав сјај го истакнува она што е навистина важно.