Substack
narandžasta tinta na stolu u redakciji
Substack izgleda kao dobro izlizana kontrolna ploča redakcije - bijelo platno, topao, gotovo crn tekst i jedan jarko narandžasti akcenat koji označava svaku fazu kreiranja sadržaja. Vizuelna hijerarhija izgrađena je na gustini, a ne na dekoraciji: tanke sive linije odvajaju elemente feeda, avatari su mali, metapodaci su prigušeni, a oko čitaoca je naučeno da se fokusira na narandžasti poziv na akciju, narandžasti logo, narandžasti link "Pretplati se" i narandžasto dugme "Kreiraj". Površine su ravne i nesputane - bez sjena kartica, bez hromiranih elemenata panela - dopuštajući tipografiji (kompaktni hromirani element korisničkog interfejsa sistema uparen sa prilagođenim serifnim fontom za naslov) da nosi glavni teret uredničke težine. Prepoznatljiv stil su suzdržani hromirani elementi i živahni, jednobojni detalji: aplikacija za čitanje koja se osjeća kao alat za objavljivanje.
Raspored na radnoj površini s tri kolone: fiksna lijeva bočna traka (~200px, navigacija s ikonama i oznakama, ljepljiva), središnji feed (maksimalna širina ~600px, vertikalno pomicanje liste objava) i fiksna desna bočna traka (~300px, pretraga + 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 se nalazi na vrhu feeda kao jedna kartica pune širine. Lijeva bočna traka sadrži logotip brenda (narandžasti znak s preklopljenim linijama), šest navigacijskih stavki i narandžasto dugme "Kreiraj" pune širine na dnu. Desna bočna traka sadrži polje za pretragu, karticu za registraciju i listu "Sljedeće" za čitanje. Navigacija je minimalna - nema gornje trake, nema navigacijskih mrvica; bočna traka JESTE 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 dekorativne fotografije. Glavna kartica koristi tirkizno-zeleni gradijent s apstraktnim ilustrativnim elementima (geometrijski oblici, stilizirani objekti 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 liste za čitanje. Cjelokupni vizualni jezik je zasnovan na tekstu: sučelje je platno za čitanje, a slike služe kao mala vizualna sidra, a ne kao stvaranje atmosfere.
Paleta
Brend
- Signal Orange
#ff6719— Narandžasta se koristi kao sekundarni akcenat za dekorativne detalje i za isticanje rijetkih znakova. Ne bi se trebala koristiti kao primarna boja za pozive na akciju.
Neutralno
- Ink
#363737— Tekst u tijelu objave – glavni tekst, zaglavlja, 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 su dominantne površine koje zauzimaju veliku većinu interfejsa. - Charcoal
#232525— Stanje zadržavanja pokazivača za dodatni tekst i linkove s visokim nivoima selekcije; dublje od režima rukopisa za blokove koda i blokove selekcije. - Stone
#777777— Neutralna boja je podržana za sekundarne UI elemente, razdjelnike i prigušene oznake. Ne bi se trebala koristiti kao primarna boja za pozive na akciju. - Ash
#b6b6b6— Tanke linije okvira, obrisi dugmadi, obrisi ikona, okviri 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čki interfejs i tekst tijela koristi se za navigacijske oznake, dugmad, tekst poruke, metapodatke, polja za unos i sve elemente interfejsa. 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 dugmadi, te 600 za istaknute naslove poruka i zaglavlja odjeljaka.
- Cahuenga — zamjena: Charter · obrisi 500 · Prepoznatljiv dekorativni serifni font za naslove na nivou proizvoda (naslovi bočnih traka, naslovi registracijskih kartica, glavni tekst). Njegova srednja debljina i mala visina linije daju mu prepoznatljiv izgled bez osjećaja glomaznosti; to je jedini font koji, pored narandž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 između redova (1,20) osigurava ugodno čitanje paragrafa, a istovremeno održava kompaktnost tipičnu za redakcije.
Intervali i forma
| Svrha | Značenje |
|---|---|
| Gustoća | gust |
| Osnovni korak | 8px |
| Radijus dugmeta | 9999px |
| Radijus kartice | 12px |
| Sjene | ne - okviri umjesto sjena |
| Između sekcija | 32px |
| Širina stranice | 1200px |
Vještačka inteligencija će izgraditi vašu web stranicu u Substack stilu i popuniti je
- Popunite proizvodima i objavama putem linka - Instagram, TikTok, Facebook.
- Prenesite sadržaj sa vaše stare stranice - samo navedite adresu.
- Moderan dizajn na najboljem engine-u: React ( Next.js) sa serverskim renderovanjem i SEO optimizacijom odmah po instalaciji.
- Potpuno automatizirana SEO optimizacija za rezultate pretrage i preporuke neuronskih mreža.
Slični stilovi
- ElevenLabs — Foto esej u toplim krem tonovima sa suptilnim naslovima. Bilježnica u stilu Bauhausa - papir boje ljuske jajeta, crna tinta i jedan ljubičasti i narandžasti akcenat za izlaganje proizvoda.
- Awesomic — Urednička cinkova mreža s narandžastim interpunkcijskim znakovima koji podsjećaju na konfete
- Monad — urednički tehnički časopis na toplom pergamentu
- Dub — Linkova kontrolna ploča od mat rižinog papira
- Seline Analytics — Tihi analitički sto na toplom papiru
- Notion — Topla papirna sveska na podnevnom suncu
- Anthropic — Naučni časopis s terena o toplom pergamentu - mirne površine boje slonovače, serifirani urednički naslovi i jedan glineni akcenat 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 akcenat u monohromatskom prostoru.
- Antimetal — Uvodnik na krem papiru - tiho jutro u naučnom časopisu, gdje suzdržanost prenosi samopouzdanje, a serifi obavljaju teški posao.
- Perk — Električni limet na toplom pergament papiru
- 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.