Superhuman
Redaktionelles Panel zur goldenen Stunde
Superhuman vereint redaktionelle Fotografie und Software-UI auf einzigartige Weise: Ein warmer, pergamentartiger Hintergrund (nie reinweiß) umrahmt bordeauxrote Branding-Elemente und leuchtend violette Akzente. Die in 460 Punkt gesetzten Überschriften wirken dezent und lassen die ganzseitigen, filmreifen Fotos für sich sprechen, während transparente Produktkarten wie Glas über den Bildern schweben. Die Farbpalette bleibt größtenteils ruhig und redaktionell: cremefarbene Oberflächen, anthrazitfarbene Schrift, dezente warmgraue Ränder und großzügige Abstände zwischen den Elementen. Farbe wird gezielt für markenspezifische Akzente eingesetzt – ein einzelner bordeauxroter Call-to-Action, violette Links, ein hellfliederfarbener Add-on-Button. Das System verzichtet bewusst auf starke Schatten und Farbverläufe auf den UI-Oberflächen. Die Tiefe wird durch überlagerte Fotografien und eine subtile Hintergrundunschärfe im Titel erzielt, nicht durch einen Stapeleffekt.
Das Hauptelement ist ein ganzseitiges Foto mit zentrierter Überschrift (48–64 px/460) und einem Call-to-Action, der mit einem Weinbild gefüllt ist. Links und rechts darüber befinden sich schwebende, transparente Produktkarten. Darunter folgt ein weißer Logostreifen (6 Zellen pro Zeile, maximale Breite begrenzt), dann ein Tab-Bereich mit weißen Karten auf Pergamentpapier. Etwa zwei Drittel der Seite entfernt unterbricht ein dunkeltürkisfarbener Streifen – ganzseitig, zweispaltig (Bild links, Text rechts) – den Rhythmus und erzeugt beim Scrollen den einzigen Farbkontrast. Anschließend schließt sich ein stimmungsvoller Farbverlauf an. Der vertikale Abstand zwischen den Abschnitten beträgt 64–96 px. Die maximale Inhaltsbreite beträgt zentriert ca. 1200 px, wobei das Hauptelement und der dunkle Streifen die gesamte Breite des Viewports einnehmen. Die Navigation besteht aus einem einzelnen, fixierten Header mit unscharfem Hintergrund; es gibt keine Sidebar und kein Mega-Menü. Die Fußzeile ist eine bordeauxrote Seite in voller Breite mit einem mehrspaltigen Link-Layout. Der Gesamtrhythmus ist wie folgt: Hauptbereich → ruhiger weißer/cremefarbener Inhalt → dunkler Streifen mit dem Hauptbild → stimmungsvoller Farbverlauf → bordeauxrote Fußzeile, wobei helle und dunkle Streifen abwechselnd für ein redaktionelles Tempo sorgen.
Das primäre visuelle Element ist die filmische Fotografie: Ein Porträt in voller Breite vor weitem Himmel bildet den Fokus, darunter befindet sich ein zweiter, stimmungsvoller Streifen. Das Bild ist warm getönt, dezent gedämpft und im Profil aufgenommen, was an die goldene Stunde erinnert und einen eher redaktionellen als geschäftlichen Eindruck vermittelt. Ein dunkler Streifen mit durchscheinenden geometrischen Rechtecken und handgeschriebenen Inschriften liegt über dem Foto eines in Gedanken versunkenen Mannes – eine Collage aus verschiedenen Oberflächen, kein einzelnes Bild. Die Benutzeroberfläche wird als schwebende Glaskarte direkt über dem Foto präsentiert, nicht als separate Screenshots. Bis auf den stimmungsvollen Streifen mit Farbverlauf gibt es keine Stockillustrationen, keine 3D-Renderings und keine abstrakten Dekorationselemente. Die Icons sind minimalistische, monochrome Linien-Icons mit einer Breite von ca. 16–20 Pixeln und einer einheitlichen Breite, die der Schriftstärke von 460 Punkt entspricht.
Palette
Marke
- Midnight Wine
#421d24— Die Hauptaktionsschaltflächen, das Werbebanner und die Fußzeile sind in einem warmen, fast schwarzen Burgunderrot gehalten, das eher an Tinte als an Rot erinnert und die Farbpalette verankert, ohne aufdringlich zu wirken. - Royal Violet
#714cb6— Lila dient zur Hervorhebung von Links, Schlagwörtern und kurzen Phrasen. Es sollte nicht als Hauptfarbe für Handlungsaufforderungen verwendet werden.
Neutral
- Lilac Mist
#d4c7ff— Die sekundäre Flächenfüllung, die Leuchtsymbole und die Hintergründe der Geisterschaltflächen weisen alle eine gedämpfte violette Farbe auf, die den Stil der Marke andeutet, ohne dabei übermäßig auf sich aufmerksam zu machen. - Deep Lagoon
#0c4243— Der dunkle Hintergrund des Comics, der als zentrales narratives Element dient, ist die einzige dunkle Fläche im System und wird mit einem darüberliegenden geometrischen Muster kombiniert. - Warm Parchment
#f2f0eb— Die Arbeitsfläche der Seite ist das dominierende Element; ein warmer Cremeton ersetzt Weiß als Grundfarbe und verleiht dem gesamten System eine redaktionelle Wärme. - Soft Mist
#e3e3e2— Feine Ränder, Kartenkonturen, Trennlinien – ein warmes, helles Grau, das mit dem Pergament verschmilzt, aber die Kanten klar definiert. - Ink Charcoal
#292827— Fließtext, Überschriften, Symbolumrisse – ein warmer, fast schwarzer Farbton mit genügend Braunanteil, um sich wie Tinte auf Papier anzufühlen, niemals kalt #000 - Stone Gray
#666666— Sekundärer Fließtext, unterstützende Texte, diskrete Beschreibungen – ein einheitliches Mittelgrau, sparsam verwendet, um niemals mit dem Haupttext zu konkurrieren.
Typografie
von 12 auf 64 Pixel · 8 Schritte
- Super Sans VF — Ersatz: Inter (closest open equivalent for variable weight range) · Umrisse 460, 500, 540, 600, 700 · Eine einzige Schriftart im gesamten System. Die Achsenvariablen decken den Bereich von 460 (eine charakteristische, leicht beschnittene Schriftart für alle großen Überschriften) bis 540 (hervorgehobener Fließtext) und 700 (kleine, fette Bildunterschriften) ab. Ein speziell entwickelter visueller Filter lässt Überschriften in Stärke 460 durchdachter und nicht willkürlich wirken – bei 48–64 Pixeln und engem Buchstabenabstand wird der „leicht beschnittene“ Effekt als selbstbewusst und nicht als dünn wahrgenommen.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | dicht |
| Grundlegender Schritt | 8px |
| Radius der Schaltfläche | 16px |
| Kartenradius | 16px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 64-96px |
| Seitenbreite | 1200px |
KI erstellt Ihre Website im Superhuman -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
- AI for Business — Brutalistischer Editorial-Showroom in warmen Grautönen
- Jeton — Ein Leitartikel über Fintech auf warmem Marmor
- Airtable — Ein gemütliches Seminar mit in verschiedenen Farben gekennzeichneten Kapiteln
- Osmo — Das Entwicklermuseum auf grauem Beton
- Linktr — Die redaktionellen Poster sind wie Bonbons gestapelt. Die Website ist in Farbblöcken gestaltet, mit leuchtend grünen Überschriften vor kobaltblauen Wänden und weißen, pillenförmigen Navigationselementen, die über burgunderroten Feldern schweben.
- Outsource Consultants — Ein großformatiges Architekturblatt auf cremefarbenem Papier. Eine monografische Ästhetik, bei der ein einzelner leuchtender Indigofleck das ansonsten warme, typografisch maximalistische Raster unterbricht.
- Streamtime — Taktiles kreatives Moodboard – Designer-Scrapbooking-Tisch
- Switch-Lit — Redaktionelles Raster, mit Tinte auf cremefarbenem Papier gedruckt
- HubSpot — Ein warmer Cremeton mit einem einzelnen orangefarbenen Akzent. HubSpot erinnert an ein Designermagazin auf hochwertigem Papier – Serifenschriften, warme Cremetöne auf den Seiten und ein einzelner, leuchtend orangefarbener Akzent, der die wichtigsten Punkte hervorhebt.
- Granola — Feldnotizen auf warmem Pergament – Granola liest sich wie ein abgenutztes Moleskine-Notizbuch, das auf einem sonnenbeschienenen Schreibtisch aufgeschlagen ist: Serifenschriften verleihen den Überschriften ein Gefühl von Solidität, organische grüne Akzente wirken wie Tinte auf Pflanzenbasis, und feine Linien in den Rändern der Karten erinnern an handgeschriebene Notizen.
- Secure — Ein Gespräch in einem europäischen Café bei sanftem Tageslicht ist eine warme, stilvolle Interpretation von Videotelefonie, bei der sich die Überschriften in Serifenschrift eher wie ein nachdenklicher Zeitschriftenartikel als wie eine Produktseite eines Technologieunternehmens lesen.
- Mockups made easy — Editorial-Designstudio auf weißem Papier