Superlist
Ein nächtlicher Arbeitsplatz mit korallenroten Glühfäden – eine ruhige, auberginefarbene App-Oberfläche, auf der ein einzelner warmer orangefarbener Funke jede Aktion signalisiert.
Superlist setzt auf eine produktive Sprache in tiefen Violetttönen: dunkles Aubergine, warmes Koralle als einzige Primärfarbe und große serifenlose Überschriften, die die gesamte Atmosphäre einfangen. Die Benutzeroberfläche vermittelt das Gefühl konzentrierter Arbeit bis spät in die Nacht – ruhig, vielschichtig und souverän. Farbe wird lediglich als funktionales Stilmittel für Handlungsaufforderungen, aktive Zustände und wichtige Punkte eingesetzt. Die Oberflächen sind in subtilen dunklen Tönen mit violettem Unterton gehalten (#181824 → #26253b). Reines Schwarz wird vermieden, um eine warme, nicht sterile Tiefenwirkung zu erzielen. Die Komponenten zeichnen sich durch großzügige, abgerundete Formen (20-Pixel-Karten, Pillenschaltflächen), sanfte Schatten und angenehme Abstände von 10–16 Pixeln anstelle enger Raster aus. Der Stil der Überschriften ist entscheidend: Eine Schriftstärke von 600 Punkt bei 70–88 Pixeln und einem engen Buchstabenabstand von -0,02em lässt den Text typografisch und nicht wie eine Benutzeroberfläche wirken – er ähnelt eher redaktionellen Texten als SaaS-Anwendungen.
Dunkle Abschnitte erstrecken sich über die gesamte Seitenbreite und enthalten zentrierte Inhaltscontainer in maximaler Breite. Der Hauptabschnitt ist vertikal zentriert und enthält eine Überschrift, einen Untertext und einen Call-to-Action (CTA). Darauf folgt ein großer Produkt-Screenshot, der den nächsten Abschnitt überlappt. Die nachfolgenden Abschnitte wechseln zwischen zentrierten Textblöcken und Kartenraster. Der Bewertungsbereich verwendet ein dreispaltiges Raster mit Bewertungskarten und 16 Spaltenabständen. Die Navigation besteht aus einer einzelnen oberen Leiste mit einem Logo links, zentrierten Links und Anmeldeoptionen rechts – ohne feste Seitenleiste oder Mega-Menü. Die großzügigen Abstände zwischen den Abschnitten (16 Spalten) erzeugen einen luftigen, redaktionellen Rhythmus anstelle eines dichten Produktrasters.
Der visuelle Bereich wird von Produkt-Screenshots dominiert – ein großes Bild mit abgerundeten Ecken, das die Benutzeroberfläche der App zeigt, füllt den Haupt- und Nebenbereich. Fotos werden nur sparsam eingesetzt, beispielsweise als Benutzeravatare oder Vorschauen von In-App-Medien (wie das Konzertbild im rechten Bereich des Produkt-Mockups). Die Logos in der Vertrauensleiste sind schlichte, weiße Textsymbole. Es gibt keine dekorativen Illustrationen, keine abstrakten Grafiken und keine 3D-Renderings. Die visuelle Strategie besteht darin, das Produkt in seiner vollen Größe zu präsentieren, die emotionale Wirkung der Typografie zu überlassen und Koralle als einzige Akzentfarbe zu verwenden.
Palette
Marke
- Coral Ember
#ff4a36— Orange wird als sekundäre Akzentfarbe für dekorative Details und zur Hervorhebung seltener Hinweise verwendet. Es sollte nicht als Hauptfarbe für Handlungsaufforderungen eingesetzt werden.
Neutral
- Aubergine Canvas
#181824— Der Seitenhintergrund, die Hauptfläche, ist in einem warmen, dunklen Farbton gehalten, der reines Schwarz ersetzt und die Benutzeroberfläche eher geschichtet als flach erscheinen lässt. - Elevated Plum
#26253b— Kartenoberflächen, Eingabefelder, Navigationscontainer – einen Schritt einfacher als Canvas, um Tiefe ohne sichtbare Begrenzung zu erzeugen. - Pure White
#ffffff— Hauptüberschriften, Schaltflächentexte und Symbolumrisse – maximaler Kontrast auf dunklem Hintergrund. - Fog Text
#696f81— Der Haupttext, die Unterüberschriften und die dezenten Ränder – ein Kontrastverhältnis von 7:1 für angenehmes Lesen vor einem auberginefarbenen Hintergrund. - Ash Text
#8e8da0— Für sekundäre UI-Elemente, Trennlinien und ausgeblendete Beschriftungen wird eine neutrale Farbe empfohlen. Sie sollte nicht als primäre Farbe für Handlungsaufforderungen verwendet werden. - Mist Highlight
#a3a3a7— Dezente Ränder, Trennlinien und inaktive Navigationselemente erzeugen einen dezenten neutralen Ton, der sich dennoch vom Hintergrund abhebt.
Typografie
von 12 auf 88 Pixel · 9 Schritte
- sans-serif — Ersatz: Inter · Umrisse 400 · sans-serif - in den extrahierten Daten gefunden, aber von der KI nicht beschrieben.
- Haffer XH SemiBold — Ersatz: Inter Tight · Umrisse 400, 600 · Die primäre Schriftart für Überschriften und Texte. Sie wird in einer Größe von 70–88 Pixeln für Hero-Überschriften mit einem Buchstabenabstand von -0,02em und einer Strichstärke von 600 verwendet. Der geringe Buchstabenabstand und die große Buchstabenhöhe verleihen den Überschriften einen redaktionellen Charakter und lassen die dunkle Benutzeroberfläche eher wie ein Magazincover als wie ein Dashboard wirken. Alternativ kann InterTight oder General Sans in Fettdruck verwendet werden.
- Jersey 10 — Ersatz: Anybody · Umrisse 400 · Eine große, dekorative Schriftart für Akzentzahlen und Hervorhebungen. Wird sparsam in sehr großen Größen verwendet, um typografische Akzente zu setzen. Kann durch Anybody oder Cabinet Grotesk ersetzt werden.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | Durchschnitt |
| Grundlegender Schritt | 10-16px |
| Radius der Schaltfläche | 100px |
| Kartenradius | 20px |
| Schatten | weiche Schatten |
| Zwischen den Abschnitten | 80px |
| Seitenbreite | 1200px |
KI erstellt Ihre Website im Superlist -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
- DNA — Mitternachtssternwarte, gesehen durch eine Partikellinse
- Abetterlou — Funkeln auf Sattelleder – eine warme, cremige Schriftart, die vor einem tief kaffeeschwarzen Hintergrund leuchtet, mit bernsteinfarbenen Knöpfen, die sich anfühlen wie heißes Metall, das in die Seite gepresst ist.
- Galileo-ft — Eine Kommandozentrale im Weltraum mit elektrisch blauen Signalen
- Decide AI — Sternwarte um Mitternacht - Minzsignal
- Redis Agency — Die nach Feierabend geöffnete Redaktionswerkstatt ist ein stockdunkler Ort, an dem die gesamte Markengestaltung mit Serifenschriften und einem einzigen roten Rettich erfolgt.
- Spellbook — Ein nachtschwarzer Gerichtssaal, erleuchtet von korallenroter Tinte – eine dunkle redaktionelle Oberfläche, auf der nur der warme, orangefarbene Strich des Stiftes zu hören ist.
- Linear — Mitternachts-Präzisionsinstrument
- Origin Financial — Eine Mitternachtsgalerie stiller Opulenz. Ein ruhiger, fast dunkler Raum, in dem große Serifenschriften und einige beleuchtete Farbtafeln den Eindruck erwecken, dass die Finanzwelt ein sorgfältig kuratiertes Kunstwerk ist.
- Hyperstudio — Das Muster ist in Obsidian eingeritzt. Text und feine Linien umrahmen einen weißen, rein schwarzen Raum, in dem gelegentlich goldene Kompassmarkierungen den Weg weisen.
- Air — Skulptur „Mitternachtshimmel durch Glas“
- Raycast — Mitternachts-Kommandozentrale, Korallen-Neon
- dope.security — Mitternachtsterminal mit violetten Leuchtfeuern