Substack
oranžový inkoust na stole v redakci
Substack vypadá jako opotřebovaný redakční panel – bílé plátno, teplý, téměř černý text a jeden jasně oranžový akcent označující každou fázi tvorby obsahu. Vizuální hierarchie je postavena na hustotě spíše než na dekoraci: tenké šedé čáry oddělují prvky kanálu, avatary jsou malé, metadata jsou tlumená a oko čtenáře je naučeno soustředit se na oranžovou výzvu k akci, oranžové logo, oranžový odkaz „Přihlásit se k odběru“ a oranžové tlačítko „Vytvořit“. Povrchy jsou ploché a neomezené – žádné stíny karet, žádné chromované panelové prvky – takže typografie (kompaktní chromovaný prvek uživatelského rozhraní systému spárovaný s vlastním patkovým písmem titulku) nese hlavní tíhu redakčních prvků. Charakteristickým stylem jsou zdrženlivé chromované prvky a zářivé, jednobarevné akcenty: aplikace pro čtení, která působí jako publikační nástroj.
Třísloupcové rozvržení pro plochu: pevný levý postranní panel (~200px, navigace s ikonami a popisky, lepivé umístění), středový kanál (maximální šířka ~600px, svisle posouvající se seznam příspěvků) a pevný pravý postranní panel (~300px, vyhledávání + doporučení + registrace). Středový kanál tvoří redakční jádro – žádné karty, pouze příspěvky naskládané na sobě s tenkými oddělovači a 32px mezerami mezi sekcemi. Hlavní banner se nachází v horní části kanálu jako jedna karta o plné šířce. Levý postranní panel obsahuje logo značky (oranžový nápis s překrývajícími se čarami), šest navigačních položek a dole oranžové tlačítko „Vytvořit“ o plné šířce. Pravý postranní panel obsahuje vyhledávací pole, registrační kartu a seznam „Další“ pro čtení. Navigace je minimální – žádný horní panel, žádná navigace; postranní panel JE navigace. Hustota obsahu je vysoká: příspěvky používají metadata o velikosti 12–13px a text o velikosti 15–19px, což vytváří spíše rytmus podobný novinám než dojem mřížky karet na tržišti.
Fotografie jsou obsah generovaný uživateli (avatary autorů, miniatury příspěvků, obrázky příspěvků) – Substack neposkytuje vlastní dekorativní fotografie. Hlavní karta používá jako pozadí tyrkysový až zelený gradient s abstraktními ilustrativními prvky (geometrické tvary, stylizované objekty, jako jsou pera a poznámky). Miniatury příspěvků v pravém postranním panelu jsou malé (64px), ohraničené poloměrem 8px a fungují jako náhled seznamu ke čtení. Celkový vizuální jazyk je založen na textu: rozhraní je plátno pro čtení a obrázky slouží spíše jako malé vizuální kotvy než jako nástroje pro vytváření atmosféry.
Paleta
Značka
- Signal Orange
#ff6719— Oranžová se používá jako sekundární akcent pro dekorativní detaily a pro zvýraznění méně častých signálů. Neměla by se používat jako primární barva pro výzvy k akci.
Neutrální
- Ink
#363737— Text – hlavní text, nadpisy, názvy příspěvků, časová razítka a jména autorů; teplá, téměř černá barva místo čistého #000 pro snazší čtení. - Paper
#ffffff— Plátno stránky, povrchy karet, vstupní pole a navigační pozadí jsou dominantními povrchy, které zabírají převážnou většinu rozhraní. - Charcoal
#232525— Stav při najetí myší pro další text a odkazy s vysokou úrovní výběru; hlubší než režim Inkoust pro bloky kódu a bloky výběru. - Stone
#777777— Pro sekundární prvky uživatelského rozhraní, oddělovače a tlumené popisky je podporována neutrální barva. Neměla by se používat jako primární barva pro výzvy k akci. - Ash
#b6b6b6— Tenké ohraničení, obrysy tlačítek, obrysy ikon, ohraničení u zakázaných ovládacích prvků. - Mist
#c8c8c8— Dělicí čáry, nenápadné pozadí pro ikony, vyplňování prázdných buněk ve formě kostry.
Typografie
od 12 do 32 pixelů · 5 kroků
- system-ui — nahrazení: -apple-system · obrysy 400, 500, 600 · Primární písmo pro uživatelské rozhraní a text se používá pro navigační popisky, tlačítka, text zpráv, metadata, vstupní pole a všechny prvky rozhraní. Kompaktní velikosti 12–13 pixelů pro metadata a 15–19 pixelů pro text vytvářejí dojem hustého kanálu novinek. Váha textu je 400, pro navigační prvky a popisky tlačítek 500 a pro zvýrazněné názvy zpráv a nadpisy sekcí 600.
- Cahuenga — nahrazení: Charter · obrysy 500 · Charakteristické dekorativní patkové písmo pro nadpisy na úrovni produktů (nadpisy postranního panelu, nadpisy registračních karet, hlavní text). Jeho střední gramáž a malá výška řádku mu dodávají osobitý vzhled, aniž by působil objemně; je to jediné písmo, které kromě oranžové barvy signalizuje identitu Substacku.
- Spectral — nahrazení: Charter · obrysy 400 · Patkové písmo pro dlouhé příspěvky – používá se v čtenářských místnostech a v obsahu zpravodajských kanálů ke zlepšení čitelnosti redakčních materiálů. Mírně menší řádkování (1,20) zajišťuje pohodlné čtení odstavců a zároveň zachovává kompaktnost typickou pro redakce.
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | hustý |
| Základní krok | 8px |
| Poloměr tlačítka | 9999px |
| Poloměr karty | 12px |
| Stíny | ne - okraje místo stínů |
| Mezi sekcemi | 32px |
| Šířka stránky | 1200px |
Umělá inteligence vám vytvoří web ve stylu Substack a naplní ho
- Doplňujte produkty a příspěvky přes odkaz - Instagram, TikTok, Facebook.
- Přeneste obsah ze starého webu – stačí zadat adresu.
- Moderní design na nejlepším enginu: React ( Next.js) s renderováním na serveru a SEO optimalizací ihned po vybalení.
- Plně automatizovaná SEO optimalizace pro výsledky vyhledávání a doporučení neuronových sítí.
Podobné styly
- ElevenLabs — Fotoesej v teplých krémových tónech s decentními nadpisy. Zápisník ve stylu Bauhausu – papír barvy vaječné skořápky, černý inkoust a jeden fialovooranžový akcent pro vystavení produktů.
- Awesomic — Redakční zinková síťovina s oranžovými interpunkčními znaménky připomínajícími konfety
- Monad — redakční technický časopis na teplém pergamenu
- Dub — Ovládací panel Link z matného rýžového papíru
- Seline Analytics — Tichý analytický stůl na teplém papíře
- Notion — Teplý papírový zápisník v polední slunci
- Anthropic — Vědecký časopis z oblasti teplého pergamenu – klidné slonovinové povrchy, patkové úvodní nadpisy a jediný hliněný akcent, který se objevuje pouze tehdy, když je potřeba něco udělat.
- Calendly — Tmavě modrý inkoust na studeném mramoru
- Augen Pro — Bílá prezentace společnosti Apple se vyznačuje klinickou, beztížnou, elektrickou modrou barvou jako jediným akcentem v monochromatickém prostoru.
- Antimetal — Redakční kronika na krémovém papíře – klidné dopoledne ve vědeckém časopise, kde zdrženlivost vyjadřuje sebevědomí a patky odvádějí těžkou práci.
- Perk — Elektrické vápno na teplém pergamenovém papíru
- Ditto — Sluncem zalitá dílna, kde se vytvářejí vzorky divokých květin. Teplé krémové povrchy, zářivá žlutá základní barva, tmavě tmavě modré inkousty, organické barevné formy rozkvétající za dílem.