Superhuman
Panel editorial de la hora dorada
Superhuman se sitúa en la intersección de la fotografía editorial y la interfaz de usuario de software: un lienzo cálido, similar al pergamino (nunca blanco puro), enmarca elementos de marca granates y vibrantes detalles morados. Los titulares, con fuente 460, susurran en lugar de gritar, permitiendo que la fotografía cinematográfica a página completa sea la protagonista, mientras que las tarjetas de interfaz de usuario de productos translúcidas flotan como cristal sobre las imágenes. La paleta se mantiene tranquila y editorial la mayor parte del tiempo: superficies color crema, texto color carbón, sutiles bordes gris cálido y un amplio espacio entre elementos, con el color reservado para la puntuación deliberada de la marca: una única llamada a la acción granate, enlaces morados, un botón de complemento lila claro. El sistema evita deliberadamente las sombras fuertes y los degradados en las superficies de la interfaz de usuario; la profundidad se logra mediante fotografías en capas y un sutil desenfoque de fondo en el título, en lugar de mediante un efecto de apilamiento.
El elemento principal es una fotografía de ancho completo con un titular centrado (48-64px/460) y una única llamada a la acción rellena con una imagen de vino, con tarjetas de interfaz de usuario de producto translúcidas flotantes superpuestas en los bordes izquierdo y derecho. Debajo del elemento principal hay una tira de logotipo de rayas blancas (6 celdas por fila, ancho máximo limitado), luego una sección de pestañas con superficies de tarjeta blancas sobre lienzo de pergamino. Una raya turquesa oscura rompe el ritmo aproximadamente a dos tercios de la página (ancho completo, dos columnas (imagen a la izquierda, texto a la derecha)), creando el único contraste tonal al desplazarse. Le sigue una raya atmosférica degradada. El espaciado vertical entre secciones es de 64-96px. El ancho máximo del contenido es de ~1200px centrado, con el elemento principal y la raya oscura abarcando todo el ancho de la ventana gráfica. La navegación es un único encabezado fijo con un fondo difuminado; sin barra lateral, sin mega menú. El pie de página es una página color burdeos de ancho completo con un diseño de enlaces en varias columnas. El ritmo general es: marco principal → contenido blanco/crema tranquilo → franja oscura con la imagen principal → degradado atmosférico → pie de página burdeos, alternando franjas claras y oscuras para crear un ritmo editorial.
El elemento visual principal es la fotografía cinematográfica: un retrato a página completa contra un cielo abierto sirve como punto focal, con una segunda franja atmosférica ubicada más abajo en la página. La imagen tiene tonos cálidos, sutilmente atenuados y está tomada de perfil, evocando la hora dorada, creando una sensación más editorial que corporativa. Una franja oscura con rectángulos geométricos translúcidos e inscripciones manuscritas se superpone a la fotografía de un hombre absorto en sus pensamientos: un collage de superficies en lugar de una sola imagen. La interfaz de usuario se presenta como tarjetas flotantes de cristal superpuestas directamente a la fotografía, en lugar de capturas de pantalla separadas. No hay ilustraciones de archivo, ni renders 3D, ni formas decorativas abstractas, salvo la franja atmosférica con degradado. Los iconos son minimalistas, monocromáticos, de línea, de entre 16 y 20 píxeles de ancho, con un ancho único que corresponde al grosor de fuente de 460 puntos.
Paleta
Marca
- Midnight Wine
#421d24— Los botones de acción principales, el banner publicitario y el pie de página son de un tono burdeos cálido, casi negro, que se asemeja más a la tinta que al rojo, lo que sirve de base a la paleta de colores sin resultar abrumador. - Royal Violet
#714cb6— El color morado se utiliza para resaltar enlaces, etiquetas y frases cortas. No debe usarse como color principal para las llamadas a la acción.
Neutral
- Lilac Mist
#d4c7ff— El relleno de la superficie secundaria, los iconos de luz y los fondos de los botones fantasma presentan un color púrpura tenue que insinúa el estilo de la marca sin llamar demasiado la atención. - Deep Lagoon
#0c4243— El fondo oscuro de la tira cómica, utilizado como elemento narrativo principal, es la única superficie oscura del sistema, combinada con un patrón geométrico superpuesto. - Warm Parchment
#f2f0eb— La superficie de trabajo de la página es el elemento dominante; un color crema cálido reemplaza al blanco como base, lo que confiere a todo el sistema una calidez editorial. - Soft Mist
#e3e3e2— Bordes finos, contornos definidos, líneas divisorias: un gris claro y cálido que se mimetiza con el pergamino pero que define claramente los bordes. - Ink Charcoal
#292827— Texto principal, encabezados, contornos de iconos: un color cálido, casi negro, con suficiente marrón para que parezca tinta sobre papel, nunca frío #000 - Stone Gray
#666666— Textos secundarios, textos de apoyo, descripciones discretas: un único tono gris medio, utilizado con moderación para que nunca compita con el texto principal.
Tipografía
De 12 a 64 píxeles · 8 pasos
- Super Sans VF — reemplazo: Inter (closest open equivalent for variable weight range) · esquemas 460, 500, 540, 600, 700 · Una sola fuente en todo el sistema. Las variables de Axis abarcan desde 460 (una fuente distintiva, ligeramente recortada para todos los títulos grandes) hasta 540 (texto del cuerpo con énfasis) y 700 (subtítulos pequeños en negrita). Un VF especialmente diseñado hace que los títulos con un grosor de 460 parezcan más intencionados que aleatorios: con un espaciado entre letras ajustado de 48 a 64 píxeles, el efecto de "ligeramente recortado" se percibe como seguro en lugar de delgado.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | denso |
| Paso básico | 8px |
| Radio del botón | 16px |
| Radio de la tarjeta | 16px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 64-96px |
| Ancho de página | 1200px |
La IA construirá tu sitio web al estilo de Superhuman 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
- AI for Business — Sala de exposiciones editoriales de estilo brutalista en tonos grises cálidos.
- Jeton — Un editorial sobre tecnología financiera en mármol cálido
- Airtable — Un seminario acogedor con capítulos marcados en diferentes colores.
- Osmo — El Museo de los Desarrolladores en Hormigón Gris
- Linktr — Los carteles editoriales están apilados como caramelos. El sitio web está diseñado con bloques de color, con titulares de color verde brillante sobre fondos azul cobalto y elementos de navegación blancos en forma de píldora que flotan sobre fondos burdeos.
- Outsource Consultants — Una lámina arquitectónica de gran formato impresa en papel hueso. Una estética monográfica donde una única mancha brillante de índigo interrumpe la cuadrícula, por lo demás cálida y tipográficamente maximalista.
- Streamtime — Tablero de inspiración táctil y creativo - Mesa de scrapbooking de diseño
- Switch-Lit — Cuadrícula editorial impresa con tinta sobre papel color crema.
- HubSpot — Un papel de color crema cálido con un único toque naranja. HubSpot se asemeja a una revista de diseño impresa en papel de alto gramaje: titulares con serifa, páginas de color crema cálido y un único toque naranja intenso que resalta solo los puntos más importantes.
- Granola — Notas de campo sobre papel vitela cálido: Granola se lee como un cuaderno Moleskine muy usado, abierto sobre un escritorio bañado por el sol: los títulos con serifa le dan una sensación de solidez, los acentos verdes orgánicos parecen tinta vegetal y las finas líneas en los márgenes de las tarjetas se asemejan a notas manuscritas.
- Secure — Una conversación en un café europeo a la luz tenue del día es una versión cálida y elegante de las videollamadas, donde los titulares con serifa se leen como un artículo de revista reflexivo en lugar de la página de un producto tecnológico.
- Mockups made easy — Estudio de diseño editorial en papel blanco