Substack
orange nga tinta sa lamesa sa opisina sa editoryal
Ang Substack morag usa ka gigamit na nga dashboard sa newsroom—usa ka puti nga canvas, init, halos itom nga teksto, ug usa ka hayag nga orange nga accent nga nagtimaan sa matag yugto sa paghimo og content. Ang visual hierarchy gitukod sa densidad imbes nga dekorasyon: nipis nga abuhon nga mga linya ang nagbulag sa mga feed elements, gagmay ang mga avatar, ang metadata gihilom, ug ang mata sa magbabasa nabansay sa pag-focus sa orange nga call to action, orange nga logo, orange nga "Subscribe" link, ug orange nga "Create" button. Ang mga nawong gipabiling patag ug walay pugong—walay card shadows, walay chrome panel elements—nga nagtugot sa typography (usa ka compact chrome system UI element nga gipares sa usa ka custom serif headline font) nga magdala sa gibug-aton sa editorial weight. Ang signature style kay pinugngan nga chrome elements ug vibrant, single-color pops: usa ka reading app nga daw usa ka publishing tool.
Usa ka tulo ka kolum nga desktop layout: usa ka pirmi nga wala nga sidebar (~200px, nabigasyon nga adunay mga icon ug label, sticky), usa ka center feed (maximum nga gilapdon ~600px, patindog nga nag-scroll nga lista sa mga post), ug usa ka pirmi nga tuo nga sidebar (~300px, pagpangita + rekomendasyon + rehistrasyon). Ang center feed mao ang editorial core—walay mga kard, mga post lang nga gipatong-patong sa ibabaw sa usag usa nga adunay nipis nga mga divider ug 32px nga mga kal-ang tali sa mga seksyon. Ang pangunang banner nahimutang sa ibabaw sa feed isip usa ka full-width card. Ang wala nga sidebar adunay logo sa brand (usa ka orange nga karatula nga adunay mga linya nga gisapaw), unom ka navigation item, ug usa ka full-width orange nga "Create" button sa ubos. Ang tuo nga sidebar adunay search field, registration card, ug usa ka "Up Next" nga lista para sa pagbasa. Gamay ra ang nabigasyon—walay top bar, walay breadcrumbs; ang sidebar MAO ang nabigasyon. Taas ang densidad sa sulud: ang mga post naggamit ug 12-13px nga metadata ug 15-19px nga body text, nga nagmugna og ritmo nga sama sa mantalaan imbes nga ang pagbati sa card grid sa usa ka marketplace.
Ang mga litrato kay user-generated content (mga avatar sa awtor, mga thumbnail sa post, mga imahe sa post)—Ang Substack wala maghatag sa kaugalingon niining pangdekorasyon nga mga litrato. Ang pangunang kard naggamit og turquoise ngadto sa berde nga gradient nga adunay abstract illustrative elements (geometric shapes, stylized objects sama sa mga bolpen ug mga nota) isip background. Ang mga thumbnail sa post sa tuo nga sidebar gagmay (64px), gisulod sa 8px radius, ug naglihok isip preview sa reading list. Ang kinatibuk-ang visual language kay text-based: ang interface kay usa ka reading canvas, ug ang mga imahe nagsilbing gagmay nga visual anchors imbes nga magmugna og atmospera.
Paleta
Brand
- Signal Orange
#ff6719— Ang kolor nga kahel gigamit isip ikaduhang kolor para sa mga detalye sa dekorasyon ug aron ipasiugda ang dili kanunay nga mga timaan. Dili kini angay gamiton isip pangunang kolor para sa mga panawagan sa aksyon.
Neutral
- Ink
#363737— Body text—ang pangunang teksto, mga ulohan, titulo sa post, mga timestamp, ug mga ngalan sa awtor; usa ka mainit, halos itom nga kolor imbes nga puro nga #000 para mas sayon basahon. - Paper
#ffffff— Ang page canvas, mga nawong sa card, mga input field, ug navigation background mao ang mga dominanteng nawong nga nag-okupar sa kadaghanan sa interface. - Charcoal
#232525— I-hover ang estado para sa dugang nga teksto ug mga link nga adunay taas nga lebel sa pagpili; mas lawom kay sa Ink mode para sa mga code block ug mga selection block. - Stone
#777777— Gisuportahan ang neyutral nga kolor para sa mga secondary UI elements, dividers, ug muted labels. Dili kini angay gamiton isip primary color para sa mga call to action. - Ash
#b6b6b6— Nipis nga mga linya sa border, mga outline sa buton, mga outline sa icon, mga border sa mga naka-disable nga kontrol. - Mist
#c8c8c8— Mga linya sa pagbahin, dili makabalda nga background para sa mga icon, pagpuno sa mga walay sulod nga selula sa porma sa usa ka kalabera.
Tipograpiya
gikan sa 12 ngadto sa 32px · 5 ka lakang
- system-ui — kapuli: -apple-system · mga balangkas 400, 500, 600 · Ang pangunang font para sa user interface ug body text gigamit para sa mga navigation label, mga butones, message text, metadata, input field, ug tanang interface elements. Ang mga compact size nga 12-13px para sa metadata ug 15-19px para sa body text nagmugna og pagbati nga usa ka dasok nga news feed. Ang gibug-aton kay 400 para sa body text, 500 para sa navigation elements ug button labels, ug 600 para sa highlighted message titles ug section headings.
- Cahuenga — kapuli: Charter · mga balangkas 500 · Usa ka pirma nga pangdekorasyon nga serif font para sa mga ulohan sa lebel sa produkto (mga ulohan sa sidebar, mga ulohan sa registration card, pangunang teksto). Ang kasarangan nga gibug-aton ug gamay nga gitas-on sa linya niini naghatag niini og lahi nga panagway nga dili mobati nga dako; kini ra ang font nga, gawas sa kolor nga orange, nagpakita sa identidad sa Substack.
- Spectral — kapuli: Charter · mga balangkas 400 · Usa ka serif font para sa taas nga mga post—gigamit sa mga reading room ug sa newsfeed content aron mapaayo ang pagkabasa sa mga editorial materials. Ang gamay nga mas hugot nga line spacing (1.20) nagsiguro sa komportable nga pagbasa sa paragraph samtang gipadayon ang compactness nga tipikal sa mga newsroom.
Mga interval ug porma
| Katuyoan | Kahulugan |
|---|---|
| Densidad | dasok |
| Batakang lakang | 8px |
| Radius sa butones | 9999px |
| Radius sa kard | 12px |
| Mga anino | walay - mga utlanan imbes nga mga anino |
| Taliwala sa mga seksyon | 32px |
| Lapad sa panid | 1200px |
Ang AI motukod sa imong website sa estilo sa Substack ug mopuno niini
- Pun-a og mga produkto ug mga post pinaagi sa link - Instagram, TikTok, Facebook.
- Ibalhin ang sulod gikan sa imong daang site—ipiho lang ang adres.
- Modernong disenyo sa pinakamaayong makina: React ( Next.js) nga adunay server rendering ug SEO optimization nga andam na gamiton.
- Bug-os nga awtomatik nga pag-optimize sa SEO para sa mga resulta sa pagpangita ug mga rekomendasyon sa neural network.
Parehas nga mga estilo
- ElevenLabs — Usa ka photo essay sa init nga krema nga mga kolor nga adunay malumo nga mga ulohan sa balita. Usa ka notebook nga istilo sa Bauhaus—papel nga kolor sama sa kabhang sa itlog, itom nga tinta, ug usa ka purpura ug kahel nga accent para sa display sa produkto.
- Awesomic — Editoryal nga zinc mesh nga adunay orange nga mga marka sa bantas nga nagpahinumdom sa confetti
- Monad — teknikal nga dyornal sa editoryal bahin sa mainit nga pergamino
- Dub — Panel sa pagkontrol sa matte rice paper sa Link
- Seline Analytics — Usa ka hilom nga analytical table sa init nga papel
- Notion — Usa ka mainit nga notebook nga papel sa udto
- Anthropic — Usa ka siyentipikong field journal sa init nga vellum—kalma nga garing nga mga nawong, serifed nga mga ulohan sa editoryal, ug usa ka accent nga lapok nga makita lamang kung kinahanglan ang aksyon.
- Calendly — Itom nga asul nga tinta sa bugnaw nga marmol
- Augen Pro — Ang puti nga presentasyon sa Apple adunay klinikal, gaan, electric blue isip bugtong aksento sa usa ka monochrome nga espasyo.
- Antimetal — Usa ka kronika sa editoryal sa kremang papel—usa ka hilom nga buntag sa usa ka siyentipikong dyurnal, diin ang pagpugong nagpahayag sa pagsalig ug ang mga serif mao ang nagbuhat sa bug-at nga buluhaton
- Perk — Electric lime sa init nga parchment paper
- Ditto — Usa ka workshop nga gisidlakan sa adlaw nga naghimo og mga sample sa ihalas nga mga bulak. Mainit nga krema nga mga nawong, usa ka hayag nga dalag nga kolor sa base, lawom nga asul nga mga tinta, mga organikong kolor nga namulak sa luyo sa obra.