Substack
tinta laranxa no escritorio da oficina editorial
Substack parécese ao panel de control dunha redacción xa gastada: unha lona branca, texto cálido, case negro, e un único acento laranxa brillante que marca cada etapa da creación de contido. A xerarquía visual baséase na densidade en lugar da decoración: liñas grises finas separan os elementos do feed, os avatares son pequenos, os metadatos están silenciados e o ollo do lector está adestrado para centrarse na chamada á acción laranxa, o logotipo laranxa, a ligazón laranxa "Subscribirse" e o botón laranxa "Crear". As superficies mantéñense planas e sen restricións (sen sombras de tarxetas, sen elementos de panel cromados), o que permite que a tipografía (un elemento compacto da IU do sistema cromado combinado cunha fonte de título con serifa personalizada) leve a peor parte do peso editorial. O estilo característico son os elementos cromados contidos e os toques vibrantes dunha soa cor: unha aplicación de lectura que parece unha ferramenta de publicación.
Un deseño de escritorio de tres columnas: unha barra lateral esquerda fixa (~200 px, navegación con iconas e etiquetas, fixa), unha fonte central (ancho máximo ~600 px, lista de publicacións con desprazamento vertical) e unha barra lateral dereita fixa (~300 px, busca + recomendacións + rexistro). A fonte central é o núcleo editorial: non hai tarxetas, só publicacións apiladas unhas enriba das outras con divisores finos e espazos de 32 px entre as seccións. O banner principal atópase na parte superior da fonte como unha única tarxeta de ancho completo. A barra lateral esquerda contén o logotipo da marca (un sinal laranxa con liñas superpostas), seis elementos de navegación e un botón laranxa "Crear" de ancho completo na parte inferior. A barra lateral dereita contén un campo de busca, unha tarxeta de rexistro e unha lista "A continuación" para ler. A navegación é mínima: non hai barra superior nin rutas de navegación; a barra lateral É a navegación. A densidade de contido é alta: as publicacións usan metadatos de 12-13 px e texto do corpo de 15-19 px, creando un ritmo similar ao dun xornal en lugar da sensación da grella de tarxetas dun mercado.
As fotos son contido xerado polo usuario (avatares do autor, miniaturas de publicacións, imaxes de publicacións): Substack non proporciona as súas propias fotos decorativas. A tarxeta principal usa un degradado de turquesa a verde con elementos ilustrativos abstractos (formas xeométricas, obxectos estilizados como bolígrafos e notas) como fondo. As miniaturas de publicacións na barra lateral dereita son pequenas (64 px), están dentro dun radio de 8 px e funcionan como unha vista previa da lista de lectura. A linguaxe visual xeral está baseada en texto: a interface é un lenzo de lectura e as imaxes serven como pequenas áncoras visuais en lugar de crear atmosfera.
Paleta
Marca
- Signal Orange
#ff6719— O laranxa úsase como acento secundario para detalles decorativos e para resaltar indicios pouco frecuentes. Non se debe usar como cor principal para chamadas á acción.
Neutro
- Ink
#363737— Corpo de texto: o texto principal, os títulos, os títulos das publicacións, as marcas de tempo e os nomes dos autores; unha cor cálida, case negra, en lugar do #000 puro para facilitar a lectura. - Paper
#ffffff— O lenzo da páxina, as superficies das tarxetas, os campos de entrada e o fondo de navegación son as superficies dominantes que ocupan a gran maioría da interface. - Charcoal
#232525— Estado de desprazamento do cursor para texto adicional e ligazóns con niveis de selección altos; máis profundo que o modo de tinta para bloques de código e bloques de selección. - Stone
#777777— Admítese unha cor neutra para elementos secundarios da interface de usuario, divisores e etiquetas silenciadas. Non se debe usar como cor principal para chamadas á acción. - Ash
#b6b6b6— Liñas de bordo finas, contornos de botóns, contornos de iconas, bordos en controis desactivados. - Mist
#c8c8c8— Liñas divisorias, fondo discreto para iconas, enchendo celas baleiras en forma de esqueleto.
Tipografía
de 12 a 32 px · 5 pasos
- system-ui — substitución: -apple-system · contornos 400, 500, 600 · A fonte principal para a interface de usuario e o texto do corpo úsase para as etiquetas de navegación, os botóns, o texto das mensaxes, os metadatos, os campos de entrada e todos os elementos da interface. Os tamaños compactos de 12-13 px para os metadatos e de 15-19 px para o texto do corpo crean a sensación dunha fonte de noticias densa. O peso é de 400 para o texto do corpo, 500 para os elementos de navegación e as etiquetas dos botóns e 600 para os títulos das mensaxes e os encabezados das seccións destacados.
- Cahuenga — substitución: Charter · contornos 500 · Unha fonte serif decorativa característica para títulos de produto (títulos da barra lateral, títulos da tarxeta de rexistro, texto principal). O seu peso medio e a súa lixeira altura de liña confírenlle unha aparencia distinguida sen resultar voluminosa; é a única fonte que, ademais da cor laranxa, sinala a identidade de Substack.
- Spectral — substitución: Charter · contornos 400 · Unha fonte serif para publicacións longas, que se usa en salas de lectura e en contido de novas para mellorar a lexibilidade dos materiais editoriais. Un interlineado lixeiramente máis axustado (1,20) garante unha lectura cómoda dos parágrafos, mantendo ao mesmo tempo a compacidade típica das salas de redacción.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Paso básico | 8px |
| Radio do botón | 9999px |
| Radio da tarxeta | 12px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 32px |
| Largura da páxina | 1200px |
A IA creará o teu sitio web ao estilo de Substack e o encherá
- Enche con produtos e publicacións a través da ligazón: Instagram, TikTok, Facebook.
- Transfire contido do teu sitio antigo: só tes que especificar o enderezo.
- Deseño moderno no mellor motor: React ( Next.js) con renderización de servidor e optimización SEO listas para usar.
- Optimización SEO totalmente automatizada para resultados de busca e recomendacións de redes neuronais.
Estilos semellantes
- ElevenLabs — Un ensaio fotográfico en tons crema cálidos con titulares sutís. Un caderno de estilo Bauhaus: papel cor casca de ovo, tinta negra e un único detalle morado e laranxa para a exhibición do produto.
- Awesomic — Malla editorial de zinc con signos de puntuación laranxas que lembran confeti
- Monad — revista técnica editorial en pergamiño quente
- Dub — Panel de control de papel de arroz mate de Link
- Seline Analytics — Unha mesa analítica tranquila sobre papel quente
- Notion — Un caderno de papel quente ao sol do mediodía
- Anthropic — Unha revista científica de campo sobre pergamiño cálido: superficies de marfil tranquilas, títulos editoriais con serigrafía e un único acento de arxila que só aparece cando é necesario actuar.
- Calendly — Tinta azul escura sobre mármore frío
- Augen Pro — A presentación branca de Apple presenta un azul eléctrico, clínico e lixeiro como único acento nun espazo monocromático.
- Antimetal — Unha crónica editorial en papel cor crema: unha mañá tranquila nunha revista científica, onde a moderación transmite confianza e as serifas fan o traballo pesado
- Perk — Lima eléctrica sobre papel pergamiño quente
- Ditto — Un obradoiro soleado creando mostras de flores silvestres. Superficies crema cálidas, unha cor base amarela vibrante, tintas azul mariño intenso, formas de cor orgánicas que florecen detrás da peza.