Modal
Egy foszforeszkáló terminál egy elsötétített szerverszobában - az egyetlen fényforrás egy élénkzöld színű
A modális funkciók úgy működnek, mint egy foszforeszkáló terminál egy elsötétített szerverszobában: majdnem fekete vászon, halványzöld betűtípus és egyetlen élénk limezöld díszítés, amely LED állapotjelzőként működik. A dizájnnyelv fejlesztőközpontú – fix szélességű kódablakok közlekedési lámpák pontjaival, izometrikus 3D ikonok a jellegzetes zöld színben és rengeteg fehér hely, amely lehetővé teszi, hogy minden szakaszban egy elem világítson. A tipográfia egy egyéni betűtípus (Goga) a címsorokhoz és egy változó betűtípus (Inter) az összes felhasználói felület elemhez, mindkettő keskeny negatív betűközzel beállítva. A színek egyenletesen oszlanak el: a legtöbb képernyő akromatikus, és az élénk limezöld szín csak a kulcsfontosságú műveleteknél, a logónál, a 3D illusztrációknál és a hangsúlyos pillanatoknál jelenik meg. Az alkatrészek laposak és keret nélküliek, a mélységet finom zöld szegélyek és a háttér elmosása hozza létre árnyékok helyett.
A modális ablak teljes szélességű, sötét elrendezést használ, maximum 1280 képpontos szélességgel a tartalom elhelyezéséhez. A főablak középre igazított: a cím (az első mondat lime zöld színben), egy alcím, két cselekvésre ösztönzés és egyetlen 3D objektum vizuális horgonyként – anélkül, hogy az elrendezést elválasztanánk az oldalsávtól. A tartalomrészek egységes ritmust követnek: szemöldökcímke (nagybetűkkel, Moss 70) → Goga cím → tompa törzsszöveg, majd vagy egy kéthasábos elrendezés funkcióleírással (szöveg + kód/vizuális kártya), vagy egy háromhasábos kártyarács. A részek közötti szegélyek nagyok – 80 képpont. Az oldalon mély üres (#000000) és kissé világosabb hátterű (#181818) csíkok váltakoznak, egy világos szakasz (#def0dd) jelenik meg az oldal közepén vizuális szünetként. A navigáció egyetlen, rögzített felső sávból áll, elmosódott háttérrel – nincs oldalsáv vagy megamenü. A lábléc kompakt és sötét, tompa zöld linkoszlopokkal. A szöveg sűrűsége kényelmes: minden szakasz bőséges helyet kap, és a kártyarácsok legfeljebb három oszlopot használnak.
A Modal vizuális nyelve két módra oszlik: 3D-s világító termékrenderelésekre és sötét kódablak-mockupokra. A fókuszpont egyetlen 3D-s kocka, amelyet marketing színátmenettel (lime zöldtől smaragdzöldig) rendereltek, egy radiális színátmenetes glória közepén, amely zöld fényben fürdeti az üres teret – a márka jellegzetes vizuális stílusa. A munkaterhelési kártyák izometrikus 3D-s ikonokat (drótvázas kocka, tömör lépcső, rétegek) tartalmaznak, amelyeket ugyanabban a lime zöldben rendereltek sötét háttér előtt. A kód- és benchmark eredmények terminálablak-kártyákként jelennek meg, közlekedési lámpák pontjaival, foszforeszkáló palettán lévő, egyenletes távolságú szintaxiskiemeléssel és tompa zöld szegéllyel – ezek egy valódi parancssori felület képernyőképeire hasonlítanak. Az ügyféllogók telítetlen zöldesszürke címkékként jelennek meg egyetlen, alacsony kontrasztú sorban, bizalmat jelezve vizuális verseny nélkül. Az általános sűrűség alacsony – a legtöbb oldal túlnyomórészt szöveget tartalmaz, és a képek különálló fókuszpontokként jelennek meg, nem pedig fényképrácsokként. Nincsenek fényképek; a teljes vizuális rendszer renderelt, geometrikus és ragyogó.
Paletta
Márka
- Lime Pulse
#7fee64— A vállalati arculat fő elemei a logó, a fő cselekvésre ösztönzés (CTA), a tagek kitöltése, az aktív állapotok és az illusztráció alapszíne.
Semleges
- Phosphor White
#ddffdc— A fő szöveg, a cím színe, az ikon körvonala és a kitöltött gombszöveg alkotja a fő olvasható felületet. - Void Black
#000000— Oldalvászon, a legmélyebb háttérréteg - Ground Iron
#181818— Fő gombkitöltés, sötét kártyafelületek, a felhasználói felület alapfelülete. - Carbon Veil
#212525— Kiemelkedő felületek, navigációs háttér, kissé világosabb a talajnál. - Circuit Border
#485346— A körvonal/szellem akciókeret, a fő interaktív vékony vonal, tompa zöldesszürke árnyalatú. - Phosphor Blue-Black
#1f2a33— Másodlagos vékony jelölővonalak, amelyek elosztják a vonásokat a sötét csíkok között.
Tipográfia
12-től 64 képpontig · 8 lépésben
- Goga — csere: Inter Tight or Space Grotesk · körvonalak 400, 500 · Címsor és alcímsor betűtípus – Minden H1–H4 méretű címsorhoz és kártyához használatos. A Goga egy egyéni geometrikus, talp nélküli betűtípus keskeny nyílásokkal és enyhén szögletes terminálokkal. A közepes vastagság (500) a kártyaszintű címsorok kiemelésére van fenntartva; a normál vastagság (400) a fő- és szakaszcímekhez használatos. A Modal identitását meghatározó alternatív karakterjelformák eléréséhez engedélyezni kell az „ss01” stíluskészletét. A negatív betűköz fokozatosan csökken -0,007em-ről 48 képpontnál -0,017em-re 21 képpontnál.
- Inter Variable — csere: Inter · körvonalak 400, 500 · Felhasználói felület és törzsszöveg – navigáció, gombok, törzsszöveg, címkék, lábléc. Az interaktív elemekhez és a navigációhoz alapértelmezés szerint közepes vastagság (500); a bekezdésekhez normál (400) vastagság. A betűköz már kis méretek esetén is észrevehetően csökken (-0,026em 14 képpontnál, -0,022em 16 képpontnál), ami tömörebb, terminális sűrűséget biztosít a felületnek. Alternatív írásjelekhez a 'cv11' karakterváltozatot kell használni. A 12 képpontos, csupa nagybetűs címkék +0,05em betűközt használnak a törzsszöveg sűrűségének ellensúlyozására.
Intervallumok és forma
| Cél | Jelentés |
|---|---|
| Sűrűség | átlagos |
| Alapvető lépés | 20px |
| Gomb sugara | 12px |
| Kártya sugara | 8px |
| Árnyékok | nincs - szegélyek árnyékok helyett |
| Szakaszok között | 80px |
| Oldal szélessége | 1280px |
A mesterséges intelligencia Modal stílusban fogja elkészíteni a weboldaladat, és kitölti azt.
- Töltsd fel termékeidet és posztjaidat a linkeken keresztül - Instagram, TikTok, Facebook.
- Tartalom átvitele régi webhelyéről – csak adja meg a címet.
- Modern dizájn a legjobb keresőmotoron: React ( Next.js) szerveralapú rendereléssel és SEO optimalizálással, azonnal használható formában.
- Teljesen automatizált SEO optimalizálás a keresési eredményekhez és a neurális hálózati ajánlásokhoz.
Hasonló stílusok
- Slash — Éjféli trezor aranyozott főkönyvekkel
- AgentQL — Északi fény a terminál felett éjszaka
- GitHub — Egy űrparancsnoki panel biolumineszcens vezérlőpontokkal – egy sötét, hangulatos munkaterület, ahol egyetlen zöld fény jelzi az utat.
- Doppler — A trezor lila világítása éjfélkor. A majdnem fekete vászon egyetlen levendulaszínű jelzéssel és egy zöld megerősítő fénnyel világít, minden felülete elég ívelt ahhoz, hogy meg lehessen fogni.
- Basedash — Egy matt betűtípusú, éjféli adatterminál. Sötét obszervatórium, ahol a mérőszámok lilásan és zölden világítanak, a zaj felett talpas címsorok lebegnek, és a fehér, pirula alakú gombok az egyetlen fényes tárgyak a puha, fekete felületekkel teli szobában.
- Superwhisper — Az északi fény feloldódik az éjféli üveg felett
- Better Stack — Éjféli SRE konzol
- Langbase — Éjféli északi fény konzol
- Astro — Mélyűri irányítóközpont egyetlen lila fényével egy ködből
- Wayfinder — Egy fekete filmvászon, alig hallható címmel lebegve egy élő illusztráció felett. A kezelőfelület inkább egy fényerő-csúszka, mint egy vezérlőpult.
- HashiCorp — Az éjféli, lila neonfényekkel díszített irányítóterem egy sötét technikai felület, ahol egy világító hatszögletű kocka szolgál az egyetlen színreferenciaként.
- Umbrel — Egy hangulatos tűzrakóhely az éjszakai szerverszobában – egy sötét szobában, ahol egyetlen barackszínű fény világítja meg azt, ami igazán fontos.