
Medium
periódico blanco cremoso a la hora dorada
Medium funciona como una sala de lectura literaria trasplantada a la web: un fondo cálido y cremoso (#f7f4ed) reemplaza el blanco estéril típico del SaaS, haciendo que los textos largos se sientan como una página impresa. El sistema visual es agresivamente monocromático: casi todas las superficies de la interfaz de usuario, el texto y los bordes están en una estrecha banda de grises cálidos que van desde #242424 hasta #6b6b6b, por lo que la atención del lector se centra completamente en el contenido. El único gesto distintivo es el titular con serifa (GT Super, 120px, peso 400, espaciado entre letras -0.055em), una elección deliberada que va en contra de las tendencias: una fuente serif de transición para libros escalada para visualización, apenas perceptible en lugar de una sans-serif geométrica llamativa, indica: "Publicamos libros, no software". Los botones son "píldoras" completas de color casi negro, la única tinta sólida en la página.
La página de inicio tiene dos columnas: la izquierda ocupa aproximadamente el 55 % del espacio, con el titular, el subtítulo y la llamada a la acción dispuestos verticalmente con un amplio espacio interno; la derecha ocupa aproximadamente el 45 % del espacio, con un panel de ilustraciones. La columna izquierda está alineada a la izquierda (no centrada), lo que fija la página al eje de lectura. Debajo de la página de inicio, la página es una única franja de color crema que ocupa todo el ancho, con enlaces centrados en el pie de página. No hay cuadrículas de tarjetas, secciones destacadas ni franjas alternas en la página de inicio: la página de inicio ES una página. La densidad de contenido es intencionadamente baja: un titular, una frase, un botón, una imagen. La página es una portada, no un panel de control.
Las ilustraciones son editoriales y episódicas, no sistemáticas. La página principal presenta una única ilustración dibujada a mano (una flor verde, una mano geométrica, líneas de constelación) con un estilo suelto y ligeramente ingenuo. Las ilustraciones parecen encargos que cambian según la temporada, en lugar de pertenecer a una biblioteca permanente. No hay fotografías ni iconos en la página principal; todo el trabajo lo realizan el logotipo y el texto. El lenguaje visual se centra principalmente en el texto, y las ilustraciones funcionan como puntuación.
Paleta
Neutral
- Newsprint Cream
#f7f4ed— El lienzo de la página, el fondo de la ventana principal y el fondo de la sección tienen un tono cálido, ligeramente cremoso, que crea la sensación de una interfaz impresa en lugar de una digital. - Paper White
#ffffff— Superficies de tarjetas, paneles en relieve, campos de entrada de formularios y cualquier superficie que deba separarse del lienzo color crema. - Ink
#242424— Texto principal, texto principal, enlaces, encabezados: ligeramente más cálido que el negro puro, queda bien sobre un fondo color crema. - Body Gray
#333333— El color de texto secundario y el color de primer plano predeterminado se utilizan cuando se requiere un color ligeramente más claro que el color de la tinta sin perder contraste. - Button Black
#191919— 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. - Marginalia Gray
#6b6b6b— Compatibilidad con colores neutros para la interfaz de usuario secundaria, los divisores y las etiquetas atenuadas.
Tipografía
De 13 a 120 píxeles · 5 pasos
- medium-content-sans-serif-font — reemplazo: Inter · esquemas 400 · fuente medium-content-sans-serif: encontrada en los datos extraídos pero no descrita por la IA.
- GT Super — reemplazo: Playfair Display · esquemas 400 · Los títulos y el texto principal utilizan una tipografía serif de transición, de gran tamaño, con un espaciado entre letras muy ajustado y un interlineado de 0,83. La elección de un grosor de 400 (no negrita) a 120 píxeles es un rasgo distintivo: la forma de las letras, y no el grosor, es lo que marca la diferencia. El espaciado negativo entre letras reduce la sensación de separación visual, logrando que «Historias e Ideas Humanas» se perciba como un bloque tipográfico coherente.
- Söhne — reemplazo: Inter · esquemas 400 · La fuente sans-serif de la interfaz de usuario se utiliza para la navegación, botones, subtítulos y títulos pequeños. El rango de 13 a 14 píxeles se usa para las etiquetas de navegación y los botones; de 20 a 22 píxeles se usa para los subtítulos y el texto secundario dentro del título. Una fuente sans-serif limpia con proporciones humanísticas es legible en tamaños pequeños y discreta en tamaños grandes.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | promedio |
| Paso básico | 16-24px |
| Radio del botón | 9999px |
| Radio de la tarjeta | 0px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 64px |
| Ancho de página | 1200px |
La IA construirá tu sitio web al estilo de Medium 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
- Steep — Análisis de fuentes con serifa en papel cálido
- Newformcap — Periódico editorial en el vestuario
- Claude — Un artefacto impreso en pergamino cálido: tinta sobre papel de hueso, arcilla como único soplo de color.
- 11x– Digital workers — Un páramo editorial cinematográfico: fotografías panorámicas del paisaje contrastando con titulares monumentales en tipografía serif que parecen sacados de una revista de lujo.
- Revolut — Un trabajo editorial monocromático basado en una fotografía de nubes: tinta blanca, botones de pastillero, una única franja azul de color en un mundo predominantemente gris.
- Scheduling — Tinta editorial sobre papel color crema
- Titan — archivo monocromo de tonos cálidos
- Programa — Un estudio de diseño suizo al mediodía. La pared blanca de la galería está iluminada por una sola lámpara de mesa amarilla; todo está en tonos grises hasta que un botón, un icono o un detalle llama la atención, y entonces ese único detalle amarillo define toda la habitación.
- Sana Agents — Destellos de lima sobre fondo blanco en una publicación editorial
- Visual — Samizdat editorial de tono cálido. Papel color crema, carteles con serifa, anotaciones marginales en monocromo, un rotulador amarillo.
- Midday — Folleto editorial en vitela: titular con serifa de 72 px sobre fondo de piedra cálida, texto sin serifa con espaciado, controles en forma de píldora, sin sombras.
- Chat for impact — Una clínica de color verde bosque con habitaciones de colores pastel.