Substack
orange na tinta sa mesa sa opisina ng editoryal
Ang Substack ay parang isang lumang dashboard ng newsroom—isang puting canvas, mainit, halos itim na teksto, at isang matingkad na orange na accent na nagmamarka sa bawat yugto ng paglikha ng nilalaman. Ang visual hierarchy ay nakabatay sa densidad sa halip na dekorasyon: manipis na kulay abong linya ang naghihiwalay sa mga feed elements, maliliit ang mga avatar, naka-mute ang metadata, at ang mata ng mambabasa ay sinanay na tumuon sa orange na call to action, orange na logo, orange na "Subscribe" link, at orange na "Create" button. Ang mga ibabaw ay pinananatiling patag at walang limitasyon—walang mga card shadow, walang mga chrome panel elements—na nagpapahintulot sa typography (isang compact na chrome system UI element na ipinares sa isang custom serif headline font) na magdala ng bigat ng editoryal na bigat. Ang signature style ay mga pigil na chrome elements at matingkad, single-color pops: isang reading app na parang isang publishing tool.
Isang layout ng desktop na may tatlong hanay: isang nakapirming kaliwang sidebar (~200px, nabigasyon na may mga icon at label, sticky), isang gitnang feed (maximum na lapad ~600px, patayong nag-i-scroll na listahan ng mga post), at isang nakapirming kanang sidebar (~300px, paghahanap + rekomendasyon + pagpaparehistro). Ang gitnang feed ay ang editorial core—walang mga card, mga post lamang na nakapatong sa isa't isa na may manipis na mga divider at 32px na puwang sa pagitan ng mga seksyon. Ang pangunahing banner ay nasa itaas ng feed bilang isang full-width card. Ang kaliwang sidebar ay naglalaman ng logo ng brand (isang orange na karatula na may mga naka-overlay na linya), anim na navigation item, at isang full-width na orange na button na "Create" sa ibaba. Ang kanang sidebar ay naglalaman ng search field, isang registration card, at isang listahan ng "Up Next" para sa pagbabasa. Minimal lang ang nabigasyon—walang top bar, walang breadcrumbs; ang sidebar AY ang nabigasyon. Mataas ang density ng nilalaman: ang mga post ay gumagamit ng 12-13px metadata at 15-19px body text, na lumilikha ng ritmo na parang pahayagan sa halip na ang pakiramdam ng card grid ng isang marketplace.
Ang mga larawan ay nilalamang binuo ng gumagamit (mga avatar ng may-akda, mga thumbnail ng post, mga larawan ng post)—Hindi nagbibigay ang Substack ng sarili nitong mga pandekorasyon na larawan. Ang pangunahing card ay gumagamit ng turquoise hanggang berdeng gradient na may mga abstract illustrative na elemento (mga geometric na hugis, mga naka-istilong bagay tulad ng mga panulat at tala) bilang background. Ang mga thumbnail ng post sa kanang sidebar ay maliliit (64px), nakapaloob sa isang 8px radius, at gumagana bilang isang preview ng listahan ng babasahin. Ang pangkalahatang visual na wika ay nakabatay sa teksto: ang interface ay isang reading canvas, at ang mga imahe ay nagsisilbing maliliit na visual anchor sa halip na lumikha ng kapaligiran.
Paleta
Tatak
- Signal Orange
#ff6719— Ginagamit ang kulay kahel bilang pangalawang kulay para sa mga detalyeng pandekorasyon at upang i-highlight ang mga bihirang pahiwatig. Hindi ito dapat gamitin bilang pangunahing kulay para sa mga panawagan para sa aksyon.
Neutral
- Ink
#363737— Katawan ng teksto—ang pangunahing teksto, mga pamagat, pamagat ng post, mga timestamp, at pangalan ng may-akda; isang mainit, halos itim na kulay sa halip na purong #000 para sa mas madaling pagbabasa. - Paper
#ffffff— Ang page canvas, mga ibabaw ng card, mga input field, at navigation background ang mga nangingibabaw na ibabaw na sumasakop sa halos lahat ng interface. - Charcoal
#232525— I-hover ang estado para sa karagdagang teksto at mga link na may matataas na antas ng pagpili; mas malalim kaysa sa Ink mode para sa mga code block at selection block. - Stone
#777777— Sinusuportahan ang neutral na kulay para sa mga pangalawang elemento ng UI, mga divider, at mga naka-mute na label. Hindi ito dapat gamitin bilang pangunahing kulay para sa mga panawagan para sa aksyon. - Ash
#b6b6b6— Manipis na linya ng border, mga balangkas ng button, mga balangkas ng icon, mga border sa mga naka-disable na kontrol. - Mist
#c8c8c8— Mga linyang naghahati, hindi nakakaabala na background para sa mga icon, pinupuno ang mga walang laman na cell sa anyo ng isang kalansay.
Tipograpiya
mula 12 hanggang 32px · 5 hakbang
- system-ui — kapalit: -apple-system · mga balangkas 400, 500, 600 · Ang pangunahing font para sa user interface at body text ay ginagamit para sa mga navigation label, button, message text, metadata, input field, at lahat ng interface elements. Ang mga compact na sukat na 12-13px para sa metadata at 15-19px para sa body text ay lumilikha ng pakiramdam ng isang siksik na news feed. Ang bigat ay 400 para sa body text, 500 para sa navigation elements at button label, at 600 para sa mga naka-highlight na pamagat ng mensahe at section heading.
- Cahuenga — kapalit: Charter · mga balangkas 500 · Isang natatanging pandekorasyon na serif font para sa mga heading sa antas ng produkto (mga heading ng sidebar, mga heading ng registration card, pangunahing teksto). Ang katamtamang bigat at bahagyang taas ng linya nito ay nagbibigay dito ng natatanging hitsura nang hindi mukhang malaki; ito lamang ang font na, bukod sa kulay kahel, ay nagpapahiwatig ng pagkakakilanlan ng Substack.
- Spectral — kapalit: Charter · mga balangkas 400 · Isang serif font para sa mahahabang post—ginagamit sa mga silid-basahan at sa nilalaman ng newsfeed upang mapabuti ang pagiging madaling mabasa ng mga materyales sa editoryal. Ang bahagyang mas mahigpit na pagitan ng mga linya (1.20) ay nagsisiguro ng komportableng pagbabasa ng talata habang pinapanatili ang pagiging siksik na tipikal sa mga silid-balitaan.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | siksik |
| Pangunahing hakbang | 8px |
| Radius ng buton | 9999px |
| Radius ng card | 12px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 32px |
| Lapad ng pahina | 1200px |
Gagawa ang AI ng website mo sa estilong Substack at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- ElevenLabs — Isang photo essay sa maayang kulay krema na may banayad na mga headline. Isang notebook na istilong Bauhaus—papel na kulay itlog, itim na tinta, at isang lila at orange na accent para sa display ng produkto.
- Awesomic — Editoryal na zinc mesh na may orange na bantas na nakapagpapaalala ng confetti
- Monad — teknikal na dyornal ng editoryal tungkol sa mainit na pergamino
- Dub — Control panel ng Link na gawa sa matte rice paper
- Seline Analytics — Isang tahimik na analytical table sa mainit na papel
- Notion — Isang mainit na kuwaderno na papel sa ilalim ng araw ng tanghali
- Anthropic — Isang siyentipikong field journal sa mainit na vellum—mga kalmadong ibabaw na garing, mga serif na heading editoryal, at isang natatanging accent na luwad na lumilitaw lamang kapag kinakailangan ng aksyon.
- Calendly — Madilim na asul na tinta sa malamig na marmol
- Augen Pro — Ang puting presentasyon ng Apple ay nagtatampok ng klinikal, magaan, at de-kuryenteng asul bilang tanging accent sa isang monochrome na espasyo.
- Antimetal — Isang kronikong editoryal sa kremang papel—isang tahimik na umaga sa isang siyentipikong dyornal, kung saan ang pagtitimpi ay naghahatid ng kumpiyansa at ang mga serif ang siyang nagpapabigat
- Perk — Electric lime sa mainit na parchment paper
- Ditto — Isang workshop na naliliwanagan ng araw na lumilikha ng mga sample ng wildflower. Mainit na kremang ibabaw, matingkad na dilaw na kulay, malalim na asul na tinta, mga organikong kulay na namumukadkad sa likod ng obra.