Substack
oranžový atrament na stole v redakcii
Substack vyzerá ako opotrebovaný redakčný panel – biele plátno, teplý, takmer čierny text a jeden jasne oranžový akcent označujúci každú fázu tvorby obsahu. Vizuálna hierarchia je postavená skôr na hustote ako na dekorácii: tenké sivé čiary oddeľujú prvky kanála, avatary sú malé, metadáta sú tlmené a čitateľovo oko je naučené sústrediť sa na oranžovú výzvu na akciu, oranžové logo, oranžový odkaz „Prihlásiť sa na odber“ a oranžové tlačidlo „Vytvoriť“. Povrchy sú ploché a neobmedzené – žiadne tieňové prvky kariet, žiadne chrómové panelové prvky – takže typografia (kompaktný chrómový prvok používateľského rozhrania systému spárovaný s vlastným pätkovým písmom titulku) nesie hlavnú ťarchu redakčnej váhy. Charakteristickým štýlom sú zdržanlivé chrómové prvky a žiarivé, jednofarebné zvýraznenia: aplikácia na čítanie, ktorá pôsobí ako publikačný nástroj.
Trojstĺpcové rozloženie pre pracovnú plochu: pevný ľavý bočný panel (~200px, navigácia s ikonami a popismi, lepivé), stredový kanál (maximálna šírka ~600px, vertikálne posúvateľný zoznam príspevkov) a pevný pravý bočný panel (~300px, vyhľadávanie + odporúčania + registrácia). Stredový kanál je redakčné jadro – žiadne karty, len príspevky naukladané na sebe s tenkými deliacimi prvkami a 32px medzerami medzi sekciami. Hlavný banner sa nachádza v hornej časti kanála ako jedna karta s plnou šírkou. Ľavý bočný panel obsahuje logo značky (oranžový znak s prekrývajúcimi sa čiarami), šesť navigačných položiek a oranžové tlačidlo „Vytvoriť“ s plnou šírkou v dolnej časti. Pravý bočný panel obsahuje vyhľadávacie pole, registračnú kartu a zoznam „Ďalej“ na čítanie. Navigácia je minimálna – žiadny horný panel, žiadna navigácia; bočný panel JE navigácia. Hustota obsahu je vysoká: príspevky používajú 12 – 13px metadáta a 15 – 19px text, čím vytvárajú skôr rytmus ako noviny než dojem mriežky kariet na trhovisku.
Fotografie sú obsah generovaný používateľmi (avatary autorov, miniatúry príspevkov, obrázky príspevkov) – Substack neposkytuje vlastné dekoratívne fotografie. Hlavná karta používa ako pozadie tyrkysový až zelený prechod s abstraktnými ilustratívnymi prvkami (geometrické tvary, štylizované objekty ako perá a poznámky). Miniatúry príspevkov v pravom bočnom paneli sú malé (64px), ohraničené polomerom 8px a slúžia ako ukážka zoznamu na čítanie. Celkový vizuálny jazyk je založený na texte: rozhranie je plátno na čítanie a obrázky slúžia skôr ako malé vizuálne kotvy, než aby vytvárali atmosféru.
Paleta
Značka
- Signal Orange
#ff6719— Oranžová sa používa ako sekundárny akcent pre dekoratívne detaily a na zvýraznenie menej častých podnetov. Nemala by sa používať ako primárna farba pre výzvy na akciu.
Neutrálny
- Ink
#363737— Hlavný text – hlavný text, nadpisy, názvy príspevkov, časové pečiatky a mená autorov; teplá, takmer čierna farba namiesto čistého #000 pre ľahšie čítanie. - Paper
#ffffff— Plátno stránky, povrchy kariet, vstupné polia a navigačné pozadie sú dominantné povrchy, ktoré zaberajú prevažnú väčšinu rozhrania. - Charcoal
#232525— Stav podržania kurzora myši pre ďalší text a odkazy s vysokou úrovňou výberu; hlbší ako režim atramentu pre bloky kódu a bloky výberu. - Stone
#777777— Pre sekundárne prvky používateľského rozhrania, oddeľovače a tlmené popisky je podporovaná neutrálna farba. Nemala by sa používať ako primárna farba pre výzvy na akciu. - Ash
#b6b6b6— Tenké orámovacie čiary, obrysy tlačidiel, obrysy ikon, orámovanie na nefunkčných ovládacích prvkoch. - Mist
#c8c8c8— Deliace čiary, nenápadné pozadie pre ikony, vyplnenie prázdnych buniek v podobe kostry.
Typografia
od 12 do 32px · 5 krokov
- system-ui — náhrada: -apple-system · obrysy 400, 500, 600 · Primárne písmo pre používateľské rozhranie a text tela sa používa pre navigačné popisky, tlačidlá, text správ, metadáta, vstupné polia a všetky prvky rozhrania. Kompaktné veľkosti 12 – 13 px pre metadáta a 15 – 19 px pre text tela vytvárajú dojem hustého spravodajského kanála. Hmotnosť je 400 pre text tela, 500 pre navigačné prvky a popisky tlačidiel a 600 pre zvýraznené názvy správ a nadpisy sekcií.
- Cahuenga — náhrada: Charter · obrysy 500 · Charakteristické dekoratívne pätkové písmo pre nadpisy na úrovni produktu (nadpisy bočného panela, nadpisy registračných kariet, hlavný text). Jeho stredná hrúbka a malá výška riadku mu dodávajú výrazný vzhľad bez toho, aby pôsobil objemne; je to jediné písmo, ktoré okrem oranžovej farby signalizuje identitu Substacku.
- Spectral — náhrada: Charter · obrysy 400 · Pätkové písmo pre dlhé príspevky – používané v čitárňach a v spravodajských kanáloch na zlepšenie čitateľnosti redakčných materiálov. Mierne menšie riadkovanie (1,20) zaisťuje pohodlné čítanie odsekov a zároveň zachováva kompaktnosť typickú pre redakcie.
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | hustý |
| Základný krok | 8px |
| Polomer tlačidla | 9999px |
| Polomer karty | 12px |
| Tiene | nie - okraje namiesto tieňov |
| Medzi sekciami | 32px |
| Šírka stránky | 1200px |
Umelá inteligencia vytvorí vašu webovú stránku v štýle Substack a naplní ju
- Doplňte produktmi a príspevkami cez odkaz - Instagram, TikTok, Facebook.
- Preneste obsah zo svojej starej stránky – stačí zadať adresu.
- Moderný dizajn na najlepšom engine: React ( Next.js) s vykresľovaním servera a SEO optimalizáciou hneď po vybalení.
- Plne automatizovaná SEO optimalizácia pre výsledky vyhľadávania a odporúčania neurónových sietí.
Podobné štýly
- ElevenLabs — Fotoesej v teplých krémových tónoch s jemnými nadpismi. Zápisník v štýle Bauhaus – papier farby vaječnej škrupiny, čierny atrament a jeden fialovo-oranžový akcent na vystavenie produktov.
- Awesomic — Redakčná zinková sieťovina s oranžovými interpunkčnými znamienkami pripomínajúcimi konfety
- Monad — redakčný technický časopis na teplom pergamene
- Dub — Ovládací panel z matného ryžového papiera Link
- Seline Analytics — Tichý analytický stôl na teplom papieri
- Notion — Teplý papierový zápisník na poludňajšom slnku
- Anthropic — Vedecký časopis z oblasti teplého pergamenu – pokojné slonovinové povrchy, pätkové úvodné nadpisy a jediný hlinený prízvuk, ktorý sa objavuje iba vtedy, keď je potrebná akcia.
- Calendly — Tmavomodrý atrament na studenom mramore
- Augen Pro — Biela prezentácia spoločnosti Apple sa vyznačuje klinickou, beztiažovou, elektrickou modrou ako jediným akcentom v monochromatickom priestore.
- Antimetal — Redakčná kronika na krémovom papieri – tiché ráno vo vedeckom časopise, kde zdržanlivosť vyjadruje sebavedomie a pätkové písmo robí ťažkú prácu.
- Perk — Elektrické vápno na teplom pergamenovom papieri
- Ditto — Slnečná dielňa, kde sa tvoria vzorky divých kvetov. Teplé krémové povrchy, žiarivá žltá základná farba, sýto tmavomodré atramenty, organické farebné formy kvitnúce za dielom.