Superlist
Um espaço de trabalho noturno com brasas cor de coral — uma superfície de aplicativo berinjela discreta onde uma única faísca laranja quente sinaliza cada ação.
Superlist utiliza uma linguagem de produtividade em tons de roxo meia-noite: berinjela profunda, coral quente como única cor primária e títulos grandes em fonte sem serifa que capturam toda a atmosfera. A interface evoca a sensação de trabalho concentrado até altas horas da noite — silencioso, organizado e confiante, com a cor usada apenas como pontuação funcional em chamadas à ação, estados ativos e pontos-chave. As superfícies são sobrepostas em tons escuros sutis com um subtom roxo (#181824 → #26253b), evitando o preto puro para garantir que a profundidade pareça acolhedora em vez de estéril. Os componentes apresentam formas arredondadas generosas (cards de 20px, botões em formato de pílula), sombras suaves e "respiram" através de espaçamentos confortáveis de 10 a 16px, em vez de grades apertadas. A voz do título é tudo: uma fonte de 600 pontos em 70-88px com espaçamento entre letras estreito de -0,02em trata o texto como tipográfico em vez de interface do usuário — está mais próximo de um texto editorial do que de um SaaS.
Seções escuras ocupam toda a largura da página, com contêineres de conteúdo centralizados e de largura máxima. A seção principal é centralizada verticalmente e contém um título, um subtítulo e uma chamada para ação (CTA), seguida por uma grande captura de tela do produto que se sobrepõe à seção seguinte. As seções subsequentes alternam entre blocos de texto centralizados e grades de cartões. A seção de avaliações utiliza uma grade de três colunas com cartões de avaliação e espaçamento de 16 polegadas entre as colunas. A navegação consiste em uma única barra superior com um logotipo à esquerda, links centralizados e ações de login à direita — sem barra lateral fixa ou megamenu. O espaçamento entre as seções é amplo (16 polegadas), criando um ritmo editorial espaçoso em vez de uma grade de produtos densa.
O espaço visual é dominado por capturas de tela do produto — uma grande moldura com cantos arredondados, exibindo a interface real do aplicativo, preenche as seções principal e secundária. As fotos são mínimas, usadas apenas como avatares de usuário ou prévias de mídias dentro do aplicativo (por exemplo, a imagem do show no painel direito da maquete do produto). Os logotipos na barra de confiança são símbolos de texto brancos e discretos. Não há ilustrações decorativas, gráficos abstratos ou renderizações 3D. A estratégia visual é exibir o produto em escala, deixar a tipografia fazer o trabalho emocional e usar o coral como única cor de destaque.
Paleta
Marca
- Coral Ember
#ff4a36— A cor laranja é usada como um toque secundário em detalhes decorativos e para destacar elementos que não são tão frequentes. Não deve ser usada como cor principal para chamadas à ação.
Neutro
- Aubergine Canvas
#181824— O fundo da página, a tela principal, é um tom escuro e quente que substitui o preto puro, fazendo com que a interface do usuário pareça em camadas em vez de plana. - Elevated Plum
#26253b— Superfícies de cartões, campos de entrada, contêineres de navegação — um passo mais fácil do que com o canvas para criar profundidade sem uma borda visível. - Pure White
#ffffff— Títulos principais, texto dos botões e contornos dos ícones — máximo contraste em um fundo escuro. - Fog Text
#696f81— O texto principal, os títulos secundários e as margens discretas apresentam uma relação de contraste de 7:1 para uma leitura confortável sobre um fundo cor de berinjela. - Ash Text
#8e8da0— É possível usar uma cor neutra para elementos secundários da interface do usuário, divisores e rótulos com cores suaves. Ela não deve ser usada como cor principal para chamadas à ação. - Mist Highlight
#a3a3a7— Bordas sutis, divisores e elementos de navegação inativos criam um tom neutro discreto que, ainda assim, se destaca na tela.
Tipografia
de 12 a 88px · 9 etapas
- sans-serif — substituição: Inter · esboços 400 · sans-serif - encontrada nos dados extraídos, mas não descrita pela IA.
- Haffer XH SemiBold — substituição: Inter Tight · esboços 400, 600 · A fonte principal para exibição e títulos. Ela é usada em um tamanho de 70 a 88 pixels para títulos principais, com espaçamento entre letras de -0,02em e peso 600. O espaçamento estreito entre letras e a altura grande das letras conferem aos títulos um aspecto editorial, fazendo com que a interface escura pareça mais uma capa de revista do que um painel de controle. Substitua por Inter Tight ou General Sans em negrito.
- Jersey 10 — substituição: Anybody · esboços 400 · Uma fonte grande e decorativa para números e destaques. Usada com moderação em tamanhos muito grandes para criar efeitos tipográficos diferenciados. Pode ser substituída por Anybody ou Cabinet Grotesk.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | média |
| Passo básico | 10-16px |
| Raio do botão | 100px |
| Raio do cartão | 20px |
| Sombras | sombras suaves |
| Entre seções | 80px |
| Largura da página | 1200px |
A IA criará seu site no estilo Superlist 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
- DNA — O Observatório da Meia-Noite visto através de uma lente de partículas.
- Abetterlou — Sparks on Saddle Leather - uma fonte cremosa e aconchegante que brilha contra um fundo preto-café profundo, com botões em tom âmbar-dourado que dão a sensação de metal quente pressionado contra a página.
- Galileo-ft — Uma sala de comando no espaço profundo com sinais azul-elétricos.
- Decide AI — Observatório à meia-noite - sinal da casa da moeda
- Redis Agency — A oficina editorial, aberta após o expediente, é um lugar completamente escuro onde todo o trabalho de identidade visual é feito com fontes serifadas e um único rabanete vermelho.
- Spellbook — Uma sala de tribunal à meia-noite, iluminada com tinta coral — uma superfície editorial escura onde o único som é o traço quente e alaranjado da caneta.
- Linear — instrumento de precisão da meia-noite
- Origin Financial — Uma galeria noturna de opulência discreta. Uma sala silenciosa, quase escura, onde grandes fontes serifadas e alguns painéis coloridos iluminados criam a sensação de que as finanças são uma obra de arte cuidadosamente selecionada.
- Hyperstudio — O desenho está gravado em obsidiana. Texto e linhas finas emolduram um espaço branco de preto puro, com ocasionais marcas douradas de bússola indicando o caminho.
- Air — escultura "Céu da Meia-Noite Através do Vidro"
- Raycast — Centro de Comando da Meia-Noite, Neon Coral
- dope.security — Terminal noturno com sinalizadores roxos