Substack
Tinta naranja sobre el escritorio en la redacción.
Substack se asemeja a un panel de redacción desgastado: un lienzo blanco, texto cálido, casi negro, y un único acento naranja brillante que marca cada etapa de la creación de contenido. La jerarquía visual se basa en la densidad más que en la decoración: finas líneas grises separan los elementos del feed, los avatares son pequeños, los metadatos están atenuados y la mirada del lector se centra en la llamada a la acción naranja, el logotipo naranja, el enlace naranja de "Suscribirse" y el botón naranja de "Crear". Las superficies se mantienen planas y sin restricciones (sin sombras de tarjetas, sin elementos de panel cromados), dejando que la tipografía (un elemento de interfaz de usuario compacto del sistema cromado combinado con una fuente de titular serif personalizada) sea la protagonista. El estilo distintivo se caracteriza por elementos cromados sobrios y toques vibrantes de un solo color: una aplicación de lectura que se siente como una herramienta de publicación.
Diseño de escritorio de tres columnas: una barra lateral izquierda fija (~200px, navegación con iconos y etiquetas, fija), un feed central (ancho máximo ~600px, lista de publicaciones con desplazamiento vertical) y una barra lateral derecha fija (~300px, búsqueda + recomendaciones + registro). El feed central es el núcleo editorial: sin tarjetas, solo publicaciones apiladas una encima de la otra con separadores delgados y espacios de 32px entre secciones. El banner principal se encuentra en la parte superior del feed como una única tarjeta de ancho completo. La barra lateral izquierda contiene el logotipo de la marca (un letrero naranja con líneas superpuestas), seis elementos de navegación y un botón naranja de ancho completo "Crear" en la parte inferior. La barra lateral derecha contiene un campo de búsqueda, una tarjeta de registro y una lista "Siguiente" para leer. La navegación es mínima: sin barra superior, sin migas de pan; la barra lateral ES la navegación. La densidad de contenido es alta: las publicaciones utilizan metadatos de 12-13 píxeles y texto principal de 15-19 píxeles, lo que crea un ritmo similar al de un periódico en lugar de la sensación de la cuadrícula de tarjetas de un mercado en línea.
Las fotos son contenido generado por el usuario (avatares de autor, miniaturas de publicaciones, imágenes de publicaciones); Substack no proporciona sus propias fotos decorativas. La tarjeta principal utiliza un degradado de turquesa a verde con elementos ilustrativos abstractos (formas geométricas, objetos estilizados como bolígrafos y notas) como fondo. Las miniaturas de las publicaciones en la barra lateral derecha son pequeñas (64 px), están encerradas en un radio de 8 px y funcionan como una vista previa de la lista de lectura. El lenguaje visual general se basa en texto: la interfaz es un lienzo de lectura y las imágenes sirven como pequeños puntos de referencia visuales en lugar de crear una atmósfera.
Paleta
Marca
- Signal Orange
#ff6719— El naranja se utiliza como color de acento secundario para detalles decorativos y para resaltar señales poco frecuentes. No debe utilizarse como color principal para llamadas a la acción.
Neutral
- Ink
#363737— Texto principal: encabezados, títulos de las entradas, marcas de tiempo y nombres de los autores; un color cálido, casi negro, en lugar del color #000 puro para facilitar la lectura. - Paper
#ffffff— El lienzo de la página, las superficies de las tarjetas, los campos de entrada y el fondo de navegación son las superficies dominantes que ocupan la gran mayoría de la interfaz. - Charcoal
#232525— El modo de desplazamiento permite visualizar texto adicional y enlaces con altos niveles de selección; es más profundo que el modo tinta para bloques de código y bloques de selección. - Stone
#777777— Se admite un color neutro para los elementos secundarios de la interfaz de usuario, los divisores y las etiquetas atenuadas. No debe utilizarse como color principal para las llamadas a la acción. - Ash
#b6b6b6— Líneas de borde finas, contornos de botones, contornos de iconos, bordes en controles deshabilitados. - Mist
#c8c8c8— Líneas divisorias, fondo discreto para iconos, relleno de celdas vacías en forma de esqueleto.
Tipografía
de 12 a 32 píxeles · 5 pasos
- system-ui — reemplazo: -apple-system · esquemas 400, 500, 600 · La fuente principal para la interfaz de usuario y el texto principal se utiliza para las etiquetas de navegación, botones, texto de mensajes, metadatos, campos de entrada y todos los elementos de la interfaz. Los tamaños compactos de 12-13 px para los metadatos y 15-19 px para el texto principal crean la sensación de un feed de noticias denso. El grosor es de 400 para el texto principal, 500 para los elementos de navegación y las etiquetas de los botones, y 600 para los títulos de los mensajes resaltados y los encabezados de sección.
- Cahuenga — reemplazo: Charter · esquemas 500 · Una tipografía serif decorativa distintiva para los encabezados de productos (encabezados de la barra lateral, encabezados de la tarjeta de registro, texto principal). Su grosor medio y su interlineado ligero le confieren una apariencia distinguida sin resultar recargada; es la única tipografía que, además del color naranja, identifica a Substack.
- Spectral — reemplazo: Charter · esquemas 400 · Una tipografía con serifa para textos largos, ideal para salas de lectura y contenido de noticias, que mejora la legibilidad de los artículos. Un interlineado ligeramente más ajustado (1,20) garantiza una lectura cómoda de los párrafos, manteniendo la concisión típica de las redacciones.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | denso |
| Paso básico | 8px |
| Radio del botón | 9999px |
| Radio de la tarjeta | 12px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 32px |
| Ancho de página | 1200px |
La IA construirá tu sitio web al estilo de Substack y lo rellenará.
- Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
- Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
- Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
- Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.
Estilos similares
- ElevenLabs — Un reportaje fotográfico en tonos crema cálidos con titulares sutiles. Un cuaderno de estilo Bauhaus: papel color blanco hueso, tinta negra y un único detalle en morado y naranja para la presentación del producto.
- Awesomic — Malla de zinc editorial con signos de puntuación naranjas que recuerdan al confeti.
- Monad — Revista técnica editorial en pergamino cálido
- Dub — Panel de control de papel de arroz mate de Link
- Seline Analytics — Una mesa analítica tranquila sobre papel tibio
- Notion — Un cuaderno de papel caliente bajo el sol del mediodía.
- Anthropic — Una revista científica de campo impresa en papel vitela de tonos cálidos: superficies de marfil sereno, encabezados editoriales con serifa y un único detalle en color arcilla que aparece solo cuando se requiere acción.
- Calendly — Tinta azul oscuro sobre mármol frío
- Augen Pro — La presentación blanca de Apple presenta un azul eléctrico, aséptico y minimalista, como único acento en un espacio monocromático.
- Antimetal — Una crónica editorial en papel color crema: una mañana tranquila en una revista científica, donde la sobriedad transmite confianza y las serifas hacen el trabajo pesado.
- Perk — Lima eléctrica sobre papel pergamino tibio
- Ditto — Un taller bañado por el sol donde se crean muestras de flores silvestres. Superficies de color crema cálido, una base de color amarillo vibrante, tintas azul marino intenso, formas orgánicas de color que florecen tras la pieza.