Modal
Fosforescentni terminal u zamračenoj serverskoj sobi - jedini izvor svjetlosti je jarko zelene boje
Modal funkcionira poput fosforescentnog terminala u zamračenoj serverskoj sobi: gotovo crno platno, blijedozeleni tip i jedan jarko limetazeleni naglasak koji djeluje kao LED indikator statusa. Dizajnerski jezik usmjeren je na programere - prozori s kodom s jednostrukim razmakom i točkicama semafora, izometrijske 3D ikone u prepoznatljivoj zelenoj boji i puno bijelog prostora, što omogućuje da jedan element u svakom odjeljku svijetli. Tipografija je podijeljena između prilagođenog fonta (Goga) za naslove i varijabilnog fonta (Inter) za sve elemente korisničkog sučelja, oba postavljena s uskim negativnim praćenjem. Boje su ravnomjerno raspoređene: većina zaslona je akromatska, a jarko limetazelena boja pojavljuje se samo na ključnim radnjama, logotipu, 3D ilustracijama i trenucima naglaska. Komponente su ravne i bez okvira, s dubinom stvorenom suptilnim zelenim rubovima i zamućenjem pozadine, a ne sjenama.
Modal koristi tamni raspored pune širine s maksimalnom širinom od 1280px za smještaj sadržaja. Glavni prozor je centriran: naslov (prva rečenica u limeta zelenoj boji), podnaslov, dva poziva na akciju i jedan 3D objekt kao vizualno sidro - bez odvajanja rasporeda od bočne trake. Odjeljci sadržaja slijede ujednačen ritam: oznaka obrve (velika slova, Moss 70) → Goga naslov → prigušeni tekst tijela, zatim ili raspored s dva stupca s opisom značajke (tekst + kod/vizualna kartica) ili mreža kartica s tri stupca. Razmaci između odjeljaka su obilni - 80px. Stranica se izmjenjuje između dubokih praznih (#000000) i nešto svjetlijih pozadinskih (#181818) pruga, s jednim svijetlim dijelom (#def0dd) koji se pojavljuje u sredini stranice kao vizualni predah. Navigacija se sastoji od jedne, fiksne gornje trake sa zamućenom pozadinom - bez bočne trake ili mega-izbornika. Podnožje je kompaktno i tamno, s prigušenim zelenim stupcima poveznica. Gustoća teksta je ugodna: svakom odjeljku je dano dovoljno prostora, a mreže kartica koriste najviše tri stupca.
Modalov vizualni jezik podijeljen je u dva načina: 3D svjetleće rendere proizvoda i tamne makete prozora koda. Središnja točka je jedna 3D kocka prikazana pomoću marketinškog gradijenta (od limeta zelene do smaragdne), postavljena unutar radijalnog gradijentnog aureola koji obasjava prazan prostor zelenim svjetlom - prepoznatljivim vizualnim stilom brenda. Kartice radnog opterećenja sadrže izometrijske 3D ikone (žičani model kocke, čvrsto stubište, slojevi) prikazane u istoj limeta zelenoj boji na tamnoj pozadini. Rezultati koda i benchmarka prikazani su kao kartice prozora terminala s točkama semafora, monospaced sintaktičkim isticanjem u fosforescentnoj paleti i prigušenim zelenim rubom - nalikuju snimkama zaslona stvarnog sučelja naredbenog retka. Logotipovi klijenata prikazani su kao nezasićene zeleno-sive oznake u jednom retku niskog kontrasta, signalizirajući povjerenje bez vizualne konkurencije. Ukupna gustoća je niska - većina stranica sadrži pretežno tekst, a slike su prikazane kao pojedinačne žarišne točke, a ne kao mreže fotografija. Nema fotografija; cijeli vizualni sustav je prikazan, geometrijski i blistav.
Paleta
Robna marka
- Lime Pulse
#7fee64— Glavni elementi korporativnog identiteta su logotip, glavni poziv na akciju (CTA), ispunjavanje oznaka, aktivna stanja i osnovna boja ilustracije.
Neutralno
- Phosphor White
#ddffdc— Glavni tekst, boja naslova, obris ikone i ispunjeni tekst gumba glavna su čitljiva površina. - Void Black
#000000— Platno stranice, najdublji sloj pozadine - Ground Iron
#181818— Ispunjavanje glavnog gumba, površine kartica u tamnim područjima, osnovna površina korisničkog sučelja. - Carbon Veil
#212525— Uzdignute površine, navigacijska pozadina, nešto svjetlija od tla. - Circuit Border
#485346— Okvir/duhovna radnja, glavna interaktivna tanka linija, je prigušene zelenkasto-sive nijanse. - Phosphor Blue-Black
#1f2a33— Sekundarne tanke linije za označavanje, koje dijele poteze između tamnih pruga.
Tipografija
od 12 do 64px · 8 koraka
- Goga — zamjena: Inter Tight or Space Grotesk · obrisi 400, 500 · Font za naslove i podnaslove – Koristi se za sve naslove i kartice H1–H4. Goga je prilagođeni geometrijski sans-serif font s uskim otvorima i blago kvadratnim završetcima. Srednja debljina (500) rezervirana je za isticanje naslova na razini kartica; normalna debljina (400) koristi se za naslove glavnih elemenata i odjeljaka. Za pristup alternativnim oblicima glifova koji definiraju identitet Modala, mora biti omogućen njegov stilski skup 'ss01'. Negativni razmak između slova postupno se smanjuje od -0,007em na 48px do -0,017em na 21px.
- Inter Variable — zamjena: Inter · obrisi 400, 500 · Korisničko sučelje i tekst teksta – navigacija, gumbi, tekst teksta, oznake, podnožje. Srednja debljina (500) koristi se prema zadanim postavkama za interaktivne elemente i navigaciju; normalna (400) koristi se za odlomke. Razmak između slova je znatno smanjen čak i pri malim veličinama (-0,026em na 14px, -0,022em na 16px), što sučelju daje sažetu, terminalnu gustoću. Za alternativnu interpunkciju treba uključiti varijantu znaka 'cv11'. Oznake napisane velikim slovima na 12px koriste razmak između slova od +0,05em kako bi se uravnotežila gustoća teksta teksta.
Intervali i forma
| Svrha | Značenje |
|---|---|
| Gustoća | prosjek |
| Osnovni korak | 20px |
| Radijus gumba | 12px |
| Radijus kartice | 8px |
| Sjene | ne - obrubi umjesto sjena |
| Između odjeljaka | 80px |
| Širina stranice | 1280px |
Umjetna inteligencija će izraditi vašu web stranicu u Modal stilu i ispuniti je
- Popunite proizvodima i objavama putem poveznice - Instagram, TikTok, Facebook.
- Prenesite sadržaj sa svoje stare web-lokacije - samo navedite adresu.
- Moderan dizajn na najboljem engineu: React ( Next.js) s renderiranjem na serveru i SEO optimizacijom odmah po instalaciji.
- Potpuno automatizirana SEO optimizacija za rezultate pretraživanja i preporuke neuronskih mreža.
Slični stilovi
- Slash — Ponoćni trezor s pozlaćenim knjigama
- AgentQL — Sjeverna svjetlost iznad terminala noću
- GitHub — Svemirska komandna ploča s bioluminiscentnim kontrolnim točkama - taman, atmosferski radni prostor gdje jedan zeleni sjaj pokazuje put naprijed.
- Doppler — Ljubičasto osvjetljenje trezora u ponoć. Gotovo crno platno svijetli jednim lavandinim signalom i zelenim svjetlom potvrde, svaka površina dovoljno zakrivljena da se može uhvatiti.
- Basedash — Ponoćni podatkovni terminal s mat fontom. Mračni opservatorij gdje metrike svijetle ljubičasto i zeleno, serifni naslovi lebde iznad buke, a bijeli gumbi u obliku tableta jedini su svijetli objekti u sobi s mekim crnim površinama.
- Superwhisper — Sjeverna svjetla se rastvaraju nad ponoćnim staklom
- Better Stack — Ponoćna SRE konzola
- Langbase — Konzola Ponoćna sjeverna svjetla
- Astro — Kontrola misije dubokog svemira s jednim ljubičastim sjajem iz maglice
- Wayfinder — Crni filmski ekran s jedva čujnim naslovom koji lebdi iznad žive ilustracije. Sučelje je klizač za svjetlinu, a ne upravljačka ploča.
- HashiCorp — Kontrolna soba u ponoć s ljubičastim neonom je tamna tehnička površina gdje svjetleća šesterokutna kocka služi kao jedina referenca boje.
- Umbrel — Ugodno ognjište u noćnoj serverskoj sobi - mračnoj sobi u kojoj jedan breskvasti sjaj ističe ono što je zaista važno.