Modal
Fosforescējošs terminālis aptumšotā serveru telpā — vienīgais gaismas avots ir spilgti zaļa krāsa
Modālais fons darbojas kā fosforescējošs terminālis aptumšotā serveru telpā: gandrīz melns audekls, gaiši zaļš burts un viens spilgti laima zaļš akcents, kas darbojas kā LED statusa indikators. Dizaina valoda ir orientēta uz izstrādātājiem — vienrindu koda logi ar luksofora punktiem, izometriskas 3D ikonas raksturīgajā zaļajā krāsā un daudz baltas vietas, kas ļauj mirdzēt vienam elementam katrā sadaļā. Tipogrāfija ir sadalīta starp pielāgotu fontu (Goga) virsrakstiem un mainīgu fontu (Inter) visiem lietotāja interfeisa elementiem, abiem iestatītiem ar šauru negatīvu izsekošanu. Krāsas ir vienmērīgi sadalītas: lielākā daļa ekrānu ir ahromatiski, un spilgti laima zaļā krāsa parādās tikai galvenajām darbībām, logotipam, 3D ilustrācijām un uzsvara punktiem. Komponenti ir plakani un bez rāmjiem, dziļumu rada smalkas zaļas apmales un fona izpludināšana, nevis ēnas.
Modālais logs satura izvietošanai izmanto pilna platuma tumšu izkārtojumu ar maksimālo platumu 1280 pikseļi. Galvenais logs ir centrēts: virsraksts (pirmais teikums laima zaļā krāsā), apakšvirsraksts, divi aicinājumi uz darbību un viens 3D objekts kā vizuāls enkurs — neatdalot izkārtojumu no sānu joslas. Satura sadaļas seko vienotam ritmam: uzacu birka (lielie burti, Moss 70) → Goga virsraksts → klusināts pamatteksts, pēc tam vai nu divu kolonnu izkārtojums ar funkcijas aprakstu (teksts + kods/vizuālā kartīte), vai trīs kolonnu kartīšu režģis. Atstarpes starp sadaļām ir dāsnas — 80 pikseļi. Lapā mainās dziļas tukšas svītras (#000000) un nedaudz gaišāka fona (#181818) svītras, un viena gaiša sadaļa (#def0dd) parādās lapas vidū kā vizuāls pārtraukums. Navigāciju veido viena, fiksēta augšējā josla ar izplūdušu fonu — nav sānu joslas vai mega izvēlnes. Kājene ir kompakta un tumša, ar klusinātām zaļām saišu kolonnām. Teksta blīvums ir ērts: katrai sadaļai ir atvēlēta pietiekami daudz vietas, un karšu režģi izmanto ne vairāk kā trīs kolonnas.
Modal vizuālā valoda ir sadalīta divos režīmos: 3D mirdzošu produktu renderējumi un tumša koda loga maketi. Galvenais elements ir viens 3D kubs, kas renderēts, izmantojot mārketinga gradientu (no laima zaļas līdz smaragdzaļai), kas ievietots radiālā gradienta oreolā, kas tukšo telpu apspīd zaļā gaismā — zīmola raksturīgais vizuālais stils. Darba slodzes kartītes satur izometriskas 3D ikonas (karkasa kubs, nepārtrauktas kāpnes, slāņi), kas renderētas tādā pašā laima zaļā krāsā uz tumša fona. Koda un etalonu rezultāti tiek attēloti kā termināļa logu kartītes ar luksofora punktiem, vienrindas sintaktisku izcelšanu fosforescējošā paletē un klusinātu zaļu apmali — tie atgādina reālas komandrindas saskarnes ekrānuzņēmumus. Klientu logotipi tiek attēloti kā nepiesātināti zaļganpelēkas etiķetes vienā, zema kontrasta rindā, signalizējot par uzticību bez vizuālas konkurences. Kopējais blīvums ir zems — lielākā daļa lapu galvenokārt satur tekstu, un attēli tiek attēloti kā atsevišķi fokusa punkti, nevis fotoattēlu režģi. Nav fotogrāfiju; visa vizuālā sistēma ir renderēta, ģeometriska un starojoša.
Palete
Zīmols
- Lime Pulse
#7fee64— Korporatīvās identitātes galvenie elementi ir logotips, galvenais aicinājums uz darbību (CTA), tagu aizpildīšana, aktīvie stāvokļi un ilustrācijas pamatkrāsa.
Neitrāls
- Phosphor White
#ddffdc— Galvenais teksts, virsraksta krāsa, ikonas kontūra un aizpildītais pogas teksts ir galvenā lasāmā virsma. - Void Black
#000000— Lapas audekls, dziļākais fona slānis - Ground Iron
#181818— Galvenās pogas aizpildījums, karšu virsmas tumšajās zonās, lietotāja saskarnes pamatvirsma. - Carbon Veil
#212525— Paaugstinātas virsmas, navigācijas fons, nedaudz gaišāks par zemi. - Circuit Border
#485346— Kontūras/spoku darbības rāmis, galvenā interaktīvā plānā līnija, ir klusinātā zaļgani pelēkā tonī. - Phosphor Blue-Black
#1f2a33— Sekundāras plānas marķēšanas līnijas, kas sadala triepienus starp tumšām svītrām.
Tipogrāfija
no 12 līdz 64 pikseļiem · 8 soļi
- Goga — nomaiņa: Inter Tight or Space Grotesk · kontūras 400, 500 · Virsrakstu un apakšvirsrakstu fonts — tiek izmantots visiem H1–H4 virsrakstiem un kartītēm. Goga ir pielāgots ģeometrisks sans-serif fonts ar šaurām atverēm un nedaudz kvadrātveida galiem. Vidējais biezums (500) ir paredzēts karšu līmeņa virsrakstu izcelšanai; parastais biezums (400) tiek izmantots varoņu un sadaļu virsrakstiem. Lai piekļūtu alternatīvajām glifu formām, kas nosaka Modal identitāti, ir jāiespējo tā stilistiskā kopa “ss01”. Negatīvā burtu atstarpe pakāpeniski samazinās no -0,007 em pie 48 px līdz -0,017 em pie 21 px.
- Inter Variable — nomaiņa: Inter · kontūras 400, 500 · Lietotāja saskarne un pamatteksts — navigācija, pogas, pamatteksts, etiķetes, kājene. Interaktīviem elementiem un navigācijai pēc noklusējuma tiek izmantots vidējais biezums (500); rindkopām — parastais biezums (400). Burtu atstarpe ir ievērojami samazināta pat pie maziem izmēriem (-0,026 em pie 14 px, -0,022 em pie 16 px), piešķirot saskarnei saīsinātu, terminālu blīvumu. Alternatīvai pieturzīmju lietošanai jāiekļauj rakstzīmju variants “cv11”. Lielo burtu etiķetēm ar izmēru 12 px tiek izmantota +0,05 em burtu atstarpe, lai līdzsvarotu pamatteksta blīvumu.
Intervāli un forma
| Mērķis | Nozīme |
|---|---|
| Blīvums | vidēji |
| Pamata solis | 20px |
| Pogas rādiuss | 12px |
| Kartes rādiuss | 8px |
| Ēnas | nē — robežas ēnu vietā |
| Starp sekcijām | 80px |
| Lapas platums | 1280px |
Mākslīgais intelekts izveidos jūsu vietni Modal stilā un aizpildīs to
- Aizpildiet ar produktiem un ierakstiem, izmantojot saiti — Instagram, TikTok, Facebook.
- Pārsūtiet saturu no savas vecās vietnes — vienkārši norādiet adresi.
- Moderns dizains uz labākā dzinēja: React ( Next.js) ar servera renderēšanu un SEO optimizāciju uzreiz pēc instalēšanas.
- Pilnībā automatizēta SEO optimizācija meklēšanas rezultātiem un neironu tīkla ieteikumiem.
Līdzīgi stili
- Slash — Pusnakts velve ar apzeltītiem grāmatvedības žurnāliem
- AgentQL — Ziemeļblāzma virs termināļa naktī
- GitHub — Kosmosa komandu panelis ar bioluminiscējošiem vadības punktiem — tumša, atmosfēriska darba vieta, kur viena zaļa gaisma norāda ceļu uz priekšu.
- Doppler — Velves violetais apgaismojums pusnaktī. Gandrīz melnais audekls mirdz ar vienu lavandas signālu un zaļu apstiprinājuma gaismu, katra virsma pietiekami izliekta, lai to varētu satvert.
- Basedash — Pusnakts datu terminālis ar matētu fontu. Tumša observatorija, kur metrikas mirdz violetā un zaļā krāsā, virs trokšņa peld serifiski virsraksti, un baltas tabletes formas pogas ir vienīgie spilgtie objekti telpā ar mīkstām, melnām virsmām.
- Superwhisper — Ziemeļblāzma izkūst virs pusnakts stikla
- Better Stack — Pusnakts SRE konsole
- Langbase — Pusnakts ziemeļblāzmas konsole
- Astro — Dziļā kosmosa misijas vadības centrs ar vienu violetu mirdzumu no miglāja
- Wayfinder — Melns filmas ekrāns ar tikko dzirdamu nosaukumu, kas lidinās virs dzīvas ilustrācijas. Saskarne ir spilgtuma slīdnis, nevis vadības panelis.
- HashiCorp — Vadības telpa pusnaktī ar violetu neonu ir tumša tehniska virsma, kur mirdzošs sešstūra kubs kalpo kā vienīgā krāsu atsauce.
- Umbrel — Mājīga ugunskura vieta nakts serveru telpā — tumšā telpā, kur viena persiku krāsas blāzma izceļ to, kas patiesi ir svarīgs.