Substack
oransje blekk på skrivebordet i redaksjonskontoret
Substack ser ut som et velbrukt dashbord i nyhetsredaksjonen – et hvitt lerret, varm, nesten svart tekst og en enkelt lys oransje aksent som markerer hvert trinn i innholdsproduksjonen. Det visuelle hierarkiet er bygget på tetthet snarere enn dekorasjon: tynne grå linjer skiller feedelementer, avatarer er små, metadata er dempet, og leserens øye er trent til å fokusere på den oransje handlingsfremmende oppfordringen, den oransje logoen, den oransje «Abonner»-lenken og den oransje «Opprett»-knappen. Overflatene holdes flate og uhindrede – ingen kortskygger, ingen krompanelelementer – slik at typografien (et kompakt krom-systemgrensesnittelement parret med en tilpasset serif-overskriftsskrift) bærer hovedtyngden av den redaksjonelle vekten. Signaturstilen er beherskede kromelementer og livlige, ensfargede innslag: en leseapp som føles som et publiseringsverktøy.
Et skrivebordslayout med tre kolonner: en fast venstre sidefelt (~200 piksler, navigasjon med ikoner og etiketter, fast), en midtre feed (maks. bredde ~600 piksler, vertikalt rullende liste over innlegg) og en fast høyre sidefelt (~300 piksler, søk + anbefalinger + registrering). Midtre feeden er den redaksjonelle kjernen – ingen kort, bare innlegg stablet oppå hverandre med tynne skillevegger og 32 piksler mellomrom mellom seksjonene. Hovedbanneret sitter øverst i feeden som et enkelt kort i full bredde. Venstre sidefelt inneholder merkevarelogoen (et oransje skilt med overliggende linjer), seks navigasjonselementer og en oransje "Opprett"-knapp i full bredde nederst. Høyre sidefelt inneholder et søkefelt, et registreringskort og en "Neste"-liste for lesing. Navigasjonen er minimal – ingen toppfelt, ingen brødsmuler; sidefeltet ER navigasjonen. Innholdstettheten er høy: innlegg bruker 12–13 piksler metadata og 15–19 piksler brødtekst, noe som skaper en avislignende rytme i stedet for følelsen av et markedsplasskortnett.
Bilder er brukergenerert innhold (forfatteravatarer, miniatyrbilder av innlegg, innleggsbilder) – Substack tilbyr ikke egne dekorative bilder. Hovedkortet bruker en turkis til grønn gradient med abstrakte illustrerende elementer (geometriske former, stiliserte objekter som penner og notater) som bakgrunn. Miniatyrbildene av innlegg i høyre sidefelt er små (64 piksler), omsluttet av en radius på 8 piksler, og fungerer som en forhåndsvisning av leselisten. Det overordnede visuelle språket er tekstbasert: grensesnittet er et leselerret, og bilder fungerer som små visuelle ankere i stedet for å skape atmosfære.
Palett
Merke
- Signal Orange
#ff6719— Oransje brukes som en sekundær aksent for dekorative detaljer og for å fremheve sjeldne signaler. Den bør ikke brukes som primærfarge for handlingsfremmende oppfordringer.
Nøytral
- Ink
#363737— Brødtekst – hovedteksten, overskrifter, innleggstitler, tidsstempler og forfatternavn; en varm, nesten svart farge i stedet for ren #000 for enklere lesning. - Paper
#ffffff— Sidelerretet, kortflatene, inndatafeltene og navigasjonsbakgrunnen er de dominerende overflatene som opptar det store flertallet av grensesnittet. - Charcoal
#232525— Hold musepekeren over for tilleggstekst og lenker med høye valgnivåer; dypere enn blekkmodus for kodeblokker og valgblokker. - Stone
#777777— En nøytral farge støttes for sekundære UI-elementer, skillevegger og dempede etiketter. Den bør ikke brukes som primærfarge for handlingsfremmende oppfordringer. - Ash
#b6b6b6— Tynne kantlinjer, knappeomriss, ikonomriss, kantlinjer på deaktiverte kontroller. - Mist
#c8c8c8— Delelinjer, diskret bakgrunn for ikoner, fylling av tomme celler i form av et skjelett.
Typografi
fra 12 til 32 piksler · 5 trinn
- system-ui — erstatning: -apple-system · omriss 400, 500, 600 · Primærskriften for brukergrensesnittet og brødteksten brukes til navigasjonsetiketter, knapper, meldingstekst, metadata, inndatafelt og alle grensesnittelementer. Kompakte størrelser på 12–13 piksler for metadata og 15–19 piksler for brødtekst skaper følelsen av en tett nyhetsstrøm. Vekten er 400 for brødtekst, 500 for navigasjonselementer og knappetiketter, og 600 for uthevede meldingstitler og seksjonsoverskrifter.
- Cahuenga — erstatning: Charter · omriss 500 · En dekorativ serif-font for produktoverskrifter (sidefeltoverskrifter, registreringskortoverskrifter, hovedtekst). Den middels tykke og lave linjehøyden gir den et særegent utseende uten å føles klumpete; det er den eneste fonten som, foruten den oransje fargen, signaliserer Substacks identitet.
- Spectral — erstatning: Charter · omriss 400 · En serif-skrifttype for lange innlegg – brukes i lesesaler og nyhetsstrømmer for å forbedre lesbarheten til redaksjonelt materiale. En litt strammere linjeavstand (1,20) sikrer komfortabel avsnittlesing samtidig som den kompakte strukturen som er typisk for nyhetsrom, opprettholdes.
Intervaller og form
| Hensikt | Betydning |
|---|---|
| Tetthet | tett |
| Grunnleggende trinn | 8px |
| Knapperadius | 9999px |
| Kortradius | 12px |
| Skygger | ingen grenser i stedet for skygger |
| Mellom seksjoner | 32px |
| Sidebredde | 1200px |
AI vil bygge nettstedet ditt i Substack -stil og fylle det
- Fyll på med produkter og innlegg via lenken - Instagram, TikTok, Facebook.
- Overfør innhold fra det gamle nettstedet ditt – bare oppgi adressen.
- Moderne design på den beste søkemotoren: React ( Next.js) med serverrendering og SEO-optimalisering rett ut av boksen.
- Helautomatisk SEO-optimalisering for søkeresultater og anbefalinger fra nevrale nettverk.
Lignende stiler
- ElevenLabs — Et fotoessay i varme kremfarger med diskré overskrifter. En notatbok i Bauhaus-stil – eggeskallfarget papir, svart blekk og en enkelt lilla og oransje aksent for produktfremvisning.
- Awesomic — Redaksjonelt sinknett med oransje tegnsettingstegn som minner om konfetti
- Monad — redaksjonell teknisk tidsskrift på varmt pergament
- Dub — Links kontrollpanel for matt rispapir
- Seline Analytics — Et stille analytisk bord på varmt papir
- Notion — En varm papirnotatbok i middagssolen
- Anthropic — Et vitenskapelig felttidsskrift på varmt vellum – rolige elfenbensfargede overflater, seriferte redaksjonelle overskrifter og en enkelt leireaksent som bare dukker opp når handling er nødvendig.
- Calendly — Mørkeblått blekk på kald marmor
- Augen Pro — Apples hvite presentasjon har en klinisk, vektløs, elektrisk blåfarge som eneste aksent i et monokromt rom.
- Antimetal — En redaksjonell krønike på kremfarget papir – en stille morgen i et vitenskapelig tidsskrift, hvor tilbakeholdenhet formidler selvtillit og seriffer gjør det tunge arbeidet
- Perk — Elektrisk lime på varmt bakepapir
- Ditto — Et solfylt verksted som lager prøver av villblomster. Varme kremfargede overflater, en livlig gul grunnfarge, dyp marineblå blekk, organiske fargeformer som blomstrer bak verket.