Modal
Fosforoiva terminaali pimennetyssä palvelinhuoneessa - ainoa valonlähde on kirkkaanvihreä väri
Modaali toimii kuin fosforoiva terminaali pimennetyssä palvelinhuoneessa: lähes musta kangas, vaaleanvihreä kirjasin ja yksi kirkas limenvihreä korostus, joka toimii LED-tilan ilmaisimena. Muotoilukieli on kehittäjäkeskeinen – kiinteäväliset koodi-ikkunat liikennevaloilla, isometriset 3D-kuvakkeet tunnusomaisessa vihreässä värissä ja runsaasti tyhjää tilaa, jonka ansiosta yksi elementti kussakin osiossa voi hehkua. Typografia on jaettu otsikoiden mukautettuun fonttiin (Goga) ja kaikkien käyttöliittymäelementtien muuttuvaan fonttiin (Inter), joissa molemmissa on kapea negatiivinen seuranta. Värit jakautuvat tasaisesti: useimmat näytöt ovat akromaattisia, ja kirkas limenvihreä väri näkyy vain avaintoiminnoissa, logossa, 3D-kuvissa ja painopisteissä. Komponentit ovat tasaisia ja reunuksettomia, ja syvyys luodaan hienovaraisten vihreiden reunojen ja taustan sumennuksen avulla varjojen sijaan.
Modaaliikkuna käyttää sisällön näyttämiseen täysleveyttä, enintään 1280 pikselin tummaa asettelua. Pääikkuna on keskitetty: otsikko (ensimmäinen lause limenvihreänä), alaotsikko, kaksi toimintakehotusta ja yksi 3D-objekti visuaalisena ankkurina – erottamatta asettelua sivupalkista. Sisältöosiot noudattavat yhtenäistä rytmiä: kulmakarvatunniste (isoilla kirjaimilla, Moss 70) → Goga-otsikko → vaimennettu leipäteksti, sitten joko kaksisarakkeinen asettelu ominaisuuskuvauksella (teksti + koodi/visuaalinen kortti) tai kolmisarakkeinen korttiruudukko. Osioiden väliset sisävälit ovat reilut – 80 pikseliä. Sivulla vuorottelevat syvät tyhjät (#000000) ja hieman vaaleamman taustan (#181818) raidat, ja yksi vaalea osio (#def0dd) näkyy sivun keskellä visuaalisena taukona. Navigointi koostuu yhdestä kiinteästä yläpalkista, jossa on sumennettu tausta – ei sivupalkkia tai megavalikkoa. Alatunniste on kompakti ja tumma, ja siinä on vaimennetut vihreät linkkisarakkeet. Tekstitiheys on miellyttävä: jokaiselle osiolle on varattu runsaasti tilaa, ja korttiruudukot käyttävät enintään kolmea saraketta.
Modalin visuaalinen kieli on jaettu kahteen tilaan: hehkuviin 3D-tuoterenderöinteihin ja tummiin koodi-ikkunoiden mockupeihin. Keskipisteenä on yksi markkinointigradientilla (limenvihreästä smaragdinvihreään) renderöity 3D-kuutio, joka on sijoitettu säteittäisen gradienttikehän sisään, joka kylvettää tyhjän tilan vihreässä valossa – brändin tunnusomainen visuaalinen tyyli. Työkuormakortit sisältävät isometrisiä 3D-kuvakkeita (lankakehyskuutio, kiinteä portaikko, tasot), jotka on renderöity samalla limenvihreällä tummaa taustaa vasten. Koodi ja vertailutulokset esitetään pääteikkunakortteina, joissa on liikennevalopisteitä, tasavälinen syntaksikorostus fosforoivassa paletissa ja vaimennettu vihreä reunus – ne muistuttavat kuvakaappauksia oikeasta komentoriviliittymästä. Asiakaslogot näytetään tyydyttymättöminä vihreänharmaina tarroina yhdessä matalakontrastisessa rivissä, mikä viestii luottamuksesta ilman visuaalista kilpailua. Kokonaistiheys on alhainen – useimmat sivut sisältävät pääasiassa tekstiä, ja kuvat esitetään yksittäisinä painopisteinä valokuvaruudukoiden sijaan. Valokuvia ei ole; koko visuaalinen järjestelmä on renderöity geometriseksi ja säteileväksi.
Paletti
Merkki
- Lime Pulse
#7fee64— Yritysilmeen pääelementtejä ovat logo, toimintakehotus (CTA), tagien täyttö, aktiiviset tilat ja kuvituksen perusväri.
Neutraali
- Phosphor White
#ddffdc— Pääteksti, otsikon väri, kuvakkeen ääriviiva ja täytetty painikkeen teksti ovat tärkeimmät luettavat pinnat. - Void Black
#000000— Sivupohja, syvin taustakerros - Ground Iron
#181818— Pääpainikkeiden täyttö, korttien pinnat tummilla alueilla, käyttöliittymän pohjapinta. - Carbon Veil
#212525— Kohotetut pinnat, navigointitausta, hieman maanpintaa vaaleampi. - Circuit Border
#485346— Ääriviiva/haamu-toimintakehys, tärkein interaktiivinen ohut viiva, on vaimennettu vihertävänharmaa sävy. - Phosphor Blue-Black
#1f2a33— Toissijaiset ohuet merkintäviivat, jotka jakavat viivat tummien raitojen väliin.
Typografia
12:sta 64 pikseliin · 8 askelta
- Goga — korvaava: Inter Tight or Space Grotesk · ääriviivat 400, 500 · Otsikko- ja alaotsikkofontti – Käytetään kaikissa H1–H4-otsikoissa ja korteissa. Goga on mukautettu geometrinen sans-serif-fontti, jossa on kapeat aukot ja hieman neliöidyt päätteet. Keskipaksuinen fontti (500) on varattu korttitason otsikoiden korostamiseen; normaalipaksuista fonttia (400) käytetään sankari- ja osiootsikoissa. Jotta voit käyttää vaihtoehtoisia glyfimuotoja, jotka määrittelevät Modalin identiteetin, sen 'ss01'-tyyliasetus on otettava käyttöön. Negatiivinen kirjainväli pienenee vähitellen arvosta -0,007em 48 pikselin kohdalla arvoon -0,017em 21 pikselin kohdalla.
- Inter Variable — korvaava: Inter · ääriviivat 400, 500 · Käyttöliittymä ja leipäteksti – navigointi, painikkeet, leipäteksti, otsikot, alatunniste. Interaktiivisille elementeille ja navigoinnille käytetään oletusarvoisesti keskipaksua kirjainta (500); kappaleille normaalia kirjainta (400). Kirjainvälistys pienenee huomattavasti jopa pienissä kokoluokissa (-0,026em 14 pikselin koossa, -0,022em 16 pikselin koossa), mikä antaa käyttöliittymälle tiivistetyn ja lyhyen tiheyden. Vaihtoehtoisia välimerkkejä varten tulisi käyttää merkkivarianttia 'cv11'. 12 pikselin kokoisissa, kokonaan isoilla kirjaimilla kirjoitetuissa otsikoissa käytetään +0,05em kirjainvälistystä leipätekstin tiheyden tasapainottamiseksi.
Intervallit ja muoto
| Tarkoitus | Merkitys |
|---|---|
| Tiheys | keskimäärin |
| Perusvaihe | 20px |
| Painikkeen säde | 12px |
| Kortin säde | 8px |
| Varjot | ei - reunoja varjojen sijaan |
| Osioiden välillä | 80px |
| Sivun leveys | 1280px |
Tekoäly rakentaa verkkosivustosi Modal -tyyliin ja täyttää sen
- Täytä tuotteilla ja julkaisuilla linkin kautta - Instagram, TikTok, Facebook.
- Siirrä sisältöä vanhalta sivustoltasi – määritä vain osoite.
- Moderni design parhaalla hakukonemoottorilla: React ( Next.js) palvelinrenderöinnillä ja SEO-optimoinnilla suoraan paketista.
- Täysin automatisoitu hakukoneoptimointi hakutuloksille ja neuroverkkosuosituksille.
Samankaltaisia tyylejä
- Slash — Keskiyön holvi kullatuilla tilikirjoilla
- AgentQL — Revontulet terminaalin yllä yöllä
- GitHub — Avaruuskomentopaneeli bioluminesoivilla ohjauspisteillä – pimeä, tunnelmallinen työtila, jossa yksi vihreä hehku osoittaa tietä eteenpäin.
- Doppler — Holvin violetti valaistus keskiyöllä. Lähes musta kangas hehkuu yhdellä laventelinvärisellä signaalilla ja vihreällä vahvistusvalolla, jokainen pinta niin kaareva, että siihen voi tarttua.
- Basedash — Keskiyön datapääte mattafontilla. Tumma observatorio, jossa mittarit hohtavat violettina ja vihreänä, serif-otsikot leijuvat kohinan yllä ja valkoiset pillerinmuotoiset painikkeet ovat ainoat kirkkaat objektit pehmeän mustan pinnan omaavassa huoneessa.
- Superwhisper — Revontulet liukenevat keskiyön lasin ylle
- Better Stack — Keskiyön SRE-konsoli
- Langbase — Keskiyön revontulet -konsoli
- Astro — Syvän avaruuden lennonjohto, jossa yksi violetti hehku sumusta
- Wayfinder — Musta elokuvaruutu, jonka yläpuolella leijuu tuskin kuultava otsikko. Käyttöliittymä on kirkkaussäädin eikä ohjauspaneeli.
- HashiCorp — Keskiyön valvomo on violetilla neonilla valaistu tumma tekninen pinta, jossa hehkuva kuusikulmainen kuutio toimii ainoana värireferenssinä.
- Umbrel — Viihtyisä nuotiopaikka yöpalvelinhuoneessa – pimeässä huoneessa, jossa yksi persikanvärinen hehku korostaa sitä, mikä on todella tärkeää.