Modal
'n Fosforeserende terminaal in 'n donker bedienerkamer - die enigste ligbron is 'n heldergroen kleur
Modaal funksioneer soos 'n fosforeserende terminaal in 'n donker bedienerkamer: 'n byna swart doek, liggroen lettertipe en 'n enkele helder lemmetjiegroen aksent wat as 'n LED-statusaanwyser dien. Die ontwerptaal is ontwikkelaar-gefokus—monospasiëerde kodevensters met verkeersligkolle, isometriese 3D-ikone in die kenmerkende groen, en baie wit spasie, wat een element in elke afdeling laat gloei. Tipografie is verdeel tussen 'n persoonlike lettertipe (Goga) vir opskrifte en 'n veranderlike lettertipe (Inter) vir alle UI-elemente, beide gestel met nou negatiewe dophou. Kleure word eweredig versprei: die meeste skerms is achromaties, en die helder lemmetjiegroen kleur verskyn slegs op sleutelaksies, die logo, 3D-illustrasies en oomblikke van klem. Komponente is plat en raamloos, met diepte geskep deur subtiele groen rande en agtergrondvervaagdheid eerder as skaduwees.
Die modal gebruik 'n donker uitleg met volle breedte en 'n maksimum breedte van 1280px om die inhoud te akkommodeer. Die hoofvenster is gesentreer: die titel (die eerste sin in lemmetjiegroen), 'n subopskrif, twee oproepe tot aksie, en 'n enkele 3D-voorwerp as 'n visuele anker – sonder om die uitleg van die sybalk te skei. Die inhoudsafdelings volg 'n eenvormige ritme: wenkbrou-etiket (hoofletters, Moss 70) → Goga-titel → gedempte liggaamsteks, dan óf 'n tweekolom-uitleg met 'n kenmerkbeskrywing (teks + kode/visuele kaart) óf 'n driekolom-rooster van kaarte. Die geute tussen afdelings is ruim – 80px. Die bladsy wissel tussen diep leë (#000000) en effens ligter agtergrond (#181818) strepe, met een ligte afdeling (#def0dd) wat in die middel van die bladsy as 'n visuele asemhaling verskyn. Die navigasie bestaan uit 'n enkele, vaste boonste balk met 'n vae agtergrond – geen sybalk of mega-kieslys nie. Die voetskrif is kompak en donker, met gedempte groen skakelkolomme. Die teksdigtheid is gemaklik: elke afdeling kry genoeg spasie, en kaartroosters gebruik nie meer as drie kolomme nie.
Modal se visuele taal word in twee modusse verdeel: 3D gloeiende produkweergawes en donker kodevenstermodelle. Die fokuspunt is 'n enkele 3D-kubus wat met 'n bemarkingsgradiënt (van lemmetjiegroen tot smaraggroen) weergegee word, binne 'n radiale gradiënthalo wat die leë ruimte in groen lig bad - die handelsmerk se kenmerkende visuele styl. Werklaskaarte bevat isometriese 3D-ikone (’n draadraamkubus, ’n soliede trap, lae) wat in dieselfde lemmetjiegroen teen ’n donker agtergrond weergegee word. Kode- en maatstafresultate word aangebied as terminaalvensterkaarte met verkeersligkolle, monospasiëerde sintaksisuitlig in ’n fosforeserende palet en ’n gedempte groen rand - hulle lyk soos skermkiekies van ’n regte opdragreël-koppelvlak. Kliëntlogo's word vertoon as onversadigde groengrys etikette in ’n enkele, lae-kontras ry, wat vertroue sonder visuele kompetisie aandui. Die algehele digtheid is laag - die meeste bladsye bevat hoofsaaklik teks, en beelde word aangebied as individuele fokuspunte eerder as roosters van foto's. Daar is geen foto's nie; die hele visuele stelsel word weergegee, geometries en stralend.
Palet
Handelsmerk
- Lime Pulse
#7fee64— Die hoofelemente van die korporatiewe identiteit is die logo, die hoofoproep tot aksie (CTA), etiketvulling, aktiewe toestande en die basiese kleur van die illustrasie.
Neutraal
- Phosphor White
#ddffdc— Die hoofteks, titelkleur, ikoonomlyning en gevulde knoppieteks is die hoof leesbare oppervlak. - Void Black
#000000— Bladsydoek, die diepste agtergrondlaag - Ground Iron
#181818— Hoofknoppievulsel, kaartoppervlaktes in donker areas, basisoppervlak van die gebruikerskoppelvlak. - Carbon Veil
#212525— Verhoogde oppervlaktes, navigasie-agtergrond, effens ligter as die grond. - Circuit Border
#485346— Die buitelyn-/spookaksieraam, die hoof interaktiewe dun lyn, is 'n gedempte groenerig-grys skakering. - Phosphor Blue-Black
#1f2a33— Sekondêre dun merklyne, wat strepe tussen donker strepe verdeel.
Tipografie
van 12 tot 64px · 8 stappe
- Goga — vervanging: Inter Tight or Space Grotesk · buitelyne 400, 500 · Opskrif- en Subopskriflettertipe – Word gebruik vir alle H1–H4 opskrifte en kaarte. Goga is 'n pasgemaakte geometriese sans-serif-lettertipe met nou openinge en effens vierkantige terminale. Die medium gewig (500) is gereserveer vir die uitlig van kaartvlak-opskrifte; die normale gewig (400) word gebruik vir held- en afdelingsopskrifte. Om toegang te verkry tot die alternatiewe gliefvorms wat Modal se identiteit definieer, moet die 'ss01'-stilistiese stel geaktiveer wees. Negatiewe letterspasiëring neem geleidelik af van -0.007em teen 48px tot -0.017em teen 21px.
- Inter Variable — vervanging: Inter · buitelyne 400, 500 · Gebruikerskoppelvlak en liggaamstekst – navigasie, knoppies, liggaamstekst, etikette, voetskrif. Medium gewig (500) word standaard gebruik vir interaktiewe elemente en navigasie; normaal (400) word vir paragrawe gebruik. Letterafstand word merkbaar verminder selfs by klein groottes (-0.026em teen 14px, -0.022em teen 16px), wat die koppelvlak 'n gekondenseerde, terminale digtheid gee. Vir alternatiewe punktuasie moet die 'cv11'-karaktervariant ingesluit word. Hoofletteretikette teen 12px gebruik +0.05em letterafstand om die liggaamstekstdigtheid te balanseer.
Intervalle en vorm
| Doel | Betekenis |
|---|---|
| Digtheid | gemiddelde |
| Basiese stap | 20px |
| Knoppieradius | 12px |
| Kaartradius | 8px |
| Skaduwees | geen grense in plaas van skaduwees |
| Tussen afdelings | 80px |
| Bladsybreedte | 1280px |
KI sal jou webwerf in Modal -styl bou en dit vul
- Vul met produkte en plasings via die skakel - Instagram, TikTok, Facebook.
- Dra inhoud van jou ou webwerf oor – spesifiseer net die adres.
- Moderne ontwerp op die beste enjin: React ( Next.js) met bedienerweergawe en SEO-optimalisering reg uit die boks.
- Volledig outomatiese SEO-optimering vir soekresultate en neurale netwerkaanbevelings.
Soortgelyke style
- Slash — Middernagkluis met vergulde grootboeke
- AgentQL — Noorderligte oor die terminaal in die nag
- GitHub — 'n Ruimte-opdragpaneel met bioluminescerende beheerpunte—'n donker, atmosferiese werkruimte waar 'n enkele groen gloed die pad vorentoe aandui.
- Doppler — Die kluis se pers beligting om middernag. Die byna swart doek gloei met 'n enkele laventelkleurige sein en 'n groen bevestigingslig, elke oppervlak geboë genoeg om vasgegryp te word.
- Basedash — ’n Middernagdataterminaal met ’n mat lettertipe. ’n Donker observatorium waar metrieke pers en groen gloei, serif-opskrifte bo die geraas sweef, en wit pilvormige knoppies die enigste helder voorwerpe in ’n kamer met sagte swart oppervlaktes is.
- Superwhisper — Die noorderligte verdwyn oor die middernagglas
- Better Stack — Middernag SRE-konsole
- Langbase — Middernag Noorderligte-konsole
- Astro — Diep Ruimte Sendingbeheer met 'n enkele pers gloed van 'n newel
- Wayfinder — 'n Swart rolprentskerm met 'n skaars hoorbare titel wat bo 'n lewendige illustrasie sweef. Die koppelvlak is 'n helderheidskuifbalk eerder as 'n beheerpaneel.
- HashiCorp — Die beheerkamer om middernag met pers neon is 'n donker tegniese oppervlak waar 'n gloeiende seshoekige kubus as die enigste kleurverwysing dien.
- Umbrel — 'n Gesellige vuurput in die nagbedienkamer—'n donker kamer waar 'n enkele perskekleurige gloed uitlig wat werklik belangrik is.