Substack
Inchiostro arancione sulla scrivania della redazione
Substack si presenta come la dashboard di una redazione giornalistica ben rodata: una tela bianca, un testo caldo, quasi nero, e un singolo accento arancione brillante che contraddistingue ogni fase della creazione dei contenuti. La gerarchia visiva si basa sulla densità piuttosto che sulla decorazione: sottili linee grigie separano gli elementi del feed, gli avatar sono piccoli, i metadati sono tenui e l'occhio del lettore è abituato a concentrarsi sulla call to action arancione, sul logo arancione, sul link "Iscriviti" arancione e sul pulsante "Crea" arancione. Le superfici sono piatte e prive di vincoli – niente ombreggiature, niente elementi cromati – lasciando che la tipografia (un elemento UI di sistema cromato compatto abbinato a un font serif personalizzato per i titoli) si faccia carico del peso editoriale. Lo stile distintivo è caratterizzato da elementi cromati sobri e vivaci tocchi di colore singolo: un'app di lettura che sembra uno strumento di pubblicazione.
Layout desktop a tre colonne: una barra laterale sinistra fissa (~200px, navigazione con icone ed etichette, fissa), un feed centrale (larghezza massima ~600px, elenco di post a scorrimento verticale) e una barra laterale destra fissa (~300px, ricerca + consigli + registrazione). Il feed centrale è il nucleo editoriale: nessun riquadro, solo post impilati uno sopra l'altro con sottili divisori e spazi di 32px tra le sezioni. Il banner principale si trova nella parte superiore del feed come un singolo riquadro a tutta larghezza. La barra laterale sinistra contiene il logo del brand (un'insegna arancione con linee sovrapposte), sei voci di navigazione e un pulsante arancione "Crea" a tutta larghezza in basso. La barra laterale destra contiene un campo di ricerca, un modulo di registrazione e un elenco "Prossimi articoli" da leggere. La navigazione è minimale: nessuna barra superiore, nessun percorso di navigazione; la barra laterale È la navigazione. La densità dei contenuti è elevata: i post utilizzano metadati di 12-13 pixel e testo del corpo di 15-19 pixel, creando un ritmo simile a quello di un giornale piuttosto che l'aspetto della griglia di schede di un marketplace.
Le foto sono contenuti generati dagli utenti (avatar degli autori, miniature dei post, immagini dei post): Substack non fornisce immagini decorative proprie. La scheda principale utilizza una sfumatura dal turchese al verde con elementi illustrativi astratti (forme geometriche, oggetti stilizzati come penne e appunti) come sfondo. Le miniature dei post nella barra laterale destra sono piccole (64px), racchiuse in un raggio di 8px e fungono da anteprima dell'elenco di lettura. Il linguaggio visivo complessivo è basato sul testo: l'interfaccia è una tela di lettura e le immagini fungono da piccoli punti di ancoraggio visivi piuttosto che da elementi che creano atmosfera.
Tavolozza
Marca
- Signal Orange
#ff6719— L'arancione viene utilizzato come accento secondario per dettagli decorativi e per evidenziare elementi che si presentano raramente. Non dovrebbe essere utilizzato come colore principale per le chiamate all'azione.
Neutro
- Ink
#363737— Testo del corpo: il testo principale, le intestazioni, i titoli dei post, le indicazioni temporali e i nomi degli autori; un colore caldo, quasi nero, anziché il classico #000, per una lettura più agevole. - Paper
#ffffff— La tela della pagina, le superfici delle schede, i campi di input e lo sfondo di navigazione sono le superfici dominanti che occupano la stragrande maggioranza dell'interfaccia. - Charcoal
#232525— Al passaggio del mouse vengono visualizzati testo e collegamenti aggiuntivi con livelli di selezione elevati; questa modalità è più approfondita rispetto alla modalità Ink per blocchi di codice e blocchi di selezione. - Stone
#777777— Un colore neutro è supportato per gli elementi secondari dell'interfaccia utente, i divisori e le etichette attenuate. Non deve essere utilizzato come colore principale per le call to action. - Ash
#b6b6b6— Linee di bordo sottili, contorni dei pulsanti, contorni delle icone, bordi dei comandi disabilitati. - Mist
#c8c8c8— Linee di separazione, sfondo discreto per le icone, riempimento delle celle vuote a formare uno scheletro.
Tipografia
da 12 a 32 pixel · 5 passaggi
- system-ui — sostituzione: -apple-system · contorni 400, 500, 600 · Il carattere principale per l'interfaccia utente e il testo del corpo viene utilizzato per le etichette di navigazione, i pulsanti, il testo dei messaggi, i metadati, i campi di input e tutti gli elementi dell'interfaccia. Le dimensioni compatte di 12-13 px per i metadati e 15-19 px per il testo del corpo creano l'impressione di un feed di notizie denso. Il peso è di 400 per il testo del corpo, 500 per gli elementi di navigazione e le etichette dei pulsanti e 600 per i titoli dei messaggi evidenziati e le intestazioni di sezione.
- Cahuenga — sostituzione: Charter · contorni 500 · Un carattere serif decorativo distintivo per le intestazioni a livello di prodotto (intestazioni della barra laterale, intestazioni della scheda di registrazione, testo principale). Il suo peso medio e la leggera interlinea gli conferiscono un aspetto elegante senza risultare pesante; è l'unico carattere che, oltre al colore arancione, comunica l'identità di Substack.
- Spectral — sostituzione: Charter · contorni 400 · Un carattere serif per post lunghi, utilizzato nelle sale di lettura e nei contenuti dei feed di notizie per migliorare la leggibilità dei materiali editoriali. Una spaziatura tra le righe leggermente più stretta (1,20) garantisce una lettura confortevole dei paragrafi, mantenendo al contempo la compattezza tipica delle redazioni.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | denso |
| Passo base | 8px |
| Raggio del pulsante | 9999px |
| Raggio della carta | 12px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 32px |
| Larghezza del pannello | 1200px |
L'IA creerà il tuo sito web nello stile Substack e lo riempirà
- Pubblica prodotti e contenuti tramite il link: Instagram, TikTok, Facebook.
- Trasferisci i contenuti dal tuo vecchio sito: basta specificare l'indirizzo.
- Design moderno sul miglior motore: React ( Next.js) con rendering lato server e ottimizzazione SEO integrata.
- Ottimizzazione SEO completamente automatizzata per i risultati di ricerca e raccomandazioni basate su reti neurali.
Stili simili
- ElevenLabs — Un reportage fotografico dai toni caldi color crema con titoli delicati. Un taccuino in stile Bauhaus: carta color guscio d'uovo, inchiostro nero e un unico accento viola e arancione per la presentazione del prodotto.
- Awesomic — Rete metallica in zinco per uso editoriale con segni di punteggiatura arancioni che ricordano i coriandoli.
- Monad — Rivista tecnica editoriale sulla pergamena calda
- Dub — Pannello di controllo in carta di riso opaca di Link
- Seline Analytics — Un tranquillo tavolo analitico su carta calda
- Notion — Un quaderno di carta calda sotto il sole di mezzogiorno
- Anthropic — Un diario scientifico da campo su calda pergamena: superfici color avorio, titoli editoriali con grazie e un unico accento color argilla che compare solo quando è necessario intervenire.
- Calendly — Inchiostro blu scuro su marmo freddo
- Augen Pro — La presentazione bianca di Apple presenta un blu elettrico, clinico e impalpabile, come unico accento in uno spazio monocromatico.
- Antimetal — Una cronaca editoriale su carta color crema: una tranquilla mattinata in una rivista scientifica, dove la sobrietà trasmette sicurezza e i caratteri serif svolgono il lavoro più impegnativo.
- Perk — Calce elettrica su carta da forno calda
- Ditto — Un laboratorio illuminato dal sole dove si creano campioni di fiori selvatici. Superfici color crema caldo, una base di colore giallo vibrante, inchiostri blu scuro intenso, forme di colore organiche che sbocciano sullo sfondo dell'opera.