Substack
orange bläck på skrivbordet i redaktionen
Substack ser ut som en sliten instrumentpanel för nyhetsrum – en vit duk, varm, nästan svart text och en enda ljusorange accent som markerar varje steg i innehållsskapandet. Den visuella hierarkin bygger på densitet snarare än dekoration: tunna grå linjer separerar flödeselement, avatarer är små, metadata är dämpade och läsarens öga tränas att fokusera på den orangea uppmaningen till handling, den orange logotypen, den orangea "Prenumerera"-länken och den orangea "Skapa"-knappen. Ytorna hålls plana och obegränsade – inga kortskuggor, inga kromade panelelement – vilket låter typografin (ett kompakt kromat systemgränssnittselement i kombination med ett anpassat serif-rubrikens typsnitt) bära den redaktionella tyngden. Den signaturstilen är återhållsamma kromelement och livfulla, enfärgade inslag: en läsapp som känns som ett publiceringsverktyg.
En skrivbordslayout med tre kolumner: en fast vänster sidofält (~200px, navigering med ikoner och etiketter, fast), en mittflöde (maxbredd ~600px, vertikalt rullande lista med inlägg) och en fast höger sidofält (~300px, sökning + rekommendationer + registrering). Mittflödet är den redaktionella kärnan – inga kort, bara inlägg staplade ovanpå varandra med tunna avdelare och 32px mellanrum mellan sektionerna. Huvudbannern sitter högst upp i flödet som ett enda kort i full bredd. Det vänstra sidofältet innehåller varumärkeslogotypen (en orange skylt med överliggande linjer), sex navigeringsobjekt och en orange "Skapa"-knapp i full bredd längst ner. Det högra sidofältet innehåller ett sökfält, ett registreringskort och en "Nästa"-lista för läsning. Navigeringen är minimal – ingen övre fält, inga brödsmulor; sidofältet ÄR navigeringen. Innehållstätheten är hög: inlägg använder 12–13px metadata och 15–19px brödtext, vilket skapar en tidningsliknande rytm snarare än känslan av en marknadsplats kortrutnät.
Foton är användargenererat innehåll (författaravatarer, miniatyrbilder av inlägg, inläggsbilder) – Substack tillhandahåller inte egna dekorativa foton. Huvudkortet använder en turkos till grön toning med abstrakta illustrativa element (geometriska former, stiliserade objekt som pennor och anteckningar) som bakgrund. Miniatyrbilderna av inlägg i den högra sidofältet är små (64px), inneslutna i en radie på 8px och fungerar som en förhandsvisning av läslistan. Det övergripande visuella språket är textbaserat: gränssnittet är en läsduk och bilder fungerar som små visuella ankare snarare än att skapa atmosfär.
Palett
Stämpla
- Signal Orange
#ff6719— Orange används som en sekundär accentfärg för dekorativa detaljer och för att framhäva ovanliga signaler. Den bör inte användas som primärfärg för uppmaningar till handling.
Neutral
- Ink
#363737— Brödtext – huvudtexten, rubriker, inläggstitlar, tidsstämplar och författarnamn; en varm, nästan svart färg istället för ren #000 för enklare läsning. - Paper
#ffffff— Sidans arbetsyta, kortytor, inmatningsfält och navigeringsbakgrund är de dominerande ytor som upptar den stora majoriteten av gränssnittet. - Charcoal
#232525— Håll muspekaren över läget för ytterligare text och länkar med höga markeringsnivåer; djupare än bläckläget för kodblock och markeringsblock. - Stone
#777777— En neutral färg stöds för sekundära UI-element, avdelare och dämpade etiketter. Den bör inte användas som primärfärg för uppmaningar till handling. - Ash
#b6b6b6— Tunna kantlinjer, knappkonturer, ikonkonturer, kanter på inaktiverade kontroller. - Mist
#c8c8c8— Delningslinjer, diskret bakgrund för ikoner, fyllning av tomma celler i form av ett skelett.
Typografi
från 12 till 32px · 5 steg
- system-ui — ersättning: -apple-system · konturer 400, 500, 600 · Det primära teckensnittet för användargränssnittet och brödtexten används för navigeringsetiketter, knappar, meddelandetext, metadata, inmatningsfält och alla gränssnittselement. Kompakta storlekar på 12–13 pixlar för metadata och 15–19 pixlar för brödtext skapar känslan av ett kompakt nyhetsflöde. Vikten är 400 för brödtext, 500 för navigeringselement och knappetiketter och 600 för markerade meddelandetitlar och avsnittsrubriker.
- Cahuenga — ersättning: Charter · konturer 500 · Ett dekorativt serif-typsnitt för produktrubriker (sidofältsrubriker, registreringsrutor, huvudtext). Dess medelvikt och låga radhöjd ger det ett distinkt utseende utan att kännas skrymmande; det är det enda typsnittet som, förutom den orangea färgen, signalerar Substacks identitet.
- Spectral — ersättning: Charter · konturer 400 · Ett serif-teckensnitt för långa inlägg – används i läsrum och nyhetsflöden för att förbättra läsbarheten i redaktionellt material. Ett något snävare radavstånd (1,20) säkerställer bekväm styckeläsning samtidigt som den kompakthet som är typisk för nyhetsrum bibehålls.
Intervaller och form
| Ändamål | Menande |
|---|---|
| Densitet | tät |
| Grundläggande steg | 8px |
| Knappradie | 9999px |
| Kortradie | 12px |
| Skuggor | inga gränser istället för skuggor |
| Mellan sektioner | 32px |
| Sidbredd | 1200px |
AI kommer att bygga din webbplats i Substack -stil och fylla den
- Fyll på med produkter och inlägg via länken - Instagram, TikTok, Facebook.
- Överför innehåll från din gamla webbplats – ange bara adressen.
- Modern design på den bästa sökmotorn: React ( Next.js) med serverrendering och SEO-optimering direkt ur lådan.
- Helautomatisk SEO-optimering för sökresultat och rekommendationer för neurala nätverk.
Liknande stilar
- ElevenLabs — En fotoessä i varma krämfärgade toner med diskreta rubriker. En anteckningsbok i Bauhaus-stil – äggskalfärgat papper, svart bläck och en enda lila och orange accentfärg för produktpresentation.
- Awesomic — Redaktionellt zinknät med orange skiljetecken som påminner om konfetti
- Monad — redaktionell teknisk tidskrift på varmt pergament
- Dub — Links kontrollpanel för matt rispapper
- Seline Analytics — Ett tyst analysbord på varmt papper
- Notion — En varm pappersbok i middagssolen
- Anthropic — En vetenskaplig fälttidskrift på varmt vellum – lugna elfenbensfärgade ytor, serifferade redaktionella rubriker och en enda leraccent som bara dyker upp när handling behövs.
- Calendly — Mörkblått bläck på kall marmor
- Augen Pro — Apples vita presentation har en klinisk, viktlös, elektrisk blå nyans som enda accent i ett monokromt utrymme.
- Antimetal — En redaktionell krönika på krämfärgat papper – en lugn morgon i en vetenskaplig tidskrift, där återhållsamhet förmedlar självförtroende och seriffer gör det tunga arbetet.
- Perk — Elektrisk lime på varmt bakplåtspapper
- Ditto — En solbelyst workshop som skapar prover av vildblommor. Varma krämfärgade ytor, en livfull gul basfärg, djupt marinblått tryckfärg, organiska färgformer som blommar bakom verket.