Modal
Terminal fosforeszente bat zerbitzari-gela ilun batean - argi-iturri bakarra berde biziko kolorea da
Modalak zerbitzari-gela ilun batean terminal fosforeszente baten antzera funtzionatzen du: mihise ia beltza, letra berde zurbilak eta LED egoera-adierazle gisa jarduten duen lima-berde distiratsu azentu bakarra. Diseinu-lengoaia garatzaileengan oinarritzen da: semaforo-puntudun kode-leiho monoespaziatuak, berde bereizgarrian dauden 3D ikono isometrikoak eta espazio zuri ugari, atal bakoitzeko elementu bati distira egiteko aukera emanez. Tipografia letra-tipo pertsonalizatu baten (Goga) artean banatzen da izenburuetarako eta letra-tipo aldakor baten (Inter) artean UI elementu guztietarako, biak jarraipen negatibo estuarekin ezarrita. Koloreak uniformeki banatzen dira: pantaila gehienak akromatikoak dira, eta lima-berde kolore distiratsua ekintza nagusietan, logotipoan, 3D ilustrazioetan eta enfasi-uneetan bakarrik agertzen da. Osagaiak lauak eta markorik gabekoak dira, sakontasuna itzalen ordez ertz berde sotilen eta atzeko planoaren lausotzearen bidez sortuz.
Modalak diseinu ilun zabalera osokoa erabiltzen du, gehienez 1280px-ko zabalerarekin edukia hartzeko. Leiho nagusia erdian dago: izenburua (lehen esaldia lima berdez), azpititulu bat, bi ekintzarako dei eta 3D objektu bakarra aingura bisual gisa —diseinua alboko barratik bereizi gabe—. Eduki-atalek erritmo uniforme bat jarraitzen dute: bekain-etiketa (letra larriz, Moss 70) → Goga izenburua → gorputz-testu isila, eta gero bi zutabeko diseinua funtzio-deskribapen batekin (testua + kodea/txartel bisuala) edo hiru zutabeko txartel-sareta. Atalen arteko lerroak zabalak dira —80px—. Orrialdeak marra huts sakonak (#000000) eta atzeko plano apur bat argiagoak (#181818) ditu txandaka, atal argi bat (#def0dd) orriaren erdian agertzen delarik arnasa hartzeko atsedenaldi bisual gisa. Nabigazioa goiko barra finko bakarraz osatuta dago, atzeko plano lauso batekin —ez alboko barrarik ez mega-menurik—. Orri-oina trinkoa eta iluna da, esteka-zutabe berde isilekin. Testu-dentsitatea erosoa da: atal bakoitzari leku nahikoa ematen zaio, eta txartel-sareek ez dituzte hiru zutabe baino gehiago erabiltzen.
Modalen hizkuntza bisuala bi modutan banatzen da: 3D produktuen errendatze distiratsuak eta kode leiho ilunen maketak. Foku-puntua marketin gradiente bat erabiliz errendatutako 3D kubo bakarra da (limoi berdetik esmeraldara), espazio hutsa argi berdez bainatzen duen gradiente erradial baten barruan kokatua —markaren estilo bisual bereizgarria—. Lan-karga txartelek 3D ikono isometrikoak dituzte (alanbre-marko kubo bat, eskailera solido bat, geruzak), atzeko plano ilun baten aurrean limoi berde berean errendatutakoak. Kodearen eta erreferentziako emaitzak terminal leihoko txartel gisa aurkezten dira, semaforo puntuekin, paleta fosforeszente batean tarte bakarreko sintaxi nabarmentzearekin eta ertz berde isil batekin —komando-lerroko interfaze erreal baten pantaila-argazkiak dirudite—. Bezeroen logotipoak etiketa berde-gris desaturatu gisa bistaratzen dira errenkada bakarrean, kontraste txikikoetan, lehia bisualik gabeko konfiantza adieraziz. Dentsitate orokorra baxua da —orrialde gehienek testua dute nagusiki, eta irudiak foku-puntu indibidual gisa aurkezten dira, argazki-sareen ordez. Ez dago argazkirik; sistema bisual osoa errendatua, geometrikoa eta distiratsua da.
Paleta
Marka
- Lime Pulse
#7fee64— Enpresa-identitatearen elementu nagusiak hauek dira: logotipoa, ekintzarako dei nagusia (CTA), etiketa-betetzea, egoera aktiboak eta ilustrazioaren oinarrizko kolorea.
Neutroa
- Phosphor White
#ddffdc— Testu nagusia, izenburuaren kolorea, ikonoen eskema eta botoi beteen testua dira irakurtzeko gainazal nagusia. - Void Black
#000000— Orrialdearen mihisea, atzeko planoaren geruza sakonena - Ground Iron
#181818— Botoi nagusiaren betegarria, txartelen gainazalak eremu ilunetan, erabiltzailearen interfazearen oinarrizko gainazala. - Carbon Veil
#212525— Gainazal altxatuak, nabigazio atzeko planoa, lurra baino apur bat argiagoak. - Circuit Border
#485346— Eskema/mamu ekintza-markoa, lerro mehe interaktibo nagusia, tonu berde-gris isila da. - Phosphor Blue-Black
#1f2a33— Bigarren mailako markaketa-lerro meheak, marra ilunen arteko trazuak banatzen dituztenak.
Tipografia
12tik 64px-ra · 8 urrats
- Goga — ordezkapena: Inter Tight or Space Grotesk · eskemak 400, 500 · Izenburu eta Azpitituluen Letra-tipoa – H1–H4 izenburu eta txartel guztietarako erabiltzen da. Goga sans-serif letra-tipo geometriko pertsonalizatua da, irekidura estuekin eta terminal karratu samarrak dituena. Pisu ertaina (500) txartel-mailako izenburuak nabarmentzeko gordeta dago; pisu normala (400) heroi eta atal izenburuetarako erabiltzen da. Modalen identitatea definitzen duten glifo alternatiboak atzitzeko, 'ss01' estilo-multzoa gaituta egon behar da. Letra-tarte negatiboa pixkanaka jaisten da -0,007em-tik 48px-tan -0,017em-ra 21px-tan.
- Inter Variable — ordezkapena: Inter · eskemak 400, 500 · Erabiltzaile interfazea eta gorputzaren testua – nabigazioa, botoiak, gorputzaren testua, etiketak, oina. Elementu interaktiboetarako eta nabigaziorako pisu ertaina (500) erabiltzen da lehenespenez; paragrafoetarako normala (400). Letren arteko tartea nabarmen murrizten da tamaina txikietan ere (-0,026em 14px-tan, -0,022em 16px-tan), interfazeari dentsitate trinkotu eta terminala emanez. Puntuazio alternatiboa lortzeko, 'cv11' karakterearen aldaera sartu beharko litzateke. 12px-tan letra larriz idatzitako etiketek +0,05em letren arteko tartea erabiltzen dute gorputzaren testuaren dentsitatea orekatzeko.
Tarteak eta forma
| Helburua | Esanahia |
|---|---|
| Dentsitatea | batez bestekoa |
| Oinarrizko urratsa | 20px |
| Botoiaren erradioa | 12px |
| Txartelaren erradioa | 8px |
| Itzalak | ez - itzalen ordez ertzak |
| Atalen artean | 80px |
| Orriaren zabalera | 1280px |
Adimen artifizialak zure webgunea Modal estiloan eraikiko du eta beteko du
- Bete produktu eta argitalpenekin estekaren bidez - Instagram, TikTok, Facebook.
- Transferitu edukia zure gune zaharretik: zehaztu helbidea.
- Diseinu modernoa motor onenean: React ( Next.js) zerbitzariaren errendatzearekin eta SEO optimizazioarekin hasieratik.
- Bilaketa-emaitzetarako eta sare neuronalen gomendioetarako SEO optimizazio guztiz automatizatua.
Estilo antzekoak
- Slash — Gauerdiko ganga urreztatutako kontabilitate-liburuekin
- AgentQL — Iparraldeko argiak terminalaren gainean gauez
- GitHub — Kontrol-puntu biolumineszenteak dituen espazio-aginte-panel bat —lan-eremu ilun eta atmosferikoa, non distira berde bakar batek aurrera egiteko bidea adierazten duen.
- Doppler — Gangaren argi morea gauerdian. Ia mihise beltza izpiliku koloreko seinale bakarrarekin eta baieztapen-argi berde batekin distiratzen da, gainazal guztiak nahikoa kurbatuta heltzeko moduan.
- Basedash — Gauerdiko datu-terminal bat, letra-tipo matearekin. Behatoki ilun bat, non metrikak more eta berdez distiratzen diren, serif izenburuak zarataren gainetik flotatzen diren, eta pilula itxurako botoi zuriak diren objektu distiratsu bakarrak gainazal beltz leunez osatutako gela batean.
- Superwhisper — Iparraldeko argiak gauerdiko kristalaren gainean desegiten dira
- Better Stack — Gauerdiko SRE kontsola
- Langbase — Gauerdiko Ipar Argien kontsola
- Astro — Espazio Sakoneko Misioaren Kontrola, nebulosa bateko distira more bakarrarekin
- Wayfinder — Ilustrazio bizidun baten gainean ia entzun ezin den izenburu bat duen film-pantaila beltz bat. Interfazea kontrol-panel bat baino distira-graduatzaile bat da.
- HashiCorp — Gauerdiko kontrol-gela neon morearekin gainazal tekniko ilun bat da, non kubo hexagonal distiratsu batek kolore-erreferentzia bakarra duen.
- Umbrel — Gaueko zerbitzari-gelan su-hobi eroso bat —gela ilun bat, non distira bakar batek benetan garrantzitsua dena nabarmentzen duen.