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 tekst i jedan jarko limetazeleni akcenat koji djeluje kao LED indikator statusa. Dizajnerski jezik je usmjeren na programere - prozori koda s jednostrukim razmakom i tačkicama semafora, izometrijske 3D ikone u prepoznatljivoj zelenoj boji i puno bijelog prostora, što omogućava da jedan element u svakom odjeljku svijetli. Tipografija je podijeljena između prilagođenog fonta (Goga) za naslove i varijabilnog fonta (Inter) za sve UI elemente, oba postavljena s uskim negativnim praćenjem. Boje su ravnomjerno raspoređene: većina ekrana je ahromatska, a jarko limetazelena boja pojavljuje se samo na ključnim radnjama, logotipu, 3D ilustracijama i naglašenim trenucima. Komponente su ravne i bez okvira, s dubinom stvorenom suptilnim zelenim okvirima 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 dvije kolone s opisom funkcije (tekst + kod/vizualna kartica) ili mreža kartica s tri kolone. Razmaci između odjeljaka su izdašni - 80px. Stranica se naizmjenično sastoji od dubokih praznih (#000000) i nešto svjetlijih pozadinskih (#181818) pruga, s jednim svijetlim dijelom (#def0dd) koji se pojavljuje na 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 linkova. Gustoća teksta je ugodna: svakom odjeljku je dato dovoljno prostora, a mreže kartica koriste najviše tri kolone.
Modalov vizualni jezik podijeljen je u dva načina: 3D svjetleće rendere proizvoda i tamne makete prozora koda. Fokusna tačka je jedna 3D kocka prikazana korištenjem marketinškog gradijenta (od lime zelene do smaragdne), postavljena unutar radijalnog gradijentnog oreola koji obasjava prazan prostor zelenom svjetlošću - prepoznatljivim vizualnim stilom brenda. Kartice radnog opterećenja sadrže izometrijske 3D ikone (žičani model kocke, čvrsto stepenište, slojevi) prikazane u istoj lime zelenoj boji na tamnoj pozadini. Rezultati koda i benchmarka predstavljeni su kao kartice prozora terminala sa semaforskim tačkama, monospaced sintaktičkim isticanjem u fosforescentnoj paleti i prigušenim zelenim okvirom - podsjećaju na snimke ekrana pravog interfejsa komandne linije. Logotipi klijenata prikazani su kao nezasićene zeleno-sive oznake u jednom redu niskog kontrasta, signalizirajući povjerenje bez vizualne konkurencije. Ukupna gustoća je niska - većina stranica sadrži pretežno tekst, a slike su predstavljene kao pojedinačne fokalne tačke, a ne kao mreže fotografija. Nema fotografija; cijeli vizualni sistem je prikazan, geometrijski i blistav.
Paleta
Brend
- Lime Pulse
#7fee64— Glavni elementi korporativnog identiteta su logo, glavni poziv na akciju (CTA), popunjavanje tagova, aktivna stanja i osnovna boja ilustracije.
Neutralno
- Phosphor White
#ddffdc— Glavni tekst, boja naslova, obris ikone i ispunjeni tekst dugmeta čine glavnu čitljivu površinu. - Void Black
#000000— Platno stranice, najdublji sloj pozadine - Ground Iron
#181818— Ispunjavanje glavnog dugmeta, površine kartica u tamnim područjima, osnovna površina korisničkog interfejsa. - Carbon Veil
#212525— Uzdignute površine, navigacijska pozadina, nešto svjetlija od tla. - Circuit Border
#485346— Okvir/fantomska 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 H1–H4 naslove i kartice. Goga je prilagođeni geometrijski sans-serif font s uskim otvorima i blago kvadratnim završetcima. Srednja debljina (500) je rezervirana za isticanje naslova na nivou kartice; normalna debljina (400) se koristi za naslove glavnih elemenata i odjeljaka. Da biste pristupili alternativnim oblicima glifova koji definiraju identitet Modala, njegov stilski set 'ss01' mora biti omogućen. Negativni razmak između slova postepeno se smanjuje od -0,007em na 48px do -0,017em na 21px.
- Inter Variable — zamjena: Inter · obrisi 400, 500 · Korisnički interfejs i tekst teksta – navigacija, dugmad, tekst teksta, oznake, podnožje. Srednja debljina (500) se koristi prema zadanim postavkama za interaktivne elemente i navigaciju; normalna (400) se koristi za paragrafe. Razmak između slova je primjetno smanjen čak i pri malim veličinama (-0,026em na 14px, -0,022em na 16px), što interfejsu 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 dugmeta | 12px |
| Radijus kartice | 8px |
| Sjene | ne - okviri umjesto sjena |
| Između sekcija | 80px |
| Širina stranice | 1280px |
Vještačka inteligencija će izgraditi vašu web stranicu u Modal stilu i popuniti je
- Popunite proizvodima i objavama putem linka - Instagram, TikTok, Facebook.
- Prenesite sadržaj sa vaše stare stranice - samo navedite adresu.
- Moderan dizajn na najboljem engine-u: React ( Next.js) sa serverskim renderovanjem i SEO optimizacijom odmah po instalaciji.
- Potpuno automatizirana SEO optimizacija za rezultate pretrage i preporuke neuronskih mreža.
Slični stilovi
- Slash — Ponoćni trezor sa pozlaćenim knjigama
- AgentQL — Sjeverna svjetlost iznad terminala noću
- GitHub — Svemirska komandna ploča s bioluminiscentnim kontrolnim tačkama - taman, atmosferski radni prostor gdje jedan zeleni sjaj pokazuje put naprijed.
- Doppler — Ljubičasto osvjetljenje trezora u ponoć. Gotovo crno platno svijetli jednim signalom boje lavande i zelenim svjetlom za potvrdu, svaka površina je dovoljno zakrivljena da se može uhvatiti.
- Basedash — Ponoćni podatkovni terminal s mat fontom. Mračna opservatorija gdje metrike svijetle ljubičasto i zeleno, serifni naslovi lebde iznad buke, a bijela dugmad 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 anarhijska svjetlost
- Astro — Kontrola misije dubokog svemira s jednim ljubičastim sjajem iz magline
- Wayfinder — Crni filmski ekran sa jedva čujnim naslovom koji lebdi iznad žive ilustracije. Interfejs je klizač za podešavanje svjetline, a ne kontrolna ploča.
- HashiCorp — Kontrolna soba u ponoć s ljubičastim neonom je tamna tehnička površina gdje sjajna heksagonalna 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.