Substack
narančasta tinta na stolu u uredništvu
Substack izgleda kao dobro izlizana nadzorna ploča u redakciji - bijelo platno, topao, gotovo crni tekst i jedan jarko narančasti naglasak koji označava svaku fazu stvaranja sadržaja. Vizualna hijerarhija izgrađena je na gustoći, a ne na dekoraciji: tanke sive linije odvajaju elemente feeda, avatari su mali, metapodaci su prigušeni, a čitateljevo oko je uvježbano da se usredotoči na narančasti poziv na akciju, narančasti logotip, narančastu poveznicu "Pretplati se" i narančasti gumb "Izradi". Površine su ravne i nesputane - bez sjena kartica, bez kromiranih elemenata ploče - dopuštajući tipografiji (kompaktni kromirani element korisničkog sučelja sustava uparen s prilagođenim serifnim fontom naslova) da nosi glavni teret uredničke težine. Prepoznatljiv stil su suzdržani kromirani elementi i živahni, jednobojni detalji: aplikacija za čitanje koja se osjeća kao alat za objavljivanje.
Raspored za stolna računala s tri stupca: fiksna lijeva bočna traka (~200px, navigacija s ikonama i oznakama, ljepljivo), središnji feed (maksimalna širina ~600px, vertikalno pomični popis objava) i fiksna desna bočna traka (~300px, pretraživanje + preporuke + registracija). Središnji feed je urednička jezgra - nema kartica, samo objave naslagane jedna na drugu s tankim razdjelnicima i razmacima od 32px između odjeljaka. Glavni banner nalazi se na vrhu feeda kao jedna kartica pune širine. Lijeva bočna traka sadrži logotip robne marke (narančasti znak s preklopljenim linijama), šest navigacijskih stavki i narančasti gumb "Izradi" pune širine na dnu. Desna bočna traka sadrži polje za pretraživanje, karticu za registraciju i popis "Sljedeće" za čitanje. Navigacija je minimalna - nema gornje trake, nema navigacijskih mrvica; bočna traka JE navigacija. Gustoća sadržaja je visoka: objave koriste metapodatke od 12-13px i tekst tijela od 15-19px, stvarajući ritam nalik novinama, a ne osjećaj mreže kartica na tržištu.
Fotografije su sadržaj koji generiraju korisnici (autorski avatari, sličice objava, slike objava) - Substack ne pruža vlastite ukrasne fotografije. Glavna kartica koristi tirkizno-zeleni gradijent s apstraktnim ilustrativnim elementima (geometrijski oblici, stilizirani predmeti poput olovaka i bilješki) kao pozadinu. Sličice objava u desnoj bočnoj traci su male (64px), zatvorene u radijusu od 8px i funkcioniraju kao pregled popisa za čitanje. Cjelokupni vizualni jezik temelji se na tekstu: sučelje je platno za čitanje, a slike služe kao mala vizualna sidra, a ne kao stvaranje atmosfere.
Paleta
Robna marka
- Signal Orange
#ff6719— Narančasta se koristi kao sekundarni naglasak za dekorativne detalje i za isticanje rijetkih znakova. Ne bi se trebala koristiti kao primarna boja za pozive na akciju.
Neutralno
- Ink
#363737— Tijelo teksta – glavni tekst, naslovi, naslovi objava, vremenske oznake i imena autora; topla, gotovo crna boja umjesto čistog #000 radi lakšeg čitanja. - Paper
#ffffff— Platno stranice, površine kartica, polja za unos i pozadina navigacije dominantne su površine koje zauzimaju veliku većinu sučelja. - Charcoal
#232525— Stanje zadržavanja pokazivača miša za dodatni tekst i poveznice s visokim razinama odabira; dublje od načina rada s tintom za blokove koda i blokove odabira. - Stone
#777777— Neutralna boja podržana je za sekundarne elemente korisničkog sučelja, razdjelnike i prigušene oznake. Ne smije se koristiti kao primarna boja za pozive na akciju. - Ash
#b6b6b6— Tanke obrube, obrisi gumba, obrisi ikona, obrubi na onemogućenim kontrolama. - Mist
#c8c8c8— Razdjelne linije, neupadljiva pozadina za ikone, popunjavanje praznih ćelija u obliku kostura.
Tipografija
od 12 do 32px · 5 koraka
- system-ui — zamjena: -apple-system · obrisi 400, 500, 600 · Primarni font za korisničko sučelje i tekst tijela koristi se za navigacijske oznake, gumbe, tekst poruke, metapodatke, polja za unos i sve elemente sučelja. Kompaktne veličine od 12-13px za metapodatke i 15-19px za tekst tijela stvaraju osjećaj gustog news feeda. Težina je 400 za tekst tijela, 500 za navigacijske elemente i oznake gumba te 600 za istaknute naslove poruka i zaglavlja odjeljaka.
- Cahuenga — zamjena: Charter · obrisi 500 · Prepoznatljiv dekorativni serifni font za naslove na razini proizvoda (naslovi bočnih traka, naslovi registracijskih kartica, glavni tekst). Njegova srednja debljina i mala visina retka daju mu prepoznatljiv izgled bez osjećaja glomaznosti; to je jedini font koji, osim narančaste boje, signalizira identitet Substacka.
- Spectral — zamjena: Charter · obrisi 400 · Serifni font za duge objave – koristi se u čitaonicama i u sadržaju novosti radi poboljšanja čitljivosti uredničkih materijala. Nešto uži prored (1,20) osigurava ugodno čitanje odlomaka uz zadržavanje kompaktnosti tipične za redakcije.
Intervali i forma
| Svrha | Značenje |
|---|---|
| Gustoća | gust |
| Osnovni korak | 8px |
| Radijus gumba | 9999px |
| Radijus kartice | 12px |
| Sjene | ne - obrubi umjesto sjena |
| Između odjeljaka | 32px |
| Širina stranice | 1200px |
Umjetna inteligencija će izraditi vašu web stranicu u Substack stilu i ispuniti je
- Popunite proizvodima i objavama putem poveznice - Instagram, TikTok, Facebook.
- Prenesite sadržaj sa svoje stare web-lokacije - samo navedite adresu.
- Moderan dizajn na najboljem engineu: React ( Next.js) s renderiranjem na serveru i SEO optimizacijom odmah po instalaciji.
- Potpuno automatizirana SEO optimizacija za rezultate pretraživanja i preporuke neuronskih mreža.
Slični stilovi
- ElevenLabs — Foto esej u toplim krem tonovima s decentnim naslovima. Bilježnica u stilu Bauhausa - papir boje ljuske jajeta, crna tinta i jedan ljubičasti i narančasti naglasak za izlaganje proizvoda.
- Awesomic — Urednička cinkova mreža s narančastim interpunkcijskim znakovima koji podsjećaju na konfete
- Monad — urednički tehnički časopis na toplom pergamentu
- Dub — Linkova upravljačka ploča od mat rižinog papira
- Seline Analytics — Tihi analitički stol na toplom papiru
- Notion — Topla papirnata bilježnica na podnevnom suncu
- Anthropic — Znanstveni terenski časopis o toplom pergamentu - mirne površine boje slonovače, serifirani urednički naslovi i jedan glineni naglasak koji se pojavljuje samo kada je potrebna akcija.
- Calendly — Tamnoplava tinta na hladnom mramoru
- Augen Pro — Appleova bijela prezentacija sadrži kliničku, bestežinu, električno plavu boju kao jedini naglasak u monokromatskom prostoru.
- Antimetal — Uvodnik na krem papiru - mirno jutro u znanstvenom časopisu, gdje suzdržanost prenosi samopouzdanje, a serifi obavljaju teški posao
- Perk — Električna limeta na toplom papiru za pečenje
- Ditto — Suncem obasjana radionica u kojoj se izrađuju uzorci divljeg cvijeća. Tople kremaste površine, živahna žuta osnovna boja, tamnoplave tinte, organski oblici boja koji cvjetaju iza djela.