
Substack
orange blæk på skrivebordet i redaktionen
Substack ligner et veludtjent dashboard i en redaktion – et hvidt lærred, varm, næsten sort tekst og en enkelt lys orange accent, der markerer hvert trin i indholdsskabelsen. Det visuelle hierarki er bygget på tæthed snarere end dekoration: tynde grå linjer adskiller feed-elementer, avatarer er små, metadata er dæmpet, og læserens øje er trænet til at fokusere på den orange opfordring til handling, det orange logo, det orange "Abonner"-link og den orange "Opret"-knap. Overfladerne holdes flade og uhindrede – ingen kortskygger, ingen krompanelelementer – hvilket lader typografien (et kompakt krom-system-UI-element parret med en brugerdefineret serif-overskriftsskrifttype) bære hovedparten af den redaktionelle vægt. Den karakteristiske stil er afdæmpede kromelementer og levende, ensfarvede detaljer: en læseapp, der føles som et publiceringsværktøj.
Et skrivebordslayout med tre kolonner: en fast venstre sidebar (~200px, navigation med ikoner og etiketter, fast tekst), et centerfeed (maks. bredde ~600px, lodret rullende liste over indlæg) og et fast højre sidebar (~300px, søgning + anbefalinger + registrering). Det midterste feed er den redaktionelle kerne – ingen kort, bare indlæg stablet oven på hinanden med tynde skillevægge og 32px mellemrum mellem sektionerne. Hovedbanneret sidder øverst i feedet som et enkelt kort i fuld bredde. Det venstre sidebar indeholder brandlogoet (et orange skilt med overlejrede linjer), seks navigationselementer og en orange "Opret"-knap i fuld bredde nederst. Det højre sidebar indeholder et søgefelt, et registreringskort og en "Næste"-liste til læsning. Navigationen er minimal – ingen øverste bjælke, ingen brødkrummer; sidebaren ER navigationen. Indholdstætheden er høj: indlæg bruger 12-13px metadata og 15-19px brødtekst, hvilket skaber en avislignende rytme snarere end følelsen af en markedsplads' kortgitter.
Fotos er brugergenereret indhold (forfatteravatarer, miniaturebilleder af opslag, opslagsbilleder) – Substack leverer ikke sine egne dekorative fotos. Hovedkortet bruger en turkis til grøn gradient med abstrakte illustrative elementer (geometriske former, stiliserede objekter som kuglepenne og noter) som baggrund. Miniaturebilleder af opslag i højre sidebjælke er små (64px), omgivet af en radius på 8px og fungerer som et eksempel på læselisten. Det overordnede visuelle sprog er tekstbaseret: brugerfladen er et læselærred, og billeder fungerer som små visuelle ankre snarere end at skabe atmosfære.
Palet
Mærke
- Signal Orange
#ff6719— Orange bruges som en sekundær accent til dekorative detaljer og til at fremhæve sjældne signaler. Den bør ikke bruges som den primære farve til opfordringer til handling.
Neutral
- Ink
#363737— Brødtekst – hovedteksten, overskrifter, indlægstitler, tidsstempler og forfatternavne; en varm, næsten sort farve i stedet for ren #000 for lettere læsning. - Paper
#ffffff— Sidens lærred, kortoverflader, inputfelter og navigationsbaggrund er de dominerende overflader, der optager langt størstedelen af grænsefladen. - Charcoal
#232525— Hold musen over for yderligere tekst og links med høje markeringsniveauer; dybere end blæktilstand for kodeblokke og markeringsblokke. - Stone
#777777— En neutral farve understøttes til sekundære UI-elementer, skillevægge og dæmpede etiketter. Den bør ikke bruges som den primære farve til opfordringer til handling. - Ash
#b6b6b6— Tynde kantlinjer, knapkonturer, ikonkonturer, kanter på deaktiverede kontrolelementer. - Mist
#c8c8c8— Delelinjer, diskret baggrund for ikoner, udfyldning af tomme celler i form af et skelet.
Typografi
fra 12 til 32px · 5 trin
- system-ui — udskiftning: -apple-system · konturer 400, 500, 600 · Den primære skrifttype til brugergrænsefladen og brødteksten bruges til navigationsetiketter, knapper, beskedtekst, metadata, inputfelter og alle grænsefladeelementer. Kompakte størrelser på 12-13px for metadata og 15-19px for brødtekst skaber følelsen af et tæt nyhedsfeed. Vægten er 400 for brødtekst, 500 for navigationselementer og knapetiketter og 600 for fremhævede beskedtitler og afsnitsoverskrifter.
- Cahuenga — udskiftning: Charter · konturer 500 · En dekorativ serif-skrifttype til produktoverskrifter (overskrifter i sidepaneler, overskrifter på registreringskort, hovedtekst). Dens mellemvægt og lille linjehøjde giver den et fornemt udseende uden at føles klodset; det er den eneste skrifttype, der udover den orange farve signalerer Substacks identitet.
- Spectral — udskiftning: Charter · konturer 400 · En serif-skrifttype til lange indlæg – bruges i læsesale og nyhedsfeeds for at forbedre læsbarheden af redaktionelt materiale. En lidt strammere linjeafstand (1,20) sikrer behagelig læsning af afsnit, samtidig med at den kompakthed, der er typisk for redaktioner, bevares.
Intervaller og form
| Formål | Mening |
|---|---|
| Tæthed | tæt |
| Grundlæggende trin | 8px |
| Knapradius | 9999px |
| Kortradius | 12px |
| Skygger | ingen grænser i stedet for skygger |
| Mellem sektioner | 32px |
| Sidebredde | 1200px |
AI vil bygge din hjemmeside i Substack -stil og udfylde den
- Fyld med produkter og opslag via linket - Instagram, TikTok, Facebook.
- Overfør indhold fra dit gamle websted – angiv blot adressen.
- Moderne design på den bedste søgemotor: React ( Next.js) med serverrendering og SEO-optimering lige fra starten.
- Fuldautomatiseret SEO-optimering til søgeresultater og anbefalinger til neurale netværk.
Lignende stilarter
- ElevenLabs — Et fotoessay i varme cremefarvede toner med diskrete overskrifter. En notesbog i Bauhaus-stil – æggeskalsfarvet papir, sort blæk og en enkelt lilla og orange accent til produktpræsentation.
- Awesomic — Redaktionelt zinknet med orange tegnsætningstegn, der minder om konfetti
- Monad — redaktionelt teknisk tidsskrift på varmt pergament
- Dub — Links kontrolpanel med mat rispapir
- Seline Analytics — Et stille analysebord på varmt papir
- Notion — En varm papirnotesbog i middagssolen
- Anthropic — Et videnskabeligt felttidsskrift på varmt pergament – rolige elfenbensfarvede overflader, seriferede redaktionelle overskrifter og en enkelt leraccent, der kun vises, når handling er nødvendig.
- Calendly — Mørkeblå blæk på kold marmor
- Augen Pro — Apples hvide præsentation har en klinisk, vægtløs, elektrisk blå farve som den eneste accent i et monokromt rum.
- Antimetal — En redaktionel krønike på cremefarvet papir – en stille morgen i et videnskabeligt tidsskrift, hvor tilbageholdenhed udstråler selvtillid, og seriffer klarer det hårde arbejde.
- Perk — Elektrisk lime på varmt pergamentpapir
- Ditto — Et solbelyst værksted, der skaber prøver af vilde blomster. Varme cremefarvede overflader, en levende gul bundfarve, dyb marineblå blæk, organiske farveformer, der blomstrer bag værket.