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 — Утульны ачаг у начны сервернай - цёмнае памяшканне, дзе адзіны персікавы водбліск паказвае на тое, што сапраўды важна.