Superhuman
panel editorial da hora dourada
Superhuman sitúase na intersección da fotografía editorial e a interface de usuario de software: unha lona cálida, semellante a un pergamiño (nunca branca pura), enmarca elementos de marca granate e vibrantes detalles morados. Os titulares, en letra 460, susurran en vez de berrar, o que permite que a fotografía cinematográfica de páxina enteira faga o traballo pesado, mentres que as tarxetas translúcidas da interface de usuario dos produtos flotan como vidro sobre as imaxes. A paleta permanece tranquila e editorial a maior parte do tempo: superficies crema, texto carbón, sutís bordos grises cálidos e un espazo xeneroso entre os elementos, coa cor reservada para a puntuación deliberada da marca: unha única chamada á acción granate, ligazóns moradas e un botón adicional lila claro. O sistema evita deliberadamente as sombras e os degradados fortes nas superficies da interface de usuario; a profundidade conséguese mediante fotografía en capas e un sutil desenfoque de fondo no título, en lugar de mediante un efecto de apilamento.
O elemento principal é unha fotografía de ancho completo cun título centrado (48-64 px/460) e unha única chamada á acción chea dunha imaxe de viño, con tarxetas de interface de usuario de produto translúcidas flotantes superpostas nos bordos esquerdo e dereito. Debaixo do elemento principal hai unha tira branca co logotipo (6 celas por fila, ancho máximo limitado) e despois unha sección de lapelas con superficies de cartolina branca sobre lenzo de pergamiño. Unha tira turquesa escura rompe o ritmo aproximadamente a dous terzos da páxina (ancho completo, dúas columnas (imaxe á esquerda, texto á dereita), creando o único contraste tonal ao desprazarse. A continuación, unha tira atmosférica degradada. O espazado vertical entre as seccións é de 64-96 px. O ancho máximo do contido é de aproximadamente 1200 px centrado, co elemento principal e a tira escura abarcando todo o ancho da ventá gráfica. A navegación é unha única cabeceira fixa cun fondo borgoña; sen barra lateral nin megamenú. O pé de páxina é unha páxina cor borgoña de ancho completo cun deseño de ligazóns en varias columnas. O ritmo xeral é: fotograma principal → contido branco/crema tranquilo → raia escura coa imaxe principal → degradado atmosférico → pé de páxina cor borgoña, alternando raias claras e escuras para crear un tempo editorial.
O elemento visual principal é a fotografía cinematográfica: un retrato a ancho completo contra un ceo aberto serve como punto focal, cunha segunda franxa atmosférica situada máis abaixo na páxina. A imaxe ten tons cálidos, é sutilmente atenuada e está tomada de perfil, lembrando unha hora dourada, creando un aire máis editorial que corporativo. Unha franxa escura con rectángulos xeométricos translúcidos e inscricións manuscritas superpóñese sobre unha fotografía dun home perdido nos seus pensamentos: unha colaxe de superficies en lugar dunha única imaxe. A interface de usuario preséntase como tarxetas de vidro flotantes superpostas directamente sobre a fotografía, en lugar de como capturas de pantalla separadas. Non hai ilustracións de stock, nin renderizacións 3D nin formas decorativas abstractas, agás a franxa atmosférica degradada. As iconas son iconas de liña monocromática minimalistas, de ~16-20 px de ancho, cun ancho único correspondente ao grosor do texto de 460 puntos.
Paleta
Marca
- Midnight Wine
#421d24— Os botóns de acción principais, o anuncio de banner e o pé de páxina son dun borgoña cálido, case negro, que parece máis tinta que vermello, ancorando a paleta de cores sen ser abafador. - Royal Violet
#714cb6— O morado úsase para destacar ligazóns, etiquetas e frases curtas. Non se debe usar como cor principal para as chamadas á acción.
Neutro
- Lilac Mist
#d4c7ff— O recheo da superficie secundaria, as iconas de luz e os fondos dos botóns pantasma presentan unha cor púrpura apagada que alude ao estilo da marca sen chamar a atención indebidamente sobre si mesma. - Deep Lagoon
#0c4243— O fondo escuro da tira, empregado como elemento narrativo principal, é a única superficie escura do sistema, combinada cun patrón xeométrico superposto. - Warm Parchment
#f2f0eb— A superficie de traballo da páxina é o elemento dominante; unha cor crema cálida substitúe o branco como base, dándolle a todo o sistema unha calidez editorial. - Soft Mist
#e3e3e2— Bordes finos, contornos de cartolina, liñas divisorias: un gris cálido e claro que se mestura co pergamiño pero define claramente os bordos. - Ink Charcoal
#292827— Corpo de texto, títulos, contornos de iconas: unha cor cálida, case negra, con suficiente marrón para parecer tinta sobre papel, nunca fría #000 - Stone Gray
#666666— Texto secundario, textos de apoio, descricións discretas: un único gris medio, usado con moderación para non competir nunca co texto principal.
Tipografía
de 12 a 64 px · 8 pasos
- Super Sans VF — substitución: Inter (closest open equivalent for variable weight range) · contornos 460, 500, 540, 600, 700 · Unha única fonte en todo o sistema. As variables de eixo abarcan o rango de 460 (unha fonte de sinatura lixeiramente recortada para todo o texto de títulos grandes) a 540 (texto do corpo enfatizado) e 700 (léndas pequenas e en negra). Un VF especialmente deseñado fai que os títulos de peso 460 parezan máis deliberados que aleatorios: con 48-64 px e espazo entre letras axustado, o efecto "lixeiramente recortado" percíbese como seguro en lugar de escaso.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Paso básico | 8px |
| Radio do botón | 16px |
| Radio da tarxeta | 16px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 64-96px |
| Largura da páxina | 1200px |
A IA creará o teu sitio web ao estilo de Superhuman 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
- AI for Business — Sala de exposicións editorial brutalista en tons grises cálidos
- Jeton — Un editorial sobre tecnoloxía financeira en mármore cálido
- Airtable — Un seminario acolledor con capítulos marcados en diferentes cores
- Osmo — O Museo dos Desenvolvedores sobre Formigón Gris
- Linktr — Os carteis editoriais están apilados coma doces. O sitio web está deseñado en bloques de cores, con titulares verdes brillantes contra paredes azul cobalto e elementos de navegación brancos con forma de pílula flotando sobre campos borgoña.
- Outsource Consultants — Unha folla arquitectónica de gran formato sobre papel de óso. Unha estética monográfica, onde unha única mancha brillante de índigo interrompe a cuadrícula, doutro xeito cálida e tipograficamente maximalista.
- Streamtime — Taboleiro de inspiración creativo táctil - Mesa de deseño para scrapbooking
- Switch-Lit — Grella editorial impresa en tinta sobre papel crema
- HubSpot — Unha cor de papel crema cálida cun único toque laranxa. HubSpot parécese a unha revista de deseñador impresa en papel de grosor: titulares con serifas, páxinas crema cálidas e un único toque laranxa intenso que destaca só os puntos máis importantes.
- Granola — Notas de campo sobre pergamiño cálido: a granola lese como un caderno Moleskine gastado aberto nun escritorio iluminado polo sol: os títulos con serifas dan unha sensación de solidez, os detalles verdes orgánicos como a tinta vexetal e as liñas finas nas marxes das tarxetas semellan notas manuscritas.
- Secure — Unha conversa nunha cafetería europea á luz do día é unha versión cálida e elegante das videochamadas, onde os titulares con serifas parecen un artigo de revista reflexivo en lugar da páxina dun produto tecnolóxico.
- Mockups made easy — Estudio de deseño editorial en papel branco