Substack
linka oranġjo fuq l-iskrivanija fl-uffiċċju editorjali
Substack tidher qisha dashboard ta' kamra tal-aħbarijiet użata sew—kanvas abjad, test sħun, kważi iswed, u aċċent oranġjo jgħajjat wieħed li jimmarka kull stadju tal-ħolqien tal-kontenut. Il-ġerarkija viżwali hija mibnija fuq id-densità aktar milli fuq id-dekorazzjoni: linji griżi rqaq jisseparaw l-elementi tal-feed, l-avatars huma żgħar, il-metadata hija siekta, u l-għajn tal-qarrej hija mħarrġa biex tiffoka fuq is-sejħa oranġjo għall-azzjoni, il-logo oranġjo, il-link oranġjo "Abbona", u l-buttuna oranġjo "Oħloq". L-uċuħ jinżammu ċatti u mhux ristretti—l-ebda dellijiet tal-karti, l-ebda elementi tal-pannell tal-kromju—li jħallu t-tipografija (element kompatt tal-UI tas-sistema tal-kromju mqabbad ma' font tad-dwana serif għat-titlu) iġġorr il-piż editorjali. L-istil distintiv huwa elementi tal-kromju mrażżna u kuluri vibranti u ta' kulur wieħed: app tal-qari li tħossha bħal għodda tal-pubblikazzjoni.
Tqassim ta' desktop bi tliet kolonni: sidebar tax-xellug fiss (~200px, navigazzjoni b'ikoni u tikketti, sticky), feed ċentrali (wisa' massima ~600px, lista ta' postijiet li tiskrollja vertikalment), u sidebar tal-lemin fiss (~300px, tiftix + rakkomandazzjonijiet + reġistrazzjoni). Il-feed ċentrali huwa l-qalba editorjali—l-ebda karti, biss postijiet imqiegħda fuq xulxin b'diviżuri rqaq u lakuni ta' 32px bejn is-sezzjonijiet. Il-banner prinċipali jinsab fil-parti ta' fuq tal-feed bħala karta waħda b'wisa' sħiħa. Il-sidebar tax-xellug fih il-logo tal-marka (sinjal oranġjo b'linji sovrapposti), sitt oġġetti ta' navigazzjoni, u buttuna oranġjo "Oħloq" b'wisa' sħiħa fil-qiegħ. Il-sidebar tal-lemin fih qasam ta' tiftix, karta ta' reġistrazzjoni, u lista "Li Jmiss" għall-qari. In-navigazzjoni hija minima—l-ebda bar ta' fuq, l-ebda breadcrumbs; il-sidebar HIJA n-navigazzjoni. Id-densità tal-kontenut hija għolja: il-postijiet jużaw metadata ta' 12-13px u test tal-ġisem ta' 15-19px, u joħolqu ritmu simili għal dak ta' gazzetta aktar milli s-sensazzjoni ta' grilja ta' karti ta' suq.
Ir-ritratti huma kontenut iġġenerat mill-utent (avatars tal-awtur, thumbnails tal-posts, stampi tal-posts)—Substack ma jipprovdix ir-ritratti dekorattivi tiegħu stess. Il-kard prinċipali tuża gradjent minn turkważ għal aħdar b'elementi illustrattivi astratti (forom ġeometriċi, oġġetti stilizzati bħal pinen u noti) bħala sfond. It-thumbnails tal-posts fil-sidebar tal-lemin huma żgħar (64px), magħluqin f'raġġ ta' 8px, u jiffunzjonaw bħala preview tal-lista tal-qari. Il-lingwa viżwali ġenerali hija bbażata fuq it-test: l-interface hija kanvas tal-qari, u l-istampi jservu bħala ankri viżwali żgħar aktar milli joħolqu atmosfera.
Paletta
Marka
- Signal Orange
#ff6719— L-oranġjo jintuża bħala aċċent sekondarju għal dettalji dekorattivi u biex jenfasizza sinjali mhux frekwenti. M'għandux jintuża bħala l-kulur primarju għal sejħiet għal azzjoni.
Newtrali
- Ink
#363737— Test tal-korp—it-test prinċipali, l-intestaturi, it-titoli tal-postijiet, it-timestamps, u l-ismijiet tal-awturi; kulur sħun, kważi iswed minflok #000 pur għal qari aktar faċli. - Paper
#ffffff— Il-kanvas tal-paġna, l-uċuħ tal-kards, l-oqsma tal-input, u l-isfond tan-navigazzjoni huma l-uċuħ dominanti li jokkupaw il-maġġoranza l-kbira tal-interfaċċja. - Charcoal
#232525— Stat tal-hover għal test addizzjonali u links b'livelli għoljin ta' għażla; aktar profond mill-modalità Ink għal blokki ta' kodiċi u blokki ta' għażla. - Stone
#777777— Kulur newtrali huwa appoġġjat għal elementi sekondarji tal-UI, dividers, u tikketti siekta. M'għandux jintuża bħala l-kulur primarju għal sejħiet għal azzjoni. - Ash
#b6b6b6— Linji rqaq tal-bordura, kontorni tal-buttuni, kontorni tal-ikoni, borduri fuq kontrolli diżabbli. - Mist
#c8c8c8— Linji diviżorji, sfond diskret għall-ikoni, mili ta' ċelloli vojta fil-forma ta' skeletru.
Tipografija
minn 12 sa 32px · 5 passi
- system-ui — sostituzzjoni: -apple-system · linji gwida 400, 500, 600 · Il-font primarju għall-interfaċċja tal-utent u t-test tal-ġisem jintuża għat-tikketti tan-navigazzjoni, buttuni, test tal-messaġġ, metadata, oqsma tal-input, u l-elementi kollha tal-interfaċċja. Daqsijiet kompatti ta' 12-13px għall-metadata u 15-19px għat-test tal-ġisem joħolqu s-sensazzjoni ta' feed tal-aħbarijiet dens. Il-piż huwa 400 għat-test tal-ġisem, 500 għall-elementi tan-navigazzjoni u t-tikketti tal-buttuni, u 600 għat-titoli tal-messaġġi enfasizzati u l-intestaturi tas-sezzjonijiet.
- Cahuenga — sostituzzjoni: Charter · linji gwida 500 · Font serif dekorattiv u distintiv għal intestaturi fil-livell tal-prodott (intestaturi tal-ġenb, intestaturi tal-karti tar-reġistrazzjoni, test prinċipali). Il-piż medju u l-għoli żgħir tal-linja tiegħu jagħtuh dehra distinta mingħajr ma jħossu goff; huwa l-uniku font li, minbarra l-kulur oranġjo, jindika l-identità ta' Substack.
- Spectral — sostituzzjoni: Charter · linji gwida 400 · Font serif għal postijiet twal—użat fil-kmamar tal-qari u fil-kontenut tal-aħbarijiet biex itejjeb il-leġġibilità tal-materjali editorjali. Spazju bejn il-linji kemxejn aktar strett (1.20) jiżgura qari komdu tal-paragrafi filwaqt li jżomm il-kompattezza tipika tal-kmamar tal-aħbarijiet.
Intervalli u forma
| Skop | Tifsira |
|---|---|
| Densità | dens |
| Pass bażiku | 8px |
| Raġġ tal-buttuna | 9999px |
| Raġġ tal-karta | 12px |
| Dellijiet | le - fruntieri minflok dellijiet |
| Bejn is-sezzjonijiet | 32px |
| Wisa' tal-paġna | 1200px |
L-AI se tibni l-websajt tiegħek fl-istil ta' Substack u timlieha
- Imla bi prodotti u postijiet permezz tal-link - Instagram, TikTok, Facebook.
- Ittrasferixxi l-kontenut mis-sit il-qadim tiegħek—speċifika biss l-indirizz.
- Disinn modern fuq l-aqwa magna: React ( Next.js) b'rendering tas-server u ottimizzazzjoni SEO lesti għall-użu.
- Ottimizzazzjoni SEO kompletament awtomatizzata għar-riżultati tat-tfittxija u rakkomandazzjonijiet tan-netwerk newrali.
Stili simili
- ElevenLabs — Esej bir-ritratti f'toni krema sħan b'titoli sottili. Notebook stil Bauhaus—karta kkulurita bħal qoxra tal-bajda, linka sewda, u aċċent wieħed vjola u oranġjo għall-wiri tal-prodott.
- Awesomic — Xibka taż-żingu editorjali b'marki ta' punteġġjatura oranġjo li jfakkru fil-konfetti
- Monad — ġurnal tekniku editorjali fuq parċmina sħuna
- Dub — Il-pannell tal-kontroll tal-karta tar-ross matte ta' Link
- Seline Analytics — Tabella analitika kwieta fuq karta sħuna
- Notion — Notebook tal-karta sħuna fix-xemx ta’ nofsinhar
- Anthropic — Ġurnal xjentifiku fuq il-post fuq vellum sħun—uċuħ kalmi tal-avorju, intestaturi editorjali b'serif, u aċċent wieħed tat-tafal li jidher biss meta tkun meħtieġa azzjoni.
- Calendly — Linka blu skura fuq irħam kiesaħ
- Augen Pro — Il-preżentazzjoni bajda ta' Apple tinkludi blu elettriku kliniku, bla piż bħala l-uniku aċċent fi spazju monokromu.
- Antimetal — Kronaka editorjali fuq karta krema—għodwa kwieta f’ġurnal xjentifiku, fejn ir-rażan iwassal kunfidenza u s-serifs jagħmlu x-xogħol iebes
- Perk — Ġir elettriku fuq karta parċmina sħuna
- Ditto — Workshop imdawwal mix-xemx joħloq kampjuni ta' fjuri selvaġġi. Uċuħ krema sħan, kulur bażi isfar vibranti, linka blu skur, forom ta' kulur organiku jiffjorixxu wara l-biċċa.