Spotify
Sala de controle da jukebox noturna
A interface web do Spotify é um centro de controle de mídia denso e escuro: uma tela quase preta adornada com capas de álbuns vibrantes, um único detalhe verde característico e controles em formato de pílula. A tipografia é compacta e utilitária — uma fonte geométrica sem serifa personalizada em tamanho pequeno, permitindo que as capas dos álbuns e as fotos dos artistas contribuam com a maior parte do trabalho visual. O layout é uma estrutura fixa de duas colunas (barra lateral + feed principal) com uma grade de capas de álbuns quadradas e avatares redondos, criando uma alternância rítmica de tipos geométricos. A interface evita mudanças bruscas de altura, confiando em distinções sutis de superfície (cartões #121212 em uma tela #000000) e um único banner grande com gradiente para dar energia. O resultado é uma sensação de cabine de DJ: densa em informações, acusticamente escura e pronta para tocar num relance.
O layout fixo de duas colunas apresenta uma barra lateral à esquerda ("Sua Biblioteca") e uma área de conteúdo principal responsiva. A barra superior é uma barra preta de largura total com a busca à esquerda e as ações da conta à direita. O conteúdo principal rola verticalmente, com carrosséis horizontais de cards — músicas populares em uma grade quadrada de 5 colunas, artistas populares em uma grade circular de 5 colunas e álbuns/singles populares seguindo esse padrão. O espaçamento entre as seções é compacto (32 cm). O banner de anúncios inferior está ancorado na parte inferior da tela. A navegação é feita exclusivamente pela barra superior e pela barra lateral — sem megamenus ou trilha de navegação. O ritmo alterna: cards quadrados → cards redondos → cards quadrados, criando um contraste geométrico entre as seções.
As capas dos álbuns e as fotos dos artistas são o principal conteúdo visual. As capas são apresentadas como fragmentos quadrados densos (proporção 1:1) com raio de 6px — nítidos o suficiente para parecerem editoriais, mas suaves o bastante para serem contemporâneos. As fotos dos artistas são fragmentos redondos, enfatizando o rosto como elemento identificador. A interface principal é livre de fotos decorativas, imagens de estilo de vida ou gráficos abstratos. O único elemento visual não fotográfico é uma faixa com gradiente de roxo para azul na parte inferior, que serve como o único elemento da cor da marca. Os ícones são minimalistas, monolíneos, brancos sobre fundo escuro — pequenos e funcionais, nunca decorativos.
Paleta
Marca
- Spotify Green
#1ed760— O verde é usado como cor secundária para detalhes decorativos e para destacar termos de pesquisa menos frequentes. Não deve ser usado como cor principal para chamadas à ação.
Neutro
- Pure White
#ffffff— Uma superfície de apoio leve para criar um fundo discreto e separar seções. Não deve ser usada como cor principal para a chamada à ação. - Signal Red
#b85850— O vermelho serve como um toque de cor complementar para detalhes decorativos e para realçar cores incomuns. Use-o como um toque de cor complementar, não como uma cor de status. - Void Black
#000000— Tela da página, fundo da navegação superior, camada superficial mais profunda - Carbon
#121212— Superfícies de papelão, painéis laterais, camada de superfície secundária sobre a tela - Graphite
#1f1f1f— Superfície elevada - estados de foco, campos de entrada, elementos de navegação selecionados. - Smoke
#292929— Fundo de navegação ativo, com leve efeito de contraluz.
Tipografia
de 11 a 24px · 4 etapas
- SpotifyMixUI — substituição: Inter · esboços 400, 600, 700 · Texto principal, navegação, botões, metadados, legendas curtas — um design compacto e rico em informações, concebido para ser discreto, permitindo que os elementos artísticos se destaquem.
- SpotifyMixUITitle — substituição: Inter weight 700 · esboços 700 · Títulos das seções ("Músicas Populares", "Artistas Populares") - uma fonte em negrito e de tamanho moderado faz com que os títulos se destaquem sem sobrecarregar a grade do cartão.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Passo básico | 8-12px |
| Raio do botão | 9999px |
| Raio do cartão | 6px |
| Sombras | mínimo |
| Entre seções | 32-48px |
A IA criará seu site no estilo Spotify 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
- Resend — veludo preto com detalhes em roxo neon
- Neon — Uma sala de servidores após o anoitecer. Escuridão total, onde a única luz vem dos dados e das interações dos usuários.
- Discord — O mundo do jogo está oculto atrás de uma janela de bate-papo pop-up — cada seção é um ambiente independente com sua própria iluminação e conjunto de personagens.
- Idle Finance — O pregão de néon dos terminais submarinos é um terminal naval escuro, onde uma única luz azul atravessa a penumbra.
- Midjourney — Um terminal bioluminescente nas profundezas do oceano. Um mundo submarino onde a inteligência se gera visualmente em fluxos ASCII, e os controles aparecem como padrões levemente brilhantes.
- Netflix — Prateleira Digital Infinita. Uma experiência cinematográfica onde uma biblioteca infinita de conteúdo é apresentada em um cenário teatral completamente escuro.
- Wope — Wope é uma interface de horizonte púrpura. Imagine uma mesa de observatório escura com uma luz púrpura brilhando por baixo do vidro.
- basement — Uma impressora vazia às 3 da manhã – fontes enormes e comprimidas espalhadas pela escuridão total, um único brilho de luz laranja na barra de navegação, todo o resto branco ou cinza fantasmagórico.
- Ori — A sala de servidores à meia-noite é um vazio negro, com uma luz branca e apenas um interruptor aceso.
- Amaterasu — Santuário Celestial Turquesa
- Stink Studios — Um estúdio de cinema à meia-noite - o projetor zumbindo, a sala escura, apenas o filme iluminado.
- Obsidian — Um repositório de conhecimento cristalino. Um espaço digital claro e multifacetado, projetado para clareza e foco, com veias luminosas de interação em tom púrpura.