Superhuman
painel editorial da hora dourada
Superhuman transita entre a fotografia editorial e a interface de usuário de software — uma tela quente, semelhante a pergaminho (nunca totalmente branca), emoldura elementos de marca em tom bordô e vibrantes detalhes em roxo. Os títulos, em fonte 460, sussurram em vez de gritar, permitindo que a fotografia cinematográfica em página inteira assuma o protagonismo, enquanto cartões translúcidos da interface do produto flutuam como vidro sobre as imagens. A paleta permanece calma e editorial na maior parte do tempo: superfícies creme, texto em tom carvão, bordas sutis em cinza-quente e espaçamento generoso entre os elementos, com a cor reservada para a pontuação deliberada da marca — uma única chamada para ação em bordô, links roxos e um botão de complemento em lilás claro. O sistema evita deliberadamente sombras e gradientes fortes nas superfícies da interface; a profundidade é alcançada por meio de fotografias em camadas e um sutil desfoque de fundo no título, em vez de um efeito de sobreposição.
O elemento principal é uma fotografia em tela cheia com um título centralizado (48-64px/460) e uma única chamada para ação preenchida com uma imagem de vinho, com cartões de interface do usuário de produtos translúcidos flutuantes sobrepostos nas bordas esquerda e direita. Abaixo do elemento principal, há uma faixa branca com o logotipo (6 células por linha, largura máxima limitada), seguida por uma seção de abas com cartões brancos sobre fundo pergaminho. Uma faixa turquesa escura quebra o ritmo a cerca de dois terços da página — em tela cheia, duas colunas (imagem à esquerda, texto à direita) — criando o único contraste tonal à medida que o usuário rola a página. Em seguida, uma faixa atmosférica com gradiente. O espaçamento vertical entre as seções é de 64-96px. A largura máxima do conteúdo é de aproximadamente 1200px centralizada, com o elemento principal e a faixa escura ocupando toda a largura da área visível. A navegação consiste em um único cabeçalho fixo com fundo desfocado; sem barra lateral, sem mega menu. O rodapé é uma página inteira em tom bordô com um layout de links em várias colunas. O ritmo geral é: quadro principal → conteúdo em branco/creme suave → faixa escura com a imagem principal → gradiente atmosférico → rodapé bordô, alternando faixas claras e escuras para criar um ritmo editorial.
O principal elemento visual é a fotografia cinematográfica: um retrato em tela cheia contra um céu aberto serve como ponto focal, com uma segunda faixa atmosférica posicionada mais abaixo na página. A imagem tem tons quentes, sutilmente atenuados e foi fotografada de perfil, remetendo à hora dourada, criando uma sensação mais editorial do que corporativa. Uma faixa escura com retângulos geométricos translúcidos e inscrições manuscritas é sobreposta à fotografia de um homem absorto em pensamentos — uma colagem de superfícies em vez de uma única imagem. A interface do usuário é apresentada como cartões de vidro flutuantes sobrepostos diretamente à fotografia, em vez de capturas de tela separadas. Não há ilustrações genéricas, renderizações 3D ou formas decorativas abstratas, com exceção da faixa atmosférica com gradiente. Os ícones são minimalistas, monocromáticos, com cerca de 16 a 20 pixels de largura, com uma largura única correspondente à espessura do texto de 460 pontos.
Paleta
Marca
- Midnight Wine
#421d24— Os botões de ação principais, o banner publicitário e o rodapé apresentam um tom quente de vinho, quase preto, que lembra mais tinta do que vermelho, ancorando a paleta de cores sem ser excessivo. - Royal Violet
#714cb6— A cor roxa é usada para destacar links, tags e frases curtas. Não deve ser usada como cor principal para chamadas à ação.
Neutro
- Lilac Mist
#d4c7ff— O preenchimento da superfície secundária, os ícones claros e os fundos dos botões fantasmas apresentam uma tonalidade roxa suave que remete ao estilo da marca sem chamar atenção excessiva para si. - Deep Lagoon
#0c4243— O fundo escuro da tira, usado como principal elemento narrativo, é a única superfície escura no sistema, combinado com um padrão geométrico sobreposto. - Warm Parchment
#f2f0eb— A superfície de trabalho da página é o elemento dominante; um tom creme quente substitui o branco como base, conferindo a todo o sistema um toque editorial acolhedor. - Soft Mist
#e3e3e2— Bordas delicadas, contornos de cartões, linhas divisórias — um cinza claro e quente que se mistura com o pergaminho, mas define claramente as bordas. - Ink Charcoal
#292827— Corpo do texto, títulos, contornos de ícones - uma cor quente, quase preta, com marrom suficiente para lembrar tinta no papel, nunca fria #000 - Stone Gray
#666666— Texto secundário, textos de apoio, descrições discretas — uma única cor cinza média, usada com parcimônia para nunca competir com o texto principal.
Tipografia
de 12 a 64px · 8 etapas
- Super Sans VF — substituição: Inter (closest open equivalent for variable weight range) · esboços 460, 500, 540, 600, 700 · Uma única fonte em todo o sistema. As variáveis do eixo abrangem a faixa de 460 (uma fonte característica, ligeiramente cortada, para todos os títulos grandes) a 540 (texto corrido com ênfase) e 700 (legendas pequenas e em negrito). Um VF especialmente projetado faz com que os títulos com peso 460 pareçam mais intencionais do que aleatórios — com 48-64px e espaçamento entre letras reduzido, o efeito "ligeiramente cortado" é percebido como confiante, em vez de frágil.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Passo básico | 8px |
| Raio do botão | 16px |
| Raio do cartão | 16px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 64-96px |
| Largura da página | 1200px |
A IA criará seu site no estilo Superhuman e o preencherá.
- Compartilhe produtos e publicações através dos links - Instagram, TikTok, Facebook.
- Transfira o conteúdo do seu site antigo — basta especificar o endereço.
- Design moderno na melhor engine: React ( Next.js) com renderização no servidor e otimização de SEO integradas.
- Otimização de SEO totalmente automatizada para resultados de pesquisa e recomendações de redes neurais.
Estilos semelhantes
- AI for Business — Showroom editorial brutalista em tons de cinza quente.
- Jeton — Um editorial sobre fintech no Warm Marble.
- Airtable — Um seminário acolhedor com capítulos identificados por cores diferentes.
- Osmo — O Museu dos Incorporadores sobre Concreto Cinza
- Linktr — Os pôsteres editoriais estão empilhados como doces. O site foi projetado em blocos de cores, com títulos em verde vibrante sobre um fundo azul-cobalto e elementos de navegação brancos em formato de pílula flutuando sobre campos em tom bordô.
- Outsource Consultants — Uma folha arquitetônica de grande formato em papel cor osso. Uma estética monográfica, onde uma única mancha brilhante de índigo interrompe a grade tipograficamente maximalista e de tons quentes.
- Streamtime — Painel de inspiração tátil e criativa - Mesa de scrapbooking para designers
- Switch-Lit — Grade editorial impressa a tinta sobre papel creme.
- HubSpot — Um tom creme quente com um único detalhe em laranja. O HubSpot lembra uma revista de design impressa em papel de alta gramatura — títulos com serifa, páginas em tons creme quentes e um único detalhe em laranja vibrante destacando apenas os pontos mais importantes.
- Granola — Anotações de campo em pergaminho de cor quente — Granola lembra um caderno Moleskine bem usado, aberto sobre uma mesa ensolarada: os títulos com serifa conferem uma sensação de solidez, os detalhes em verde orgânico remetem à tinta vegetal, e as linhas finas nas margens dos cartões lembram anotações manuscritas.
- Secure — Uma conversa em um café europeu sob uma luz suave é uma versão acolhedora e elegante de uma chamada de vídeo, onde títulos com fontes serifadas se assemelham mais a um artigo de revista sofisticado do que a uma página de produto tecnológico.
- Mockups made easy — Estúdio de design editorial em papel branco