Modal
In fosforeszente terminal yn in tsjustere serverkeamer - de ienige ljochtboarne is in helder griene kleur
Modaal funksjonearret as in fosforeszinte terminal yn in tsjustere serverkeamer: in hast swart doek, bleekgrien lettertype, en in inkele helder limoengriene aksint dy't fungearret as in LED-statusindikator. De ûntwerptaal is rjochte op ûntwikkelders - monospaced kodefinsters mei ferkearsljochtpunten, isometryske 3D-ikoanen yn it karakteristike grien, en in soad wite romte, wêrtroch ien elemint yn elke seksje gloeit. Typografy is ferdield tusken in oanpast lettertype (Goga) foar kopteksten en in fariabele lettertype (Inter) foar alle UI-eleminten, beide ynsteld mei smelle negative tracking. Kleuren wurde evenredich ferdield: de measte skermen binne achromatysk, en de heldere limoengriene kleur ferskynt allinich op wichtige aksjes, it logo, 3D-yllustraasjes en mominten fan klam. Komponinten binne flak en frameleas, mei djipte makke troch subtile griene rânen en eftergrûnwazige eftergrûn ynstee fan skaden.
De modal brûkt in donkere yndieling oer folsleine breedte mei in maksimale breedte fan 1280px om de ynhâld te ûnderbringen. It haadfinster is sintraal: de titel (de earste sin yn limoengrien), in subkop, twa oprop ta aksje, en ien 3D-objekt as in fisueel anker - sûnder de yndieling te skieden fan 'e sydbalke. De ynhâldseksjes folgje in unifoarm ritme: wynbrauwtag (haadletters, Moss 70) → Goga-titel → gedempte lichemstekst, dan of in yndieling mei twa kolommen mei in funksjebeskriuwing (tekst + koade/fisuele kaart) of in raster fan trije kolommen fan kaarten. De gutters tusken seksjes binne royaal - 80px. De side wikselet tusken djippe lege (#000000) en wat lichtere eftergrûn (#181818) strepen, mei ien ljochte seksje (#def0dd) dy't yn 'e midden fan' e side ferskynt as in fisuele sykheljen. De navigaasje bestiet út ien, fêste boppeste balke mei in wazige eftergrûn - gjin sydbalke of mega-menu. De fuottekst is kompakt en tsjuster, mei gedempte griene keppelingskolommen. De teksttichtens is noflik: elke seksje krijt genôch romte, en kaartrasters brûke net mear as trije kolommen.
De fisuele taal fan Modal is ferdield yn twa modi: 3D-gloeiende produktrenderings en donkere koadefinstermockups. It fokuspunt is in inkele 3D-kubus dy't werjûn wurdt mei in marketinggradiënt (fan limoengrien oant smaragdgrien), ynsteld binnen in radiale gradiënthalo dy't de lege romte yn grien ljocht badet - de karakteristike fisuele styl fan it merk. Workloadkaarten befetsje isometryske 3D-ikoanen (in wireframe-kubus, in solide trep, lagen) werjûn yn itselde limoengrien tsjin in donkere eftergrûn. Koade- en benchmarkresultaten wurde presintearre as terminalfinsterkaarten mei ferkearsljochtpunten, monospaced syntaksismarkearring yn in fosforescerend palet, en in gedempte griene râne - se lykje op skermôfbyldings fan in echte kommandorigelinterface. Kliïntlogo's wurde werjûn as desaturearre grien-grize labels yn in inkele rige mei leech kontrast, wat fertrouwen sinjalearret sûnder fisuele konkurrinsje. De algemiene tichtens is leech - de measte siden befetsje foaral tekst, en ôfbyldings wurde presintearre as yndividuele fokuspunten ynstee fan rasters fan foto's. D'r binne gjin foto's; it heule fisuele systeem wurdt werjûn, geometrysk en strieljend.
Palet
Merk
- Lime Pulse
#7fee64— De wichtichste eleminten fan 'e bedriuwsidentiteit binne it logo, de wichtichste oprop ta aksje (CTA), tag-opfoljen, aktive steaten en de basiskleur fan 'e yllustraasje.
Neutraal
- Phosphor White
#ddffdc— De haadtekst, titelkleur, ikoanomtrek en ynfolde knoptekst binne it wichtichste lêsbere oerflak. - Void Black
#000000— Sidedoek, de djipste eftergrûnlaach - Ground Iron
#181818— Haadknopynfolling, kaartoerflakken yn donkere gebieten, basisoerflak fan 'e brûkersynterface. - Carbon Veil
#212525— Ferhege oerflakken, navigaasjeachtergrûn, wat lichter as de grûn. - Circuit Border
#485346— It omtrek-/spoekaksjeframe, de wichtichste ynteraktive tinne line, is in gedempte grienich-grize skaad. - Phosphor Blue-Black
#1f2a33— Sekundêre tinne markearringslinen, dy't streken tusken donkere strepen skiede.
Typografy
fan 12 oant 64px · 8 stappen
- Goga — ferfanging: Inter Tight or Space Grotesk · sketsen 400, 500 · Koptekst- en subkoptekstlettertype - Brûkt foar alle H1-H4-kopteksten en kaarten. Goga is in oanpast geometrysk sans-serif-lettertype mei smelle iepeningen en wat fjouwerkante terminals. It middelste gewicht (500) is reservearre foar it markearjen fan kopteksten op kaartnivo; it normale gewicht (400) wurdt brûkt foar hero- en seksjekopteksten. Om tagong te krijen ta de alternative glyph-foarmen dy't de identiteit fan Modal definiearje, moat de stylistike set 'ss01' ynskeakele wêze. Negative letterôfstân nimt stadichoan ôf fan -0.007em by 48px nei -0.017em by 21px.
- Inter Variable — ferfanging: Inter · sketsen 400, 500 · Brûkersynterface en lichemtekst - navigaasje, knoppen, lichemtekst, labels, fuottekst. Middelgewicht (500) wurdt standert brûkt foar ynteraktive eleminten en navigaasje; normaal (400) wurdt brûkt foar paragrafen. Letterôfstân wurdt merkber fermindere, sels by lytse grutte (-0.026em by 14px, -0.022em by 16px), wêrtroch't de ynterface in kondinsearre, terminale tichtens krijt. Foar alternative ynterpunksje moat de karakterfariant 'cv11' opnommen wurde. Labels yn haadletters by 12px brûke +0.05em letterôfstân om de tichtens fan 'e lichemtekst te kompensearjen.
Yntervallen en foarm
| Doel | Betsjutting |
|---|---|
| Dichtheid | trochsneed |
| Basisstap | 20px |
| Knopradius | 12px |
| Kaartradius | 8px |
| Skaden | gjin grinzen ynstee fan skaden |
| Tusken seksjes | 80px |
| Sidebreedte | 1280px |
AI sil jo webside bouwe yn Modal -styl en it folje
- Folje oan mei produkten en berjochten fia de link - Instagram, TikTok, Facebook.
- Oerdrage ynhâld fan jo âlde side - spesifisearje gewoan it adres.
- Modern ûntwerp op 'e bêste motor: React ( Next.js) mei serverrendering en SEO-optimalisaasje direkt út 'e doaze.
- Folslein automatisearre SEO-optimalisaasje foar sykresultaten en oanbefellings foar neurale netwurken.
Ferlykbere stilen
- Slash — Middernachtskluis mei fergulde ledgers
- AgentQL — Noarderljocht boppe de terminal by nacht
- GitHub — In romtekommandopaniel mei biolumineszinte kontrôlepunten - in tsjustere, sfearfolle wurkromte dêr't in inkele griene gloed de wei foarút wiist.
- Doppler — De pearse ferljochting fan 'e kluis om middernacht. It hast swarte doek gloeit mei in inkele lavendelkleurige sinjaal en in grien befêstigingsljocht, elk oerflak krom genôch om te pakken.
- Basedash — In middernachtsgegevensterminal mei matte lettertypen. In tsjuster observatoarium dêr't metriken pears en grien gloeie, serif-koppen boppe it lûd sweve, en wite pilfoarmige knoppen de ienige heldere objekten binne yn in keamer mei sêfte swarte oerflakken.
- Superwhisper — It noarderljocht ferdwynt boppe it middernachtsglês
- Better Stack — Middernacht SRE-konsole
- Langbase — Middernacht Noarderljocht konsole
- Astro — Deep Space Mission Control mei in inkele pearse gloed fan in nebula
- Wayfinder — In swart filmskerm mei in amper te hearren titel dy't boppe in live yllustraasje sweeft. De ynterface is in helderheidsslider ynstee fan in kontrôlepaniel.
- HashiCorp — De kontrôlekeamer om middernacht mei pearse neon is in tsjuster technysk oerflak dêr't in gloeiende hexagonale kubus as ienige kleurreferinsje tsjinnet.
- Umbrel — In noflike fjoerput yn 'e nachtserverkeamer - in tsjustere keamer dêr't in ienige perzikkleurige gloed markearret wat echt wichtich is.