Substack
cerneală portocalie pe biroul din redacție
Substack arată ca un tablou de bord uzat de o redacție - o pânză albă, text cald, aproape negru și un singur accent portocaliu strălucitor care marchează fiecare etapă a creării de conținut. Ierarhia vizuală este construită pe densitate, mai degrabă decât pe decorare: linii gri subțiri separă elementele feed-ului, avatarele sunt mici, metadatele sunt dezactivate, iar ochiul cititorului este antrenat să se concentreze pe îndemnul la acțiune portocaliu, sigla portocalie, linkul portocaliu „Abonează-te” și butonul portocaliu „Creează”. Suprafețele sunt menținute plate și neconstrânse - fără umbre de card, fără elemente cromate de panou - permițând tipografiei (un element compact de interfață de utilizator cromat, asociat cu un font personalizat pentru titluri serif) să suporte greutatea editorială. Stilul caracteristic este reprezentat de elemente cromate restrânse și accente vibrante, într-o singură culoare: o aplicație de citire care se simte ca un instrument de publicare.
Un aspect desktop cu trei coloane: o bară laterală stângă fixă (~200px, navigare cu pictograme și etichete, fixă), un flux central (lățime maximă ~600px, listă de postări care se derulează vertical) și o bară laterală dreaptă fixă (~300px, căutare + recomandări + înregistrare). Fluxul central este nucleul editorial - fără carduri, doar postări suprapuse una peste alta cu separatoare subțiri și spații de 32px între secțiuni. Bannerul principal se află în partea de sus a fluxului ca un singur card pe lățime completă. Bara laterală stângă conține sigla mărcii (un semn portocaliu cu linii suprapuse), șase elemente de navigare și un buton portocaliu „Creează” pe lățime completă în partea de jos. Bara laterală dreaptă conține un câmp de căutare, un card de înregistrare și o listă „În continuare” pentru citire. Navigarea este minimă - fără bară superioară, fără breadcrumb-uri; bara laterală ESTE navigarea. Densitatea conținutului este mare: postările folosesc metadate de 12-13px și text de corp de 15-19px, creând un ritm asemănător unui ziar, mai degrabă decât senzația unei grile de carduri dintr-o piață.
Fotografiile sunt conținut generat de utilizatori (avataruri ale autorilor, miniaturi ale postărilor, imagini ale postărilor) — Substack nu oferă propriile fotografii decorative. Cardul principal folosește un gradient de la turcoaz la verde, cu elemente ilustrative abstracte (forme geometrice, obiecte stilizate precum pixuri și notițe) ca fundal. Miniaturile postărilor din bara laterală dreaptă sunt mici (64px), închise într-o rază de 8px și funcționează ca o previzualizare a listei de lectură. Limbajul vizual general este bazat pe text: interfața este o pânză de lectură, iar imaginile servesc drept mici ancore vizuale, mai degrabă decât să creeze atmosferă.
Paletă
Marca
- Signal Orange
#ff6719— Portocaliul este folosit ca accent secundar pentru detalii decorative și pentru a evidenția indicii rare. Nu ar trebui folosit ca și culoare principală pentru îndemnuri la acțiune.
Neutru
- Ink
#363737— Textul principal — textul principal, titlurile, titlurile articolelor, timestamp-urile și numele autorilor; o culoare caldă, aproape neagră, în loc de #000 pur, pentru o citire mai ușoară. - Paper
#ffffff— Suprafețele principale ale paginii, suprafețele cardurilor, câmpurile de introducere a datelor și fundalul de navigare sunt suprafețele dominante care ocupă marea majoritate a interfeței. - Charcoal
#232525— Stare de trecere cu mouse-ul pentru text suplimentar și linkuri cu niveluri ridicate de selecție; mai profundă decât modul Cerneală pentru blocuri de cod și blocuri de selecție. - Stone
#777777— O culoare neutră este acceptată pentru elementele secundare ale interfeței utilizator, separatoare și etichete cu aspect estompat. Nu ar trebui utilizată ca și culoare principală pentru îndemnurile la acțiune. - Ash
#b6b6b6— Linii subțiri de chenar, contururi de butoane, contururi de pictograme, chenaruri pentru comenzile dezactivate. - Mist
#c8c8c8— Linii de demarcație, fundal discret pentru icoane, umplerea celulelor goale sub forma unui schelet.
Tipografie
de la 12 la 32px · 5 pași
- system-ui — înlocuire: -apple-system · contururi 400, 500, 600 · Fontul principal pentru interfața utilizator și textul corpului este utilizat pentru etichetele de navigare, butoane, textul mesajelor, metadate, câmpurile de introducere și toate elementele interfeței. Dimensiunile compacte de 12-13 px pentru metadate și 15-19 px pentru textul corpului creează senzația unui flux de știri dens. Greutatea este de 400 pentru textul corpului, 500 pentru elementele de navigare și etichetele butoanelor și 600 pentru titlurile mesajelor evidențiate și anteturile secțiunilor.
- Cahuenga — înlocuire: Charter · contururi 500 · Un font serif decorativ, caracteristic pentru titlurile la nivel de produs (titlurile barei laterale, titlurile cardurilor de înregistrare, textul principal). Greutatea medie și înălțimea ușoară a liniei îi conferă un aspect distinct, fără a da senzația de volum; este singurul font care, pe lângă culoarea portocalie, semnalează identitatea Substack.
- Spectral — înlocuire: Charter · contururi 400 · Un font serif pentru postări lungi — utilizat în sălile de lectură și în conținutul fluxurilor de știri pentru a îmbunătăți lizibilitatea materialelor editoriale. O spațiere între rânduri puțin mai mică (1,20) asigură o citire confortabilă a paragrafelor, menținând în același timp compactitatea tipică redacțiilor.
Intervale și formă
| Scop | Sens |
|---|---|
| Densitate | dens |
| Pasul de bază | 8px |
| Raza butonului | 9999px |
| Raza cardului | 12px |
| Umbre | fără - margini în loc de umbre |
| Între secțiuni | 32px |
| Lățimea paginii | 1200px |
Inteligența artificială vă va construi site-ul web în stilul Substack și îl va completa
- Completează cu produse și postări prin link - Instagram, TikTok, Facebook.
- Transferați conținut de pe vechiul site - specificați doar adresa.
- Design modern pe cel mai bun motor: React ( Next.js) cu randare pe server și optimizare SEO gata de utilizare.
- Optimizare SEO complet automatizată pentru rezultatele căutării și recomandări de rețele neuronale.
Stiluri similare
- ElevenLabs — Un eseu foto în tonuri calde de crem, cu titluri subtile. Un caiet în stil Bauhaus — hârtie de culoarea cojii de ou, cerneală neagră și un singur accent violet și portocaliu pentru prezentarea produsului.
- Awesomic — Plasă de zinc editorială cu semne de punctuație portocalii care amintesc de confetti
- Monad — revistă tehnică editorială pe pergament cald
- Dub — Panoul de control din hârtie de orez mată al lui Link
- Seline Analytics — O masă analitică liniștită pe hârtie caldă
- Notion — Un caiet de hârtie cald în soarele de la amiază
- Anthropic — O revistă științifică de teren pe pergament cald — suprafețe calme de fildeș, titluri editoriale cu serife și un singur accent de lut care apare doar atunci când este nevoie de acțiune.
- Calendly — Cerneală albastru închis pe marmură rece
- Augen Pro — Prezentarea albă a Apple prezintă un albastru electric, clinic, imponderabil, ca unic accent într-un spațiu monocrom.
- Antimetal — O cronică editorială pe hârtie crem - o dimineață liniștită la o revistă științifică, unde reținerea transmite încredere, iar serifele fac munca grea
- Perk — Varză electrică pe hârtie de copt caldă
- Ditto — Un atelier însorit care creează mostre de flori sălbatice. Suprafețe crem calde, o culoare de bază galben vibrant, cerneluri bleumarin intens, forme organice de culoare înflorind în spatele piesei.