Modal
Ein phosphoreszierendes Terminal in einem abgedunkelten Serverraum – die einzige Lichtquelle ist ein helles Grün.
Modal funktioniert wie ein phosphoreszierendes Terminal in einem abgedunkelten Serverraum: eine fast schwarze Oberfläche, hellgrüne Schrift und ein einzelner, leuchtend limettengrüner Akzent, der als LED-Statusanzeige dient. Die Designsprache ist entwicklerorientiert – nichtproportionale Codefenster mit Ampelpunkten, isometrische 3D-Icons im charakteristischen Grün und viel Weißraum, wodurch jeweils ein Element in jedem Abschnitt besonders gut zur Geltung kommt. Die Typografie teilt sich in eine benutzerdefinierte Schriftart (Goga) für Überschriften und eine variable Schriftart (Inter) für alle UI-Elemente auf, beide mit schmalem negativem Laufweitenabstand. Die Farben sind gleichmäßig verteilt: Die meisten Bildschirme sind achromatisch, und das leuchtende Limettengrün erscheint nur bei wichtigen Aktionen, dem Logo, 3D-Illustrationen und hervorgehobenen Elementen. Die Komponenten sind flach und rahmenlos, wobei Tiefe durch dezente grüne Ränder und Hintergrundunschärfe anstelle von Schatten erzeugt wird.
Das Modal nutzt ein dunkles Layout in voller Breite mit einer maximalen Breite von 1280px, um den Inhalt optimal aufzunehmen. Das Hero-Fenster ist zentriert: Titel (der erste Satz in Hellgrün), eine Unterüberschrift, zwei Handlungsaufforderungen und ein einzelnes 3D-Objekt als visueller Anker – ohne Trennung vom Sidebar. Die Inhaltsabschnitte folgen einem einheitlichen Rhythmus: Überschrift (Großbuchstaben, Moss 70) → Goga-Titel → dezenter Fließtext, dann entweder ein zweispaltiges Layout mit einer Funktionsbeschreibung (Text + Code/Visualisierung) oder ein dreispaltiges Raster mit Karten. Die Abstände zwischen den Abschnitten sind großzügig – 80px. Die Seite wechselt zwischen tiefen, leeren (#000000) und etwas helleren Hintergrundstreifen (#181818), wobei ein heller Bereich (#def0dd) in der Mitte der Seite als optische Auflockerung dient. Die Navigation besteht aus einer einzigen, fixierten oberen Leiste mit unscharfem Hintergrund – ohne Sidebar oder Mega-Menü. Die Fußzeile ist kompakt und dunkel gehalten, mit dezent grünen Linkspalten. Die Textdichte ist angenehm: Jeder Abschnitt hat ausreichend Platz, und die Kartenraster verwenden maximal drei Spalten.
Die visuelle Sprache von Modal ist in zwei Modi unterteilt: leuchtende 3D-Produktdarstellungen und dunkle Codefenster-Mockups. Im Mittelpunkt steht ein einzelner 3D-Würfel, der mit einem Marketing-Farbverlauf (von Limettengrün zu Smaragdgrün) gerendert und von einem radialen Farbverlaufshalo umgeben ist, der den leeren Raum in grünes Licht taucht – der charakteristische visuelle Stil der Marke. Workload-Karten enthalten isometrische 3D-Icons (ein Drahtgitterwürfel, eine Treppe, Ebenen), die im gleichen Limettengrün vor dunklem Hintergrund dargestellt sind. Code und Benchmark-Ergebnisse werden als Terminalfenster-Karten mit Ampelpunkten, Syntaxhervorhebung in einer phosphoreszierenden Farbpalette und einem dezenten grünen Rahmen präsentiert – sie ähneln Screenshots einer echten Kommandozeilenschnittstelle. Kundenlogos werden als entsättigte grün-graue Labels in einer einzelnen, kontrastarmen Zeile angezeigt und vermitteln so Vertrauen ohne visuelle Konkurrenz. Die Gesamtdichte ist gering – die meisten Seiten enthalten überwiegend Text, und Bilder werden als einzelne Blickfänge und nicht als Fotoraster präsentiert. Es gibt keine Fotos. Das gesamte visuelle System ist gerendert, geometrisch und strahlend.
Palette
Marke
- Lime Pulse
#7fee64— Die wichtigsten Elemente der Corporate Identity sind das Logo, der zentrale Handlungsaufruf (CTA), die Tag-Füllung, die aktiven Zustände und die Grundfarbe der Illustration.
Neutral
- Phosphor White
#ddffdc— Der Haupttext, die Titelfarbe, die Symbolumrisse und der ausgefüllte Schaltflächentext bilden die lesbare Hauptfläche. - Void Black
#000000— Seitenleinwand, die tiefste Hintergrundebene - Ground Iron
#181818— Hauptschaltflächenfüllung, Kartenoberflächen in dunklen Bereichen, Basisfläche der Benutzeroberfläche. - Carbon Veil
#212525— Erhöhte Flächen, Navigationshintergrund, etwas heller als der Boden. - Circuit Border
#485346— Der Umriss-/Geisteraktionsrahmen, die wichtigste interaktive dünne Linie, ist in einem gedämpften grünlich-grauen Farbton gehalten. - Phosphor Blue-Black
#1f2a33— Sekundäre, dünne Markierungslinien, die die Striche zwischen den dunklen Streifen unterteilen.
Typografie
von 12 auf 64 Pixel · 8 Schritte
- Goga — Ersatz: Inter Tight or Space Grotesk · Umrisse 400, 500 · Schriftart für Überschriften und Unterüberschriften – Wird für alle Überschriften (H1–H4) und Karten verwendet. Goga ist eine spezielle geometrische serifenlose Schriftart mit schmalen Öffnungen und leicht eckigen Enden. Die mittlere Strichstärke (500) ist für die Hervorhebung von Kartenüberschriften reserviert; die normale Strichstärke (400) wird für Hero- und Abschnittsüberschriften verwendet. Um auf die alternativen Glyphenformen zuzugreifen, die die Identität von Modal definieren, muss das Stilset „ss01“ aktiviert sein. Der negative Buchstabenabstand verringert sich stufenlos von -0,007em bei 48px auf -0,017em bei 21px.
- Inter Variable — Ersatz: Inter · Umrisse 400, 500 · Benutzeroberfläche und Fließtext – Navigation, Schaltflächen, Textkörper, Beschriftungen, Fußzeile. Für interaktive Elemente und Navigation wird standardmäßig eine mittlere Schriftstärke (500) verwendet; für Absätze eine normale (400). Der Buchstabenabstand ist selbst bei kleinen Schriftgrößen deutlich reduziert (-0,026em bei 14px, -0,022em bei 16px), wodurch die Benutzeroberfläche kompakt und übersichtlich wirkt. Für alternative Interpunktion sollte die Zeichenvariante „cv11“ verwendet werden. Beschriftungen in Großbuchstaben bei 12px verwenden einen Buchstabenabstand von +0,05em, um die Dichte des Fließtextes auszugleichen.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | Durchschnitt |
| Grundlegender Schritt | 20px |
| Radius der Schaltfläche | 12px |
| Kartenradius | 8px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 80px |
| Seitenbreite | 1280px |
KI erstellt Ihre Website im Modal -Stil und füllt sie aus.
- Teile deine Produkte und Beiträge über den Link – Instagram, TikTok, Facebook.
- Übertragen Sie Inhalte von Ihrer alten Website – geben Sie einfach die Adresse an.
- Modernes Design auf der besten Plattform: React ( Next.js) mit serverseitigem Rendering und SEO-Optimierung direkt nach der Installation.
- Vollautomatisierte SEO-Optimierung für Suchergebnisse und Empfehlungen durch neuronale Netze.
Ähnliche Stile
- Slash — Mitternachtsgewölbe mit vergoldeten Büchern
- AgentQL — Nordlichter über dem Terminal bei Nacht
- GitHub — Ein Weltraum-Kommandopanel mit biolumineszenten Kontrollpunkten – ein dunkler, atmosphärischer Arbeitsbereich, in dem ein einzelner grüner Schein den Weg nach vorn weist.
- Doppler — Das Gewölbe erstrahlt um Mitternacht in violettem Licht. Die fast schwarze Leinwand leuchtet mit einem einzelnen lavendelfarbenen Signal und einem grünen Bestätigungslicht; jede Oberfläche ist so gewölbt, dass man sie greifen kann.
- Basedash — Ein Datenterminal in Mitternachtsblau mit matter Schrift. Eine dunkle Beobachtungsstation, in der Messwerte violett und grün leuchten, Serifenschriften über dem Rauschen schweben und weiße, pillenförmige Knöpfe die einzigen hellen Objekte in einem Raum mit weichen, schwarzen Oberflächen sind.
- Superwhisper — Die Nordlichter lösen sich über dem Mitternachtsglas auf.
- Better Stack — Mitternachts-SRE-Konsole
- Langbase — Midnight Northern Lights Konsole
- Astro — Deep Space Mission Control mit einem einzelnen violetten Leuchten eines Nebels
- Wayfinder — Ein schwarzer Bildschirm mit einem kaum hörbaren Titel über einer animierten Illustration. Die Bedienung erfolgt über einen Helligkeitsregler anstelle eines Bedienfelds.
- HashiCorp — Der Kontrollraum um Mitternacht, erleuchtet von violettem Neonlicht, ist eine dunkle, technische Fläche, auf der ein leuchtender sechseckiger Würfel als einziger Farbreferenzpunkt dient.
- Umbrel — Eine gemütliche Feuerstelle im Nachtserverraum – ein dunkler Raum, in dem ein einzelner pfirsichfarbener Schein das hervorhebt, was wirklich wichtig ist.