Substack
tinta laranja na mesa da redação
O Substack se assemelha a um painel de controle de redação jornalística bastante utilizado — uma tela branca, texto em tons quentes, quase preto, e um único detalhe em laranja vibrante marcando cada etapa da criação de conteúdo. A hierarquia visual é construída com base na densidade, e não na decoração: linhas finas cinzas separam os elementos do feed, os avatares são pequenos, os metadados são discretos e o olhar do leitor é direcionado para o botão de chamada à ação em laranja, o logotipo laranja, o link "Assinar" em laranja e o botão "Criar" também em laranja. As superfícies são mantidas planas e sem restrições — sem sombras nos cards, sem elementos cromados nos painéis — permitindo que a tipografia (um elemento compacto da interface do usuário cromado, combinado com uma fonte serifada personalizada para os títulos) carregue o peso editorial. O estilo característico é composto por elementos cromados discretos e toques vibrantes de uma única cor: um aplicativo de leitura que se assemelha a uma ferramenta de publicação.
Layout de desktop com três colunas: uma barra lateral fixa à esquerda (aproximadamente 200px, navegação com ícones e rótulos, fixa), um feed central (largura máxima de aproximadamente 600px, lista de posts com rolagem vertical) e uma barra lateral fixa à direita (aproximadamente 300px, busca + recomendações + cadastro). O feed central é o núcleo editorial — sem cards, apenas posts empilhados uns sobre os outros com divisórias finas e espaçamento de 32px entre as seções. O banner principal fica no topo do feed como um único card de largura total. A barra lateral esquerda contém o logotipo da marca (um símbolo laranja com linhas sobrepostas), seis itens de navegação e um botão laranja "Criar" de largura total na parte inferior. A barra lateral direita contém um campo de busca, um card de cadastro e uma lista "A seguir" para leitura. A navegação é minimalista — sem barra superior, sem trilha de navegação; a barra lateral É a navegação. A densidade de conteúdo é alta: as postagens usam metadados de 12 a 13 pixels e texto corrido de 15 a 19 pixels, criando um ritmo semelhante ao de um jornal, em vez da sensação de uma grade de cartões de um mercado online.
As fotos são conteúdo gerado pelo usuário (avatares de autores, miniaturas de posts, imagens de posts) — o Substack não fornece fotos decorativas próprias. O cartão principal usa um gradiente de turquesa para verde com elementos ilustrativos abstratos (formas geométricas, objetos estilizados como canetas e notas) como plano de fundo. As miniaturas dos posts na barra lateral direita são pequenas (64px), delimitadas por um raio de 8px e funcionam como uma prévia da lista de leitura. A linguagem visual geral é baseada em texto: a interface é uma tela de leitura e as imagens servem como pequenas âncoras visuais, em vez de criar atmosfera.
Paleta
Marca
- Signal Orange
#ff6719— A cor laranja é usada como um toque secundário em detalhes decorativos e para destacar elementos que não são tão frequentes. Não deve ser usada como cor principal para chamadas à ação.
Neutro
- Ink
#363737— Corpo do texto — o texto principal, títulos, cabeçalhos, registros de data e hora e nomes dos autores; uma cor quente, quase preta, em vez do preto puro #000 para facilitar a leitura. - Paper
#ffffff— A tela da página, as superfícies dos cartões, os campos de entrada e o fundo de navegação são as superfícies dominantes que ocupam a grande maioria da interface. - Charcoal
#232525— O modo de foco exibe texto e links adicionais com níveis de seleção elevados; mais profundo que o modo Tinta para blocos de código e blocos de seleção. - Stone
#777777— É possível usar uma cor neutra para elementos secundários da interface do usuário, divisores e rótulos com cores suaves. Ela não deve ser usada como cor principal para chamadas à ação. - Ash
#b6b6b6— Linhas de contorno finas, contornos de botões, contornos de ícones, bordas em controles desativados. - Mist
#c8c8c8— Linhas divisórias, fundo discreto para ícones, preenchimento de células vazias na forma de um esqueleto.
Tipografia
de 12 a 32px · 5 etapas
- system-ui — substituição: -apple-system · esboços 400, 500, 600 · A fonte principal para a interface do usuário e o corpo do texto é usada para rótulos de navegação, botões, texto de mensagens, metadados, campos de entrada e todos os elementos da interface. Tamanhos compactos de 12 a 13 pixels para metadados e de 15 a 19 pixels para o corpo do texto criam a sensação de um feed de notícias denso. A espessura é de 400 para o corpo do texto, 500 para elementos de navegação e rótulos de botões, e 600 para títulos de mensagens em destaque e cabeçalhos de seção.
- Cahuenga — substituição: Charter · esboços 500 · Uma fonte serifada decorativa exclusiva para títulos de produtos (títulos da barra lateral, títulos do cartão de registro, texto principal). Sua espessura média e altura de linha reduzida conferem uma aparência distinta sem parecer volumosa; é a única fonte que, além da cor laranja, sinaliza a identidade do Substack.
- Spectral — substituição: Charter · esboços 400 · Uma fonte serifada para textos longos — usada em salas de leitura e em conteúdo de feeds de notícias para melhorar a legibilidade de materiais editoriais. Um espaçamento entre linhas ligeiramente menor (1,20) garante uma leitura confortável dos parágrafos, mantendo a compactação típica das redações.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Passo básico | 8px |
| Raio do botão | 9999px |
| Raio do cartão | 12px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 32px |
| Largura da página | 1200px |
A IA criará seu site no estilo Substack e o preencherá.
- Compartilhe produtos e publicações através dos links - Instagram, TikTok, Facebook.
- Transfira o conteúdo do seu site antigo — basta especificar o endereço.
- Design moderno na melhor engine: React ( Next.js) com renderização no servidor e otimização de SEO integradas.
- Otimização de SEO totalmente automatizada para resultados de pesquisa e recomendações de redes neurais.
Estilos semelhantes
- ElevenLabs — Um ensaio fotográfico em tons creme quentes com títulos sutis. Um caderno em estilo Bauhaus — papel cor de casca de ovo, tinta preta e um único detalhe em roxo e laranja para exibição do produto.
- Awesomic — Tela editorial em zinco com marcas de pontuação laranja que lembram confete.
- Monad — revista técnica editorial sobre pergaminho quente
- Dub — Painel de controle de papel de arroz fosco do Link
- Seline Analytics — Uma mesa analítica silenciosa sobre papel quente
- Notion — Um caderno de papel quente sob o sol do meio-dia
- Anthropic — Uma revista científica de campo impressa em pergaminho de tom quente — superfícies de marfim sereno, títulos editoriais com serifa e um único detalhe em tom de barro que aparece apenas quando é necessário dar o que falar.
- Calendly — Tinta azul escura sobre mármore frio
- Augen Pro — A apresentação branca da Apple destaca um azul elétrico, clínico e leve, como único elemento de destaque em um espaço monocromático.
- Antimetal — Uma crônica editorial em papel creme — uma manhã tranquila em uma revista científica, onde a sobriedade transmite confiança e as serifas desempenham um papel fundamental.
- Perk — Cal elétrica em papel pergaminho quente
- Ditto — Uma oficina ensolarada criando amostras de flores silvestres. Superfícies em tons creme quentes, uma vibrante cor de base amarela, tintas em um profundo azul marinho, formas orgânicas de cores desabrochando ao fundo da obra.