Modal
Fosforescentni terminal v zatemnjeni strežniški sobi - edini vir svetlobe je svetlo zelene barve
Modal deluje kot fosforescentni terminal v zatemnjeni strežniški sobi: skoraj črno platno, bledo zelena pisava in en sam svetel limetino zelen poudarek, ki deluje kot LED indikator stanja. Oblikovalski jezik je osredotočen na razvijalce – okna kode z enojnim razmikom prostora s pikami semaforja, izometrične 3D-ikone v značilni zeleni barvi in veliko belega prostora, ki omogoča, da en element v vsakem razdelku sveti. Tipografija je razdeljena med pisavo po meri (Goga) za naslove in spremenljivo pisavo (Inter) za vse elemente uporabniškega vmesnika, obe pa sta nastavljeni z ozkim negativnim sledenjem. Barve so enakomerno porazdeljene: večina zaslonov je akromatskih, svetlo limetino zelena barva pa se pojavi le na ključnih dejanjih, logotipu, 3D-ilustracijah in poudarjenih trenutkih. Komponente so ravne in brez okvirja, globina pa je ustvarjena s subtilnimi zelenimi robovi in zameglitvijo ozadja namesto s sencami.
Modalno okno uporablja temno postavitev polne širine z največjo širino 1280 slikovnih pik za namestitev vsebine. Okno junaka je centrirano: naslov (prvi stavek v limetno zeleni barvi), podnaslov, dva poziva k dejanju in en 3D-predmet kot vizualno sidro – brez ločevanja postavitve od stranske vrstice. Razdelki z vsebino sledijo enotnemu ritmu: oznaka za obrvi (velike tiskane črke, Moss 70) → naslov Goga → utišano besedilo telesa, nato bodisi dvostolpčna postavitev z opisom funkcije (besedilo + koda/vizualna kartica) bodisi tristolpčna mreža kartic. Žlebovi med razdelki so obsežni – 80 slikovnih pik. Stran se izmenjuje med globokimi praznimi (#000000) in nekoliko svetlejšimi črtami ozadja (#181818), pri čemer se na sredini strani pojavi en svetel odsek (#def0dd) kot vizualni oddih. Navigacija je sestavljena iz ene same fiksne zgornje vrstice z zamegljenim ozadjem – brez stranske vrstice ali mega menija. Noga je kompaktna in temna, z utišanimi zelenimi stolpci povezav. Gostota besedila je udobna: vsakemu razdelku je namenjenega dovolj prostora, mreže kartic pa ne uporabljajo več kot treh stolpcev.
Modalov vizualni jezik je razdeljen na dva načina: 3D-upodobitve izdelkov s svetlečimi odtenki in temne makete oken s kodo. Osrednja točka je ena sama 3D-kocka, upodobljena z uporabo marketinškega gradienta (od limetno zelene do smaragdne), postavljena znotraj radialnega gradientnega haloja, ki prazen prostor oblije z zeleno svetlobo – značilni vizualni slog blagovne znamke. Kartice z delovnimi obremenitvami vsebujejo izometrične 3D-ikone (žična kocka, trdno stopnišče, plasti), upodobljene v isti limetno zeleni barvi na temnem ozadju. Rezultati kode in primerjalnih testov so predstavljeni kot kartice terminalskih oken s pikami semaforja, enorazporeditvenim označevanjem sintakse v fosforescentni paleti in utišanim zelenim robom – spominjajo na posnetke zaslona pravega vmesnika ukazne vrstice. Logotipi strank so prikazani kot nenasičene zeleno-sive oznake v eni sami vrstici z nizkim kontrastom, kar signalizira zaupanje brez vizualne konkurence. Skupna gostota je nizka – večina strani vsebuje pretežno besedilo, slike pa so predstavljene kot posamezne žariščne točke in ne kot mreže fotografij. Fotografij ni; celoten vizualni sistem je upodobljen, geometrijski in sijoč.
Paleta
Blagovna znamka
- Lime Pulse
#7fee64— Glavni elementi celostne grafične podobe so logotip, glavni poziv k dejanju (CTA), zapolnitev oznak, aktivna stanja in osnovna barva ilustracije.
Nevtralno
- Phosphor White
#ddffdc— Glavno besedilo, barva naslova, obris ikone in zapolnjeno besedilo gumba so glavna berljiva površina. - Void Black
#000000— Platno strani, najgloblja plast ozadja - Ground Iron
#181818— Polnilo glavnega gumba, površine kartic v temnih območjih, osnovna površina uporabniškega vmesnika. - Carbon Veil
#212525— Dvignjene površine, navigacijsko ozadje, nekoliko svetlejše od tal. - Circuit Border
#485346— Okvir/okvirje za obris/prividno dejanje, glavna interaktivna tanka črta, je v umirjenem zelenkasto-sivem odtenku. - Phosphor Blue-Black
#1f2a33— Sekundarne tanke označevalne črte, ki ločujejo poteze med temnimi črtami.
Tipografija
od 12 do 64 slikovnih pik · 8 korakov
- Goga — zamenjava: Inter Tight or Space Grotesk · obrisi 400, 500 · Pisava za naslove in podnaslove – uporablja se za vse naslove in kartice H1–H4. Goga je geometrijska pisava sans-serif po meri z ozkimi odprtinami in rahlo kvadratnimi konci. Srednja debelina (500) je rezervirana za označevanje naslovov na ravni kartic; normalna debelina (400) se uporablja za naslove glavnih elementov in razdelkov. Za dostop do alternativnih oblik glifov, ki določajo identiteto Modala, mora biti omogočen njegov slogovni nabor 'ss01'. Negativni razmik med črkami se postopoma zmanjšuje od -0,007em pri 48px do -0,017em pri 21px.
- Inter Variable — zamenjava: Inter · obrisi 400, 500 · Uporabniški vmesnik in besedilo besedila – navigacija, gumbi, besedilo besedila, oznake, noga. Za interaktivne elemente in navigacijo se privzeto uporablja srednja debelina (500); za odstavke se uporablja normalna debelina (400). Razmik med črkami se opazno zmanjša tudi pri majhnih velikostih (-0,026 em pri 14 slikovnih pikah, -0,022 em pri 16 slikovnih pikah), kar vmesniku daje zgoščeno, končno gostoto. Za alternativna ločila je treba vključiti različico znaka 'cv11'. Oznake z velikimi črkami pri 12 slikovnih pikah uporabljajo razmik med črkami +0,05 em za uravnoteženje gostote besedila besedila.
Intervali in oblika
| Namen | Pomen |
|---|---|
| Gostota | povprečje |
| Osnovni korak | 20px |
| Polmer gumba | 12px |
| Polmer kartice | 8px |
| Sence | ne - obrobe namesto senc |
| Med odseki | 80px |
| Širina strani | 1280px |
Umetna inteligenca bo zgradila vašo spletno stran v slogu Modal in jo napolnila
- Polnite z izdelki in objavami prek povezave - Instagram, TikTok, Facebook.
- Prenesite vsebino s starega spletnega mesta – samo navedite naslov.
- Sodoben dizajn na najboljšem iskalniku: React ( Next.js) z vnaprej pripravljenim upodabljanjem na strežniku in optimizacijo za SEO.
- Popolnoma avtomatizirana SEO optimizacija za rezultate iskanja in priporočila nevronskih mrež.
Podobni slogi
- Slash — Polnočni trezor z pozlačenimi knjigami
- AgentQL — Severni sij nad terminalom ponoči
- GitHub — Vesoljska komandna plošča z bioluminiscenčnimi kontrolnimi točkami – temen, atmosferski delovni prostor, kjer en sam zelen sij kaže pot naprej.
- Doppler — Vijolična osvetlitev trezorja ob polnoči. Skoraj črno platno žari z enim samim sivkinim signalom in zeleno potrditveno lučjo, vsaka površina pa je dovolj ukrivljena, da jo je mogoče oprijeti.
- Basedash — Polnočni podatkovni terminal z mat pisavo. Temna opazovalnica, kjer metrike žarijo vijolično in zeleno, serifni naslovi lebdijo nad hrupom, beli gumbi v obliki tablet pa so edini svetli predmeti v sobi z mehkimi črnimi površinami.
- Superwhisper — Severni sij se razblini nad polnočnim steklom
- Better Stack — Konzola polnočne SRE
- Langbase — Konzola polnočnega severnega sija
- Astro — Nadzor misije v globokem vesolju z enim samim vijoličnim sijem iz meglice
- Wayfinder — Črno filmsko platno s komaj slišnim naslovom, ki lebdi nad živo ilustracijo. Vmesnik je drsnik za svetlost in ne nadzorna plošča.
- HashiCorp — Kontrolna soba ob polnoči z vijoličnim neonom je temna tehnična površina, kjer žareča šesterokotna kocka služi kot edina barvna referenca.
- Umbrel — Prijetno ognjišče v nočni strežniški sobi – temna soba, kjer en sam breskev sij poudarja tisto, kar je resnično pomembno.