Modal
Isang phosphorescent terminal sa isang madilim na silid ng server - ang tanging pinagmumulan ng liwanag ay isang matingkad na berdeng kulay
Ang modal ay gumagana tulad ng isang phosphorescent terminal sa isang madilim na silid ng server: isang halos itim na canvas, maputlang berde ang tipo, at isang matingkad na lime-green na accent na nagsisilbing tagapagpahiwatig ng katayuan ng LED. Ang wika ng disenyo ay nakatuon sa developer—mga monospaced code window na may mga tuldok sa traffic light, isometric 3D icon sa signature green, at maraming puting espasyo, na nagpapahintulot sa isang elemento sa bawat seksyon na umilaw. Ang tipograpiya ay nahahati sa pagitan ng isang custom na font (Goga) para sa mga heading at isang variable na font (Inter) para sa lahat ng elemento ng UI, na parehong nakatakda sa makitid na negatibong tracking. Ang mga kulay ay pantay na ipinamamahagi: karamihan sa mga screen ay achromatic, at ang matingkad na lime-green na kulay ay lumilitaw lamang sa mga pangunahing aksyon, logo, 3D na mga ilustrasyon, at mga sandali ng pagbibigay-diin. Ang mga bahagi ay patag at walang frame, na may lalim na nilikha sa pamamagitan ng mga banayad na berdeng border at blur sa background sa halip na mga anino.
Gumagamit ang modal ng full-width dark layout na may maximum na lapad na 1280px upang magkasya ang nilalaman. Nakasentro ang hero window: ang pamagat (ang unang pangungusap na kulay lime green), isang subheading, dalawang call to action, at isang 3D object bilang visual anchor—nang hindi pinaghihiwalay ang layout mula sa sidebar. Ang mga seksyon ng nilalaman ay sumusunod sa isang pare-parehong ritmo: eyebrow tag (malalaking titik, Moss 70) → Pamagat ng Goga → naka-mute na body text, pagkatapos ay alinman sa isang layout na may dalawang hanay na may paglalarawan ng feature (teksto + code/visual card) o isang tatlong hanay na grid ng mga card. Malawak ang mga gutter sa pagitan ng mga seksyon—80px. Ang pahina ay nagpapalitan sa pagitan ng malalim na walang laman (#000000) at bahagyang mas mapusyaw na background (#181818) na mga guhit, na may isang maliwanag na seksyon (#def0dd) na lumalabas sa gitna ng pahina bilang visual breather. Ang nabigasyon ay binubuo ng isang nakapirming top bar na may malabong background—walang sidebar o mega-menu. Ang footer ay siksik at madilim, na may mga naka-mute na berdeng link column. Komportable ang densidad ng teksto: ang bawat seksyon ay binibigyan ng sapat na espasyo, at ang mga grid ng card ay gumagamit ng hindi hihigit sa tatlong kolum.
Ang visual language ng Modal ay nahahati sa dalawang mode: 3D glowing product renders at dark code window mockups. Ang focal point ay isang 3D cube na ni-render gamit ang marketing gradient (mula lime green hanggang esmeralda), na nakalagay sa loob ng radial gradient halo na bumabalot sa bakanteng espasyo ng berdeng ilaw—ang signature visual style ng brand. Ang mga workload card ay naglalaman ng isometric 3D icons (isang wireframe cube, isang solidong hagdanan, mga layer) na ni-render sa parehong lime green laban sa isang madilim na background. Ang mga resulta ng code at benchmark ay ipinapakita bilang mga terminal window card na may mga tuldok sa traffic light, monospaced syntax highlighting sa isang phosphorescent palette, at isang muted green border—kahawig ng mga ito ang mga screenshot ng isang tunay na command-line interface. Ang mga logo ng kliyente ay ipinapakita bilang mga desaturated green-gray na label sa isang solong, low-contrast row, na nagpapahiwatig ng tiwala nang walang visual na kompetisyon. Mababa ang pangkalahatang density—karamihan sa mga pahina ay naglalaman ng pangunahing teksto, at ang mga imahe ay ipinapakita bilang mga indibidwal na focal point sa halip na mga grid ng mga litrato. Walang mga litrato; ang buong visual system ay ni-render, geometric, at radiant.
Paleta
Tatak
- Lime Pulse
#7fee64— Ang mga pangunahing elemento ng pagkakakilanlan ng korporasyon ay ang logo, ang pangunahing panawagan para sa aksyon (CTA), pagpuno ng tag, mga aktibong estado, at ang pangunahing kulay ng ilustrasyon.
Neutral
- Phosphor White
#ddffdc— Ang pangunahing teksto, kulay ng pamagat, balangkas ng icon, at teksto ng napunan na buton ang pangunahing nababasang ibabaw. - Void Black
#000000— Page canvas, ang pinakamalalim na background layer - Ground Iron
#181818— Punan ng pangunahing buton, mga ibabaw ng card sa madilim na bahagi, base na ibabaw ng user interface. - Carbon Veil
#212525— Matataas na mga ibabaw, background ng nabigasyon, bahagyang mas magaan kaysa sa lupa. - Circuit Border
#485346— Ang outline/ghost action frame, ang pangunahing interactive na manipis na linya, ay isang muted greenish-grey shade. - Phosphor Blue-Black
#1f2a33— Pangalawang manipis na linya ng pagmamarka, na naghahati ng mga guhit sa pagitan ng maitim na guhit.
Tipograpiya
mula 12 hanggang 64px · 8 hakbang
- Goga — kapalit: Inter Tight or Space Grotesk · mga balangkas 400, 500 · Font ng Pamagat at Subheading – Ginagamit para sa lahat ng H1–H4 na heading at card. Ang Goga ay isang pasadyang geometric sans-serif na font na may makikipot na butas at bahagyang parisukat na mga terminal. Ang katamtamang bigat (500) ay nakalaan para sa pag-highlight ng mga heading sa antas ng card; ang normal na bigat (400) ay ginagamit para sa mga heading ng hero at section. Upang ma-access ang mga alternatibong hugis ng glyph na tumutukoy sa pagkakakilanlan ng Modal, dapat na paganahin ang istilo nitong 'ss01'. Unti-unting bumababa ang espasyo ng negatibong letra mula -0.007em sa 48px hanggang -0.017em sa 21px.
- Inter Variable — kapalit: Inter · mga balangkas 400, 500 · Interface ng gumagamit at body copy – nabigasyon, mga buton, body copy, mga label, footer. Ang katamtamang bigat (500) ay ginagamit bilang default para sa mga interactive na elemento at nabigasyon; ang normal (400) ay ginagamit para sa mga talata. Ang pagitan ng mga letra ay kapansin-pansing nabawasan kahit sa maliliit na sukat (-0.026em sa 14px, -0.022em sa 16px), na nagbibigay sa interface ng isang pinaikling, terminal density. Para sa alternatibong bantas, dapat isama ang variant ng karakter na 'cv11'. Ang mga all-caps na label sa 12px ay gumagamit ng +0.05em na pagitan ng mga letra upang mabalanse ang densidad ng body copy.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | karaniwan |
| Pangunahing hakbang | 20px |
| Radius ng buton | 12px |
| Radius ng card | 8px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 80px |
| Lapad ng pahina | 1280px |
Gagawa ang AI ng website mo sa estilong Modal at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- Slash — Hatinggabing vault na may ginintuang mga ledger
- AgentQL — Mga Northern Lights sa ibabaw ng terminal sa gabi
- GitHub — Isang space command panel na may mga bioluminescent control point—isang madilim at maaliwalas na workspace kung saan ang isang berdeng liwanag ay nagtuturo sa daan pasulong.
- Doppler — Ang lilang ilaw ng vault sa hatinggabi. Ang halos itim na canvas ay kumikinang na may iisang lavender signal at berdeng confirmation light, bawat ibabaw ay kurbadong sapat para mahawakan.
- Basedash — Isang midnight data terminal na may matte font. Isang madilim na obserbatoryo kung saan ang mga metric ay kumikinang na kulay lila at berde, ang mga serif headline ay lumulutang sa ibabaw ng ingay, at ang mga puting hugis-pill na butones ang tanging maliwanag na bagay sa isang silid na may malambot na itim na ibabaw.
- Superwhisper — Ang mga ilaw sa hilaga ay natutunaw sa ibabaw ng salamin sa hatinggabi
- Better Stack — Hatinggabi SRE Console
- Langbase — Console ng Northern Lights sa Hatinggabi
- Astro — Kontrol ng Misyon sa Kalawakan na may iisang lilang liwanag mula sa isang nebula
- Wayfinder — Isang itim na screen ng pelikula na may halos hindi marinig na pamagat na nakapatong sa isang live na ilustrasyon. Ang interface ay isang brightness slider sa halip na isang control panel.
- HashiCorp — Ang control room sa hatinggabi na may lilang neon ay isang madilim na teknikal na ibabaw kung saan ang isang kumikinang na hexagonal cube ay nagsisilbing tanging sanggunian ng kulay.
- Umbrel — Isang maginhawang fire pit sa night server room—isang madilim na silid kung saan ang isang matingkad na liwanag ay nagbibigay-diin sa kung ano ang tunay na mahalaga.