Modal
En phosphoreszenten Terminal an engem däischteren Serverraum - déi eenzeg Liichtquell ass eng hellgréng Faarf
Modal funktionéiert wéi en phosphoreszenten Terminal an engem däischteren Serverraum: eng bal schwaarz Leinwand, hellgréng Schrëft an een eenzegen helle kalkgréngen Akzent, deen als LED-Statusindikator déngt. D'Designsprooch ass op d'Entwéckler fokusséiert - monospaced Codefenster mat Verkéiersluuchtpunkten, isometresch 3D-Symboler am typesche Gréng a vill wäisst Raum, sou datt een Element an all Sektioun liicht. D'Typographie ass opgedeelt an enger personaliséierter Schrëft (Goga) fir Iwwerschrëften an enger variabler Schrëft (Inter) fir all UI-Elementer, béid mat enger schmueler negativer Tracking agestallt. D'Faarwe sinn gläichméisseg verdeelt: déi meescht Schiirme sinn achromatesch, an déi hell kalkgréng Faarf erschéngt nëmmen op Schlësselaktiounen, dem Logo, 3D-Illustratiounen a Momenter vun der Betounung. D'Komponente sinn flaach an ouni Frame, mat Déift, déi duerch subtil gréng Borduren an Hannergrondonschärft amplaz vu Schieter geschaf gëtt.
De Modal benotzt en donkelt Layout a voller Breet mat enger maximaler Breet vun 1280px fir den Inhalt z'ënnerbréngen. D'Haaptfenster ass zentréiert: den Titel (den éischte Saz a limegréng), eng Ënneriwwerschrëft, zwou Handlungsappelungen an en eenzegt 3D-Objet als visuellt Anker - ouni d'Layout vun der Sidebar ze trennen. D'Inhaltssektiounen verfollegen engem eenheetleche Rhythmus: Augenbrauen-Tag (Groussbuschtawen, Moss 70) → Goga-Titel → gedämpften Haapttext, dann entweder en Layout mat zwou Kolonnen mat enger Featurebeschreiwung (Text + Code/visuell Kaart) oder en dräikolonnent Raster vu Kaarten. D'Rinnen tëscht de Sektiounen si generéis - 80px. D'Säit wiesselt tëscht déiwen eidele (#000000) a liicht méi hellen Hannergrondsträifen (#181818), mat enger heller Sektioun (#def0dd), déi an der Mëtt vun der Säit als visuell Atmung erschéngt. D'Navigatioun besteet aus enger eenzeger, fixer ieweschter Leescht mat engem verschwommenen Hannergrond - keng Sidebar oder Mega-Menü. De Fousszeil ass kompakt an donkel, mat gedämpfte grénge Linkkolonnen. D'Textdicht ass komfortabel: all Sektioun kritt vill Plaz, an d'Kaartegitter benotzen net méi wéi dräi Kolonnen.
D'visuell Sprooch vu Modal ass an zwou Modi opgedeelt: 3D-glühend Produktrendering a Mockups mat donkelen Codefensteren. De Schwéierpunkt ass en eenzegen 3D-Kubus, deen mat engem Marketinggradient (vu limegréng bis smaragdgréng) gerendert gëtt, an engem radialen Halo, deen de leere Raum a gréngem Liicht badet - de charakteristesche visuelle Stil vun der Mark. Workload-Kaarte enthalen isometresch 3D-Ikonen (e Wireframe-Kubus, eng zolidd Trap, Schichten), déi am selwechte limegrénge virun engem donkelen Hannergrond gerendert sinn. Code- a Benchmark-Resultater ginn als Terminalfensterkaarte mat Verkéiersluuchtpunkten, monospaced Syntax-Highlighting an enger phosphoreszenter Palette an engem gedämpfte grénge Bord presentéiert - si gläichen Screenshots vun enger realer Kommandozeileninterface. Clientlogoen ginn als desaturéiert gréng-gro Etiketten an enger eenzeger Zeil mat nidderegem Kontrast ugewisen, wat Vertrauen ouni visuell Konkurrenz signaliséiert. Déi allgemeng Dicht ass niddreg - déi meescht Säiten enthalen haaptsächlech Text, an d'Biller ginn als individuell Schwéierpunkten amplaz vu Gitter vu Fotoe presentéiert. Et gëtt keng Fotoen; dat ganzt visuellt System gëtt gerendert, geometresch a stralend.
Palette
Mark
- Lime Pulse
#7fee64— Déi wichtegst Elementer vun der Firmenidentitéit sinn de Logo, den Haapt-Call to Action (CTA), d'Tag-Fëllung, d'aktiv Zoustänn an d'Basisfaarf vun der Illustratioun.
Neutral
- Phosphor White
#ddffdc— Den Haapttext, d'Faarf vum Titel, den Ëmriss vun de Symboler an den ausgefëllten Knäppchentext sinn déi Haaptliesbar Uewerfläch. - Void Black
#000000— Säit Leinwand, déi déifst Hannergrondschicht - Ground Iron
#181818— Haaptknäppchenfëllung, Kaarteflächen an donkelen Beräicher, Basisfläch vun der Benotzerinterface. - Carbon Veil
#212525— Erhiewt Uewerflächen, Navigatiounshannergrond, liicht méi hell wéi de Buedem. - Circuit Border
#485346— De Kontur-/Geeschter-Aktiounsframe, déi interaktiv Haaptlinn, ass e gedämpften gréng-groe Faarftéin. - Phosphor Blue-Black
#1f2a33— Sekundär dënn Markéierungslinnen, déi Stréch tëscht donkelen Sträifen trennen.
Typographie
vun 12 bis 64px · 8 Schrëtt
- Goga — Ersatz: Inter Tight or Space Grotesk · Konturen 400, 500 · Schrëft fir Iwwerschrëften an Ënneriwwerschrëften – Gëtt fir all H1–H4 Iwwerschrëften a Kaarten benotzt. Goga ass eng personaliséiert geometresch Sans-Serif-Schrëft mat schmuele Lächer an liicht quadrateschen Enden. Déi mëttel Gewiicht (500) ass reservéiert fir Iwwerschrëften op Kaartenniveau ze ervirhiewen; déi normal Gewiicht (400) gëtt fir Hero- an Sektiounsiwwerschrëften benotzt. Fir Zougang zu den alternativen Glyphformen ze kréien, déi d'Identitéit vu Modal definéieren, muss säi Stil 'ss01' aktivéiert sinn. Den negativen Ofstand tëscht Buschtawen hëlt graduell vun -0,007em bei 48px op -0,017em bei 21px of.
- Inter Variable — Ersatz: Inter · Konturen 400, 500 · Benotzerinterface a Kierpertext – Navigatioun, Knäppercher, Kierpertext, Etiketten, Fousszeil. Mëttel Gewiicht (500) gëtt standardméisseg fir interaktiv Elementer an Navigatioun benotzt; normal (400) gëtt fir Abschnitter benotzt. Den Ofstand tëscht de Buschtawen ass och bei klenge Gréissten (-0,026em bei 14px, -0,022em bei 16px) merkbar reduzéiert, wat dem Interface eng kondenséiert, terminal Dicht gëtt. Fir alternativ Interpunktioun soll d'Zeechenvariant 'cv11' abegraff ginn. Groussbuchstawen-Etiketten bei 12px benotzen en Ofstand tëscht de Buschtawen +0,05em fir d'Dicht vum Kierpertext auszegläichen.
Intervaller a Form
| Zweck | Bedeitung |
|---|---|
| Dicht | duerchschnëttlech |
| Basis Schrëtt | 20px |
| Knäppchenradius | 12px |
| Kaarteradius | 8px |
| Schied | keng Grenzen amplaz vu Schied |
| Tëscht de Sektiounen | 80px |
| Säitebreet | 1280px |
KI baut Är Websäit am Stil vun Modal op a fëllt se aus
- Fëllt mat Produkter a Posts iwwer de Link aus - Instagram, TikTok, Facebook.
- Inhalt vun Ärer aler Säit transferéieren - gitt einfach d'Adress un.
- Modernen Design op der beschter Engine: React ( Next.js) mat Serverrendering an SEO Optimiséierung direkt aus der Këscht.
- Vollautomatesch SEO-Optimiséierung fir Sichresultater an Empfehlungen fir neuronal Netzwierker.
Ähnlech Stiler
- Slash — Mëtternuechtstëbs mat vergoldete Ledgeren
- AgentQL — Nordliichter iwwer dem Terminal an der Nuecht
- GitHub — E Raumkommandopanel mat biolumineszenten Kontrollpunkten - en däischteren, atmosphäresche Raum, wou en eenzege grénge Schimmer de Wee no vir weist.
- Doppler — Déi violett Beliichtung vum Tresor ëm Mëtternuecht. Déi bal schwaarz Leinwand liicht mat engem eenzege lavendelfaarwegen Signal an engem grénge Bestätegungsliicht, all Uewerfläch gebéit genuch fir ze gräifen.
- Basedash — En Datenterminal mat enger matter Schrëft ëm Mëtternuecht. En däischtert Observatoire, wou Metriken violett a gréng liichten, Schlagzeilen a Serifformen iwwer dem Kaméidi schwiewen, a wäiss pillefërmeg Knäppercher déi eenzeg hell Objeten an engem Raum mat mëllen, schwaarzen Uewerfläche sinn.
- Superwhisper — D'Nordliichter léisen sech iwwer dem Mëtternuechtsglas op
- Better Stack — Mëtternuecht SRE Konsol
- Langbase — Konsole fir d'Mëtternuechtsnordliichter
- Astro — Deep Space Mission Control mat engem eenzege purpurroude Liicht vun engem Niwwel
- Wayfinder — E schwaarze Filmbildschierm mat engem kaum héierbaren Titel, deen iwwer enger Live-Illustratioun schweeft. D'Interface ass éischter e Hellegkeetsschieber wéi e Kontrollpanel.
- HashiCorp — De Kontrollraum um Mëtternuecht mat violettem Neon ass eng däischter technesch Uewerfläch, wou e liichtende sechseckege Kubus als eenzeg Faarfreferenz déngt.
- Umbrel — Eng gemittlech Feierplaz am Nuetsserverraum - en däischteren Zëmmer, wou en eenzege pêchefaarwege Schimmer dat ervirhiewt, wat wierklech wichteg ass.