Substack
oranje inket op it buro yn 'e redaksje
Substack sjocht derút as in fersliten nijskeamerdashboard - in wyt doek, waarme, hast swarte tekst, en in inkele helder oranje aksint dy't elke faze fan ynhâldskepping markearret. De fisuele hiërargy is boud op tichtens ynstee fan dekoraasje: tinne grize linen skiede feed-eleminten, avatars binne lyts, metadata is dempt, en it each fan 'e lêzer wurdt traind om te fokusjen op 'e oranje oprop ta aksje, it oranje logo, de oranje "Abonnearje"-keppeling en de oranje "Meitsje"-knop. Oerflakken wurde flak en ûnbeheind hâlden - gjin kaartskaaden, gjin chrome panieleleminten - wêrtroch't de typografy (in kompakt chrome systeem UI-elemint keppele oan in oanpast serif-koplettertype) it grutste part fan it redaksjonele gewicht drage kin. De hantekeningsstyl is beheinde chrome-eleminten en libbene, ienkleurige pops: in lês-app dy't fielt as in publisearringsark.
In buroblêdlayout mei trije kolommen: in fêste linker sydbalke (~200px, navigaasje mei ikoanen en labels, sticky), in sintrale feed (maksimale breedte ~600px, fertikaal rôljende list mei berjochten), en in fêste rjochter sydbalke (~300px, sykjen + oanbefellings + registraasje). De sintrale feed is de redaksjonele kearn - gjin kaarten, gewoan berjochten dy't boppe-op elkoar steapele binne mei tinne skiedingsplaten en 32px gatten tusken seksjes. De haadbanner sit boppe-oan de feed as ien kaart oer folsleine breedte. De linker sydbalke befettet it merklogo (in oranje teken mei oerlizzende rigels), seis navigaasje-items, en in oranje "Meitsje" knop oer folsleine breedte ûnderoan. De rjochter sydbalke befettet in sykfjild, in registraasjekaart, en in "Folgjende" list om te lêzen. Navigaasje is minimaal - gjin boppeste balke, gjin breadcrumbs; de sydbalke IS de navigaasje. Ynhâldstichtens is heech: berjochten brûke 12-13px metadata en 15-19px lichemstekst, wêrtroch in krante-eftich ritme ûntstiet ynstee fan it gefoel fan in kaartraster fan in merkplak.
Foto's binne troch brûkers generearre ynhâld (auteursavatars, berjochtminiatueren, berjochtôfbyldings) - Substack leveret gjin eigen dekorative foto's. De haadkaart brûkt in turkooizen oant griene kleurferrin mei abstrakte yllustrative eleminten (geometryske foarmen, stylisearre objekten lykas pinnen en notysjes) as eftergrûn. Berjochtminiatueren yn 'e rjochter sydbalke binne lyts (64px), omsletten yn in straal fan 8px, en funksjonearje as in foarbyld fan 'e lêslist. De algemiene fisuele taal is tekstbasearre: de ynterface is in lêsdoek, en ôfbyldings tsjinje as lytse fisuele ankers ynstee fan sfear te meitsjen.
Palet
Merk
- Signal Orange
#ff6719— Oranje wurdt brûkt as in sekundêr aksint foar dekorative details en om ûngewoane oanwizings te markearjen. It moat net brûkt wurde as de primêre kleur foar oprop ta aksje.
Neutraal
- Ink
#363737— Lidtekst - de haadtekst, kopteksten, berjochttitels, tiidstempels en auteursnammen; in waarme, hast swarte kleur ynstee fan suver #000 foar makliker lêzen. - Paper
#ffffff— It sidedoek, kaartoerflakken, ynfierfjilden en navigaasjeachtergrûn binne de dominante oerflakken dy't it grutte mearderheid fan 'e ynterface ynnimme. - Charcoal
#232525— Sweefmodus foar ekstra tekst en keppelings mei hege seleksjenivo's; djipper as Ink-modus foar koadeblokken en seleksjeblokken. - Stone
#777777— In neutrale kleur wurdt stipe foar sekundêre UI-eleminten, skiedingstekens en gedempte labels. It moat net brûkt wurde as de primêre kleur foar oprop ta aksje. - Ash
#b6b6b6— Tinne rânelinen, knopkonturen, ikoankonturen, rânen op útskeakele kontrôles. - Mist
#c8c8c8— Skiedingslinen, ûnopfallende eftergrûn foar ikoanen, lege sellen ynfolje yn 'e foarm fan in skelet.
Typografy
fan 12 oant 32px · 5 stappen
- system-ui — ferfanging: -apple-system · sketsen 400, 500, 600 · It primêre lettertype foar de brûkersynterface en lichemstekst wurdt brûkt foar navigaasjelabels, knoppen, berjochttekst, metadata, ynfierfjilden en alle ynterface-eleminten. Kompakte grutte fan 12-13px foar metadata en 15-19px foar lichemstekst skept it gefoel fan in tichte nijsfeed. It gewicht is 400 foar lichemstekst, 500 foar navigaasje-eleminten en knoplabels, en 600 foar markearre berjochttitels en seksjekoppen.
- Cahuenga — ferfanging: Charter · sketsen 500 · In ûnderskiedend dekorative serif-lettertype foar kopteksten op produktnivo (sydbalkekoppen, registraasjekaartkoppen, haadtekst). It middelgrutte gewicht en de lichte rigelhichte jouwe it in ûnderskiedend uterlik sûnder dat it lomp oanfielt; it is it ienige lettertype dat, neist de oranje kleur, de identiteit fan Substack oanjout.
- Spectral — ferfanging: Charter · sketsen 400 · In serif-lettertype foar lange berjochten - brûkt yn lêskeamers en yn nijsfeedynhâld om de lêsberens fan redaksjonele materialen te ferbetterjen. In wat strakkere rigelôfstân (1.20) soarget foar noflik lêzen fan paragrafen, wylst de kompaktheid dy't typysk is foar nijskeamers behâlden bliuwt.
Yntervallen en foarm
| Doel | Betsjutting |
|---|---|
| Dichtheid | ticht |
| Basisstap | 8px |
| Knopradius | 9999px |
| Kaartradius | 12px |
| Skaden | gjin grinzen ynstee fan skaden |
| Tusken seksjes | 32px |
| Sidebreedte | 1200px |
AI sil jo webside bouwe yn Substack -styl en it folje
- Folje oan mei produkten en berjochten fia de link - Instagram, TikTok, Facebook.
- Oerdrage ynhâld fan jo âlde side - spesifisearje gewoan it adres.
- Modern ûntwerp op 'e bêste motor: React ( Next.js) mei serverrendering en SEO-optimalisaasje direkt út 'e doaze.
- Folslein automatisearre SEO-optimalisaasje foar sykresultaten en oanbefellings foar neurale netwurken.
Ferlykbere stilen
- ElevenLabs — In foto-essay yn waarme crèmekleurige toanen mei subtile koppen. In notebook yn Bauhaus-styl - aai-skulpkleurich papier, swarte inket, en in inkele pearse en oranje aksint foar produktwerjefte.
- Awesomic — Redaksjoneel sinkgaas mei oranje leestekens dy't tinken dogge oan konfetti
- Monad — redaksjoneel technysk tydskrift op waarm perkament
- Dub — Link's matte ryspapier kontrôlepaniel
- Seline Analytics — In rêstige analytyske tafel op waarm papier
- Notion — In waarm papieren notebook yn 'e middeis sinne
- Anthropic — In wittenskiplik fjildtydskrift op waarm vellum - rêstige ivoaren oerflakken, serifisearre redaksjonele koppen, en in ienich klaaiaksint dat allinich ferskynt as aksje nedich is.
- Calendly — Donkerblauwe inket op kâld moarmer
- Augen Pro — De wite presintaasje fan Apple hat in klinysk, gewichtleas, elektrysk blau as it ienige aksint yn in monochrome romte.
- Antimetal — In redaksjonele kronyk op crèmekleurich papier - in rêstige moarn yn in wittenskiplik tydskrift, dêr't beheining fertrouwen útstraalt en serifs it swiere wurk dogge
- Perk — Elektryske limoen op waarm perkamentpapier
- Ditto — In sinneferljochte workshop dy't foarbylden fan wylde blommen makket. Waarme crèmekleurige oerflakken, in libbene giele basiskleur, djip marineblauwe inkten, organyske kleurfoarmen dy't efter it stik bloeie.