Modal
Fosforescencinis terminalas tamsioje serverių patalpoje – vienintelis šviesos šaltinis yra ryškiai žalia spalva
Modalinės funkcijos primena fosforescuojantį terminalą tamsioje serverių patalpoje: beveik juoda drobė, šviesiai žalias šriftas ir vienas ryškiai gelsvai žalias akcentas, kuris veikia kaip LED būsenos indikatorius. Dizaino kalba orientuota į kūrėjus – vienodo tarpo kodo langai su šviesoforo taškais, izometrinės 3D piktogramos firminėje žalioje spalvoje ir daug baltos erdvės, leidžiančios švytėti vienam elementui kiekvienoje sekcijoje. Tipografija padalinta į pasirinktinį šriftą („Goga“) antraštėms ir kintamą šriftą („Inter“) visiems vartotojo sąsajos elementams, abiem atvejais nustatytas siauras neigiamas sekimas. Spalvos paskirstytos tolygiai: dauguma ekranų yra achromatiniai, o ryškiai gelsvai žalia spalva rodoma tik pagrindiniams veiksmams, logotipui, 3D iliustracijoms ir akcentuojamiems momentams. Komponentai yra plokšti ir berėmės, o gylis sukuriamas subtiliais žaliais rėmeliais ir fono suliejimu, o ne šešėliais.
Modalinis langas turiniui talpinti naudoja viso pločio tamsų išdėstymą, kurio maksimalus plotis yra 1280 pikselių. Pagrindinis langas yra centruotas: pavadinimas (pirmas sakinys gelsvai žalios spalvos), paantraštė, du raginimai veikti ir vienas 3D objektas kaip vizualinis inkaras – neatskiriant išdėstymo nuo šoninės juostos. Turinio skyriai laikosi vienodo ritmo: antakio žymė (didžiosios raidės, Moss 70) → Goga pavadinimas → prislopintas pagrindinis tekstas, tada arba dviejų stulpelių išdėstymas su funkcijos aprašymu (tekstas + kodas / vaizdinė kortelė), arba trijų stulpelių kortelių tinklelis. Tarpai tarp skyrių yra dideli – 80 pikselių. Puslapyje kaitaliojasi gilios tuščios (#000000) ir šiek tiek šviesesnio fono (#181818) juostelės, o viena šviesi dalis (#def0dd) rodoma puslapio viduryje kaip vizualinė pertrauka. Navigaciją sudaro viena fiksuota viršutinė juosta su neryškiu fonu – nėra šoninės juostos ar mega meniu. Poraštė yra kompaktiška ir tamsi, su prislopintomis žaliomis nuorodų stulpeliais. Teksto tankis yra patogus: kiekvienai sekcijai skirta daug vietos, o kortelių tinkleliai užima ne daugiau kaip tris stulpelius.
„Modal“ vizualinė kalba suskirstyta į du režimus: 3D švytinčių produktų vizualizacijas ir tamsaus kodo langų maketus. Pagrindinis akcentas yra vienas 3D kubas, vizualizuotas naudojant rinkodaros gradientą (nuo gelsvai žalios iki smaragdo spalvos), esantis radialiniame gradiento aureolės fone, kuris apšviečia tuščią erdvę žalia šviesa – tai firminis prekės ženklo vizualinis stilius. Darbo krūvio kortelėse yra izometrinės 3D piktogramos (karkasinis kubas, vientisi laiptai, sluoksniai), vizualizuotos ta pačia gelsvai žalia spalva tamsiame fone. Kodo ir etaloninių testų rezultatai pateikiami kaip terminalo lango kortelės su šviesoforo taškais, vienodo tarpo sintaksės paryškinimu fosforescuojančioje paletėje ir prislopinta žalia rėmeliu – jie primena tikros komandinės eilutės sąsajos ekrano kopijas. Klientų logotipai rodomi kaip nesočios žaliai pilkos etiketės vienoje mažo kontrasto eilutėje, signalizuojančioje apie pasitikėjimą be vizualinės konkurencijos. Bendras tankis yra mažas – daugumoje puslapių daugiausia yra teksto, o vaizdai pateikiami kaip atskiri akcentai, o ne nuotraukų tinkleliai. Nuotraukų nėra; visa vizualinė sistema yra vizualizuota, geometrinė ir spinduliuojanti.
Paletė
Prekės ženklas
- Lime Pulse
#7fee64— Pagrindiniai firminio identiteto elementai yra logotipas, pagrindinis raginimas veikti (CTA), žymų užpildymas, aktyvios būsenos ir pagrindinė iliustracijos spalva.
Neutralus
- Phosphor White
#ddffdc— Pagrindinis tekstas, pavadinimo spalva, piktogramos kontūras ir užpildytas mygtuko tekstas yra pagrindinė skaitoma sritis. - Void Black
#000000— Puslapio drobė, giliausias fono sluoksnis - Ground Iron
#181818— Pagrindinių mygtukų užpildymas, kortelių paviršiai tamsiose srityse, vartotojo sąsajos bazinis paviršius. - Carbon Veil
#212525— Pakeltas paviršius, navigacijos fonas, šiek tiek šviesesnis už žemę. - Circuit Border
#485346— Kontūro / vaiduoklio veiksmo rėmelis, pagrindinė interaktyvi plona linija, yra prislopinto žalsvai pilko atspalvio. - Phosphor Blue-Black
#1f2a33— Antrinės plonos žymėjimo linijos, skiriančios brūkšnius tarp tamsių juostelių.
Tipografija
nuo 12 iki 64 pikselių · 8 žingsniai
- Goga — pakeitimas: Inter Tight or Space Grotesk · kontūrai 400, 500 · Antraštės ir paantraštės šriftas – naudojamas visoms H1–H4 antraštėms ir kortelėms. „Goga“ yra pasirinktinis geometrinis šriftas be serifų su siauromis angomis ir šiek tiek kvadratiniais galais. Vidutinis storis (500) skirtas kortelės lygio antraštėms paryškinti; įprastas storis (400) naudojamas pagrindinių ir skyrių antraštėms. Norint pasiekti alternatyvias glifų formas, apibrėžiančias „Modal“ tapatybę, turi būti įjungtas jo stilistinis rinkinys „ss01“. Neigiamas raidžių tarpas palaipsniui mažėja nuo -0,007em esant 48 pikseliams iki -0,017em esant 21 pikseliui.
- Inter Variable — pakeitimas: Inter · kontūrai 400, 500 · Vartotojo sąsaja ir pagrindinis tekstas – navigacija, mygtukai, pagrindinis tekstas, etiketės, poraštė. Interaktyviems elementams ir navigacijai pagal numatytuosius nustatymus naudojamas vidutinio storio (500); pastraipoms – normalus (400). Raidžių tarpai pastebimai sumažėja net ir esant mažiems dydžiams (-0,026em esant 14 pikselių, -0,022em esant 16 pikselių), todėl sąsaja atrodo tankesnė ir galutinio tankio. Alternatyviam skyrybos ženklui turėtų būti įtrauktas simbolių variantas „cv11“. Didžiųjų raidžių etiketėse, kurių dydis yra 12 pikselių, naudojami +0,05em tarpai tarp raidžių, kad būtų kompensuojamas pagrindinio teksto tankis.
Intervalai ir forma
| Tikslas | Reikšmė |
|---|---|
| Tankis | vidutinis |
| Pagrindinis žingsnis | 20px |
| Mygtuko spindulys | 12px |
| Kortelės spindulys | 8px |
| Šešėliai | ne – rėmeliai vietoj šešėlių |
| Tarp sekcijų | 80px |
| Puslapio plotis | 1280px |
Dirbtinis intelektas sukurs jūsų svetainę Modal stiliumi ir ją užpildys
- Užpildykite produktais ir įrašais per nuorodą – Instagram, TikTok, Facebook.
- Perkelkite turinį iš senos svetainės – tiesiog nurodykite adresą.
- Modernus dizainas geriausiame variklyje: React ( Next.js) su serverio atvaizdavimu ir SEO optimizavimu iš karto.
- Visiškai automatizuotas SEO optimizavimas paieškos rezultatams ir neuroninių tinklų rekomendacijoms.
Panašūs stiliai
- Slash — Vidurnakčio skliautas su paauksuotomis sąskaitų knygomis
- AgentQL — Šiaurės pašvaistė virš terminalo naktį
- GitHub — Kosmoso valdymo pultas su bioliuminescenciniais valdymo taškais – tamsi, atmosferinė darbo vieta, kurioje vienas žalias švytėjimas rodo kelią į priekį.
- Doppler — Violetinis skliauto apšvietimas vidurnaktį. Beveik juoda drobė šviečia vienu levandų spalvos signalu ir žalia patvirtinimo šviesa, kiekvienas paviršius pakankamai išlenktas, kad būtų galima jį suimti.
- Basedash — Vidurnakčio duomenų terminalas su matiniu šriftu. Tamsi observatorija, kurioje metrika švyti violetine ir žalia spalvomis, virš triukšmo kybo antraštės su serifais, o balti tabletės formos mygtukai yra vieninteliai ryškūs objektai minkštų juodų paviršių kambaryje.
- Superwhisper — Šiaurės pašvaistė ištirpsta virš vidurnakčio stiklo
- Better Stack — Vidurnakčio SRE konsolė
- Langbase — Vidurnakčio šiaurės pašvaisčių konsolė
- Astro — Giliojo kosmoso misijos valdymo centras su vienu violetiniu ūko švytėjimu
- Wayfinder — Juodas filmo ekranas su vos girdimu pavadinimu, kybančiu virš gyvos iliustracijos. Sąsaja yra ne valdymo skydelis, o ryškumo slankiklis.
- HashiCorp — Vidurnakčio valdymo kambarys su purpuriniu neonu yra tamsus techninis paviršius, kuriame šviečiantis šešiakampis kubas yra vienintelė spalvų nuoroda.
- Umbrel — Jaukus laužavietė naktiniame serverių kambaryje – tamsiame kambaryje, kuriame viena persikinė šviesa paryškina tai, kas išties svarbu.