Substack
orangefarbene Tinte auf dem Schreibtisch in der Redaktion
Substack wirkt wie ein vertrautes Newsroom-Dashboard: eine weiße Fläche, warmer, fast schwarzer Text und ein einzelner leuchtend orangefarbener Akzent, der jeden Schritt der Content-Erstellung markiert. Die visuelle Hierarchie basiert auf Dichte statt auf Dekoration: Dünne graue Linien trennen die Feed-Elemente, Avatare sind klein, Metadaten dezent, und der Blick des Lesers wird auf den orangefarbenen Call-to-Action, das orangefarbene Logo, den orangefarbenen „Abonnieren“-Link und den orangefarbenen „Erstellen“-Button gelenkt. Die Oberflächen sind flach und frei gestaltet – keine Kartenschatten, keine Chrome-Panel-Elemente –, sodass die Typografie (ein kompaktes Chrome-System-UI-Element kombiniert mit einer eigens entwickelten Serifenschrift für Überschriften) die redaktionelle Hauptrolle spielt. Der charakteristische Stil besteht aus zurückhaltenden Chrome-Elementen und lebendigen, einfarbigen Akzenten: eine Lese-App, die sich wie ein Publishing-Tool anfühlt.
Das Desktop-Layout besteht aus drei Spalten: einer fixierten linken Seitenleiste (ca. 200 px, Navigation mit Symbolen und Beschriftungen, fixiert), einem zentralen Feed (max. Breite ca. 600 px, vertikal scrollende Beitragsliste) und einer fixierten rechten Seitenleiste (ca. 300 px, Suche, Empfehlungen und Registrierung). Der zentrale Feed bildet das redaktionelle Zentrum – keine Karten, sondern Beiträge, die mit schmalen Trennlinien und 32 px Abstand zwischen den Abschnitten übereinander gestapelt sind. Das Hauptbanner befindet sich als einzelne Karte in voller Breite am oberen Rand des Feeds. Die linke Seitenleiste enthält das Markenlogo (ein orangefarbenes Symbol mit überlagerten Linien), sechs Navigationspunkte und unten einen orangefarbenen Button „Erstellen“ in voller Breite. Die rechte Seitenleiste enthält ein Suchfeld, eine Registrierungskarte und eine Leseliste mit dem Titel „Als Nächstes“. Die Navigation ist minimalistisch – keine obere Leiste, keine Breadcrumbs; die Seitenleiste dient als Navigation. Die Inhaltsdichte ist hoch: Beiträge verwenden 12-13px Metadaten und 15-19px Fließtext, wodurch eher ein zeitungszeitungsartiger Rhythmus als das Erscheinungsbild des Kartenrasters eines Marktplatzes entsteht.
Fotos sind nutzergenerierte Inhalte (Autoren-Avatare, Beitragsminiaturen, Beitragsbilder) – Substack stellt keine eigenen Bilder zur Verfügung. Die Hauptkarte verwendet einen türkis-grünen Farbverlauf mit abstrakten Illustrationselementen (geometrische Formen, stilisierte Objekte wie Stifte und Notizen) als Hintergrund. Die Beitragsminiaturen in der rechten Seitenleiste sind klein (64 px), von einem Radius von 8 px umschlossen und dienen als Vorschau der Leseliste. Die visuelle Gestaltung ist insgesamt textbasiert: Die Benutzeroberfläche ist eine Lesefläche, und Bilder dienen eher als kleine visuelle Ankerpunkte denn zur Schaffung einer bestimmten Atmosphäre.
Palette
Marke
- Signal Orange
#ff6719— 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
- Ink
#363737— Fließtext – der Haupttext, Überschriften, Beitragstitel, Zeitstempel und Autorennamen; eine warme, fast schwarze Farbe anstelle von reinem #000 für bessere Lesbarkeit. - Paper
#ffffff— Die Seitenfläche, die Kartenoberflächen, die Eingabefelder und der Navigationshintergrund sind die dominierenden Oberflächen, die den größten Teil der Benutzeroberfläche ausmachen. - Charcoal
#232525— Beim Überfahren mit der Maus werden zusätzlicher Text und Links mit hoher Auswahlstufe angezeigt; die Auswahlmöglichkeiten sind umfangreicher als im Freihandmodus und umfassen Codeblöcke und Auswahlblöcke. - Stone
#777777— 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. - Ash
#b6b6b6— Dünne Rahmenlinien, Umrisse von Schaltflächen, Umrisse von Symbolen, Rahmen um deaktivierte Steuerelemente. - Mist
#c8c8c8— Trennlinien, unaufdringlicher Hintergrund für Symbole, Ausfüllen leerer Zellen in Form eines Skeletts.
Typografie
von 12 auf 32 Pixel · 5 Schritte
- system-ui — Ersatz: -apple-system · Umrisse 400, 500, 600 · Die primäre Schriftart für Benutzeroberfläche und Fließtext wird für Navigationsbeschriftungen, Schaltflächen, Nachrichtentexte, Metadaten, Eingabefelder und alle Oberflächenelemente verwendet. Kompakte Schriftgrößen von 12–13 Pixel für Metadaten und 15–19 Pixel für Fließtext erzeugen den Eindruck eines dichten Newsfeeds. Die Schriftstärke beträgt 400 für Fließtext, 500 für Navigationselemente und Schaltflächenbeschriftungen sowie 600 für hervorgehobene Nachrichtentitel und Abschnittsüberschriften.
- Cahuenga — Ersatz: Charter · Umrisse 500 · Eine charakteristische, dekorative Serifenschrift für Produktüberschriften (Seitenleistenüberschriften, Registrierungskartenüberschriften, Haupttext). Ihre mittlere Strichstärke und geringe Zeilenhöhe verleihen ihr ein edles Erscheinungsbild, ohne dabei klobig zu wirken; sie ist neben der orangen Farbe die einzige Schriftart, die die Identität von Substack unterstreicht.
- Spectral — Ersatz: Charter · Umrisse 400 · Eine Serifenschrift für längere Texte – verwendet in Lesesälen und Newsfeeds, um die Lesbarkeit redaktioneller Inhalte zu verbessern. Ein etwas engerer Zeilenabstand (1,20) sorgt für angenehmes Lesen der Absätze und bewahrt gleichzeitig die für Redaktionen typische Kompaktheit.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | dicht |
| Grundlegender Schritt | 8px |
| Radius der Schaltfläche | 9999px |
| Kartenradius | 12px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 32px |
| Seitenbreite | 1200px |
KI erstellt Ihre Website im Substack -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
- ElevenLabs — Eine Fotostrecke in warmen Cremetönen mit dezenten Überschriften. Ein Notizbuch im Bauhaus-Stil – eierschalenfarbenes Papier, schwarze Tinte und ein einzelner violetter und orangefarbener Akzent zur Produktpräsentation.
- Awesomic — Redaktionelles Zinkgewebe mit orangefarbenen Satzzeichen, die an Konfetti erinnern
- Monad — redaktionelles Fachjournal auf warmem Pergament
- Dub — Link's mattes Reispapier-Bedienfeld
- Seline Analytics — Ein ruhiger analytischer Tisch auf warmem Papier
- Notion — Ein warmes Notizbuch aus Papier in der Mittagssonne
- Anthropic — Ein wissenschaftliches Feldtagebuch auf warmem Pergament – ruhige elfenbeinfarbene Oberflächen, serifenbesetzte Überschriften und ein einzelner Akzent in Lehmfarbe, der nur dann erscheint, wenn Handlungsbedarf besteht.
- Calendly — Dunkelblaue Tinte auf kaltem Marmor
- Augen Pro — Apples weiße Präsentation zeichnet sich durch ein klinisch-schwereloses, elektrisches Blau als einzigen Akzent in einem monochromen Raum aus.
- Antimetal — Ein redaktioneller Bericht auf cremefarbenem Papier – ein ruhiger Morgen in einer wissenschaftlichen Zeitschrift, wo Zurückhaltung Selbstvertrauen vermittelt und Serifen die Hauptarbeit leisten.
- Perk — Elektrisches Limettengrün auf warmem Pergamentpapier
- Ditto — Eine sonnendurchflutete Werkstatt, in der Wildblumenmuster entstehen. Warme cremefarbene Oberflächen, ein leuchtendes Gelb als Grundfarbe, tiefblaue Tinten, organische Farbformen, die hinter dem Werk erblühen.