Spotify
Sala de control da máquina de discos nocturna
A interface web de Spotify é un centro de control multimedia denso e escuro: unha lona case negra adornada con carátulas vibrantes, un único detalle verde característico e controis en forma de pílula. A tipografía é compacta e utilitaria: un tipo de letra sans-serif xeométrico deseñado a medida e de tamaño pequeno, que permite que a carátula do álbum e as fotos do artista fagan a maior parte do traballo visual. O deseño é unha cuncha fixa de dúas columnas (barra lateral + feed principal) cunha grella de carátulas cadradas do álbum e avatares redondos, creando unha alternancia rítmica de tipos xeométricos. A interface evita cambios bruscos de altura, baseándose en distincións superficiais sutís (tarxetas #121212 nunha lona #000000) e un único banner degradado grande para a enerxía. O resultado é a sensación dunha cabina de DJ: densa en información, acusticamente escura e lista para reproducir dunha ollada.
Un deseño fixo de dúas columnas presenta unha barra lateral esquerda ("A túa biblioteca") e unha área de contido principal adaptable. A barra superior é unha barra negra de ancho completo coa busca á esquerda e as accións da conta á dereita. O contido principal desprázase verticalmente, con carruseis horizontais de tarxetas: cancións populares nunha grella cadrada de 5 columnas, artistas populares nunha grella circular de 5 columnas e álbums/sinxelos populares que continúan este patrón. O espazado entre as seccións é compacto (32 cm). O banner publicitario inferior está ancorado na parte inferior da ventá gráfica. A navegación faise exclusivamente a través da barra superior e da barra lateral, sen megamenús nin rutas de navegación. O ritmo alterna: tarxetas cadradas → tarxetas redondas → tarxetas cadradas, creando un contraste xeométrico entre as seccións.
As portadas dos álbums e as fotos dos artistas son o contido visual principal. As portadas preséntanse como densos fragmentos cadrados (relación de aspecto 1:1) cun radio de 6 px, o suficientemente nítidos como para parecer editorial pero o suficientemente suaves como para ser contemporáneas. As fotos dos artistas son fragmentos redondos que enfatizan o rostro como identificador. A interface principal está libre de fotos decorativas, imaxes de estilo de vida ou gráficos abstractos. O único elemento visual non fotográfico é un banner degradado de púrpura a azul na parte inferior, que serve como único elemento da cor da marca. As iconas son minimalistas, monolineais, brancas sobre un fondo escuro; pequenas e funcionais, nunca decorativas.
Paleta
Marca
- Spotify Green
#1ed760— O verde úsase como acento secundario para detalles decorativos e para destacar consultas de busca menos utilizadas. Non se debe usar como cor principal para chamadas á acción.
Neutro
- Pure White
#ffffff— Unha superficie de apoio lixeira para crear un fondo discreto e separar seccións. Non se debe usar como cor principal para a chamada á acción. - Signal Red
#b85850— O vermello serve como complemento para detalles decorativos e para resaltar cores pouco comúns. Úsao como complemento, non como cor de status. - Void Black
#000000— Lenzo da páxina, fondo de navegación superior, capa superficial máis profunda - Carbon
#121212— Superficies de cartón, paneis laterais, capa superficial secundaria sobre lenzo - Graphite
#1f1f1f— Superficie elevada: estados de paso do cursor, campos de entrada, elementos de navegación seleccionados. - Smoke
#292929— Fondo de navegación activo, lixeiro efecto de retroiluminación.
Tipografía
de 11 a 24 px · 4 pasos
- SpotifyMixUI — substitución: Inter · contornos 400, 600, 700 · Corpo do texto, navegación, botóns, metadatos, pequenas lendas: un deseño compacto e rico en información deseñado para ser sutil, permitindo que os elementos artísticos dominen.
- SpotifyMixUITitle — substitución: Inter weight 700 · contornos 700 · Títulos de sección ("Cancións populares", "Artistas populares"): unha fonte en negra e de tamaño moderado fai que os títulos destaquen sen sobrecargar a grella da tarxeta.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Paso básico | 8-12px |
| Radio do botón | 9999px |
| Radio da tarxeta | 6px |
| Sombras | mínimo |
| Entre seccións | 32-48px |
A IA creará o teu sitio web ao estilo de Spotify 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
- Resend — terciopelo negro con cor neón púrpura
- Neon — Unha sala de servidores despois do anoitecer. Escuridade pura, onde a única luz provén dos datos e das interaccións dos usuarios.
- Discord — O mundo do xogo está agochado detrás dunha xanela de chat emerxente: cada sección é un ambiente independente coa súa propia iluminación e conxunto de personaxes.
- Idle Finance — O chan de negociacións de neón das terminais de augas profundas é unha terminal naval escura onde unha única luz azul perfora a escuridade.
- Midjourney — Un terminal bioluminescente nas profundidades do océano. Un mundo das profundidades mariñas onde a intelixencia se xera visualmente en fluxos ASCII e os controis aparecen como patróns lixeiramente brillantes.
- Netflix — Estante dixital infinito. Unha experiencia cinematográfica onde se presenta unha biblioteca infinita de contidos cun pano de fondo teatral e escuro como a boca de canón.
- Wope — Wope é unha interface de horizonte púrpura. Imaxina unha mesa de observatorio escura cunha luz púrpura que irradia desde debaixo do vidro.
- basement — Unha imprenta baleira ás 3 da mañá: fontes enormes e comprimidas estendéndose pola escuridade total, un único raio de luz laranxa na barra de navegación e todo o demais branco ou gris fantasmal.
- Ori — A sala de servidores á medianoite é un baleiro escuro, luz branca, un interruptor aceso.
- Amaterasu — Santuario Turquesa Celestial
- Stink Studios — Un estudio de cine á medianoite: o proxector zumba, a sala está escura, só a película está iluminada.
- Obsidian — Un repositorio de coñecemento cristalino. Un espazo dixital claro e multifacético deseñado para a claridade e a concentración, con veas moradas luminosas de interacción.