Spotify
Sala de control de la máquina de discos nocturna
La interfaz web de Spotify es un centro de control multimedia denso y oscuro: un lienzo casi negro adornado con vibrantes portadas de álbumes, un único acento verde distintivo y controles en forma de píldora. La tipografía es compacta y funcional: una fuente geométrica sans-serif de diseño personalizado en un tamaño pequeño, que permite que las portadas de los álbumes y las fotos de los artistas sean las protagonistas visuales. El diseño es una estructura fija de dos columnas (barra lateral + feed principal) con una cuadrícula de portadas de álbumes cuadradas y avatares redondos, creando una alternancia rítmica de tipos geométricos. La interfaz evita cambios bruscos de altura, recurriendo a sutiles distinciones de superficie (tarjetas #121212 sobre un lienzo #000000) y un único banner degradado de gran tamaño para dar dinamismo. El resultado es una sensación similar a la de una cabina de DJ: densa en información, acústicamente oscura y lista para reproducir con solo un vistazo.
Un diseño fijo de dos columnas presenta una barra lateral izquierda ("Tu biblioteca") y un área de contenido principal adaptable. La barra superior es una barra negra de ancho completo con la búsqueda a la izquierda y las acciones de la cuenta a la derecha. El contenido principal se desplaza verticalmente, con carruseles horizontales de tarjetas: canciones populares en una cuadrícula cuadrada de 5 columnas, artistas populares en una cuadrícula circular de 5 columnas y álbumes/sencillos populares que siguen este patrón. El espaciado entre secciones es compacto (32 cm). El banner publicitario inferior está anclado en la parte inferior de la ventana gráfica. La navegación se realiza exclusivamente a través de la barra superior y la barra lateral; no hay megamenús ni migas de pan. El ritmo alterna: tarjetas cuadradas → tarjetas redondas → tarjetas cuadradas, creando un contraste geométrico entre las secciones.
Las portadas de los álbumes y las fotos de los artistas constituyen el contenido visual principal. Las portadas se presentan como densos fragmentos cuadrados (relación de aspecto 1:1) con un radio de 6 píxeles, lo suficientemente nítidos para un estilo editorial pero a la vez lo suficientemente suaves para un estilo contemporáneo. Las fotos de los artistas son fragmentos redondos, que enfatizan el rostro como elemento de identificación. La interfaz principal carece de fotos decorativas, imágenes de estilo de vida o gráficos abstractos. El único elemento visual no fotográfico es un banner con degradado de púrpura a azul en la parte inferior, que sirve como único elemento del color de la marca. Los iconos son minimalistas, monolineales, blancos sobre fondo oscuro: pequeños y funcionales, nunca decorativos.
Paleta
Marca
- Spotify Green
#1ed760— El verde se utiliza como color de acento secundario para detalles decorativos y para resaltar las consultas de búsqueda menos frecuentes. No debe utilizarse como color principal para las llamadas a la acción.
Neutral
- Pure White
#ffffff— Una superficie de soporte ligera para crear un fondo discreto y separar secciones. No debe usarse como color principal para la llamada a la acción. - Signal Red
#b85850— El rojo sirve como acento de apoyo para detalles decorativos y para resaltar colores poco comunes. Úselo como acento de apoyo, no como color de estatus. - Void Black
#000000— Lienzo de página, fondo de navegación superior, capa superficial más profunda - Carbon
#121212— Superficies de cartón, paneles laterales, capa superficial secundaria sobre lienzo. - Graphite
#1f1f1f— Superficie elevada: estados al pasar el cursor, campos de entrada, elementos de navegación seleccionados. - Smoke
#292929— Fondo de navegación activo, ligero efecto de retroiluminación.
Tipografía
de 11 a 24 píxeles · 4 pasos
- SpotifyMixUI — reemplazo: Inter · esquemas 400, 600, 700 · Texto principal, navegación, botones, metadatos, subtítulos pequeños: un diseño compacto y rico en información, concebido para ser sutil y permitir que la obra de arte sea la protagonista.
- SpotifyMixUITitle — reemplazo: Inter weight 700 · esquemas 700 · Los encabezados de sección ("Canciones populares", "Artistas populares") utilizan una fuente en negrita de tamaño moderado que hace que los encabezados destaquen sin sobrecargar la cuadrícula de tarjetas.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | denso |
| Paso básico | 8-12px |
| Radio del botón | 9999px |
| Radio de la tarjeta | 6px |
| Oscuridad | mínimo |
| Entre secciones | 32-48px |
La IA construirá tu sitio web al estilo de Spotify y lo rellenará.
- Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
- Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
- Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
- Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.
Estilos similares
- Resend — terciopelo negro con color neón morado
- Neon — Una sala de servidores al anochecer. Oscuridad absoluta, donde la única luz proviene de los datos y las interacciones de los usuarios.
- Discord — El mundo del juego está oculto tras una ventana de chat emergente; cada sección es un entorno independiente con su propia iluminación y conjunto de personajes.
- Idle Finance — La sala de operaciones iluminada con luces de neón de las terminales de aguas profundas es una oscura terminal naval donde una única luz azul atraviesa la penumbra.
- Midjourney — Una terminal bioluminiscente en las profundidades del océano. Un mundo submarino donde la inteligencia se genera visualmente mediante secuencias ASCII, y los controles aparecen como patrones que emiten un brillo tenue.
- Netflix — Estantería Digital Infinita. Una experiencia cinematográfica donde una biblioteca interminable de contenido se presenta sobre un fondo teatral completamente negro.
- Wope — Wope es una interfaz de horizonte púrpura. Imagina una mesa de observatorio oscura con una luz púrpura que emana desde debajo del cristal.
- basement — Una imprenta vacía a las 3 de la madrugada: fuentes enormes y comprimidas que se extienden sobre la oscuridad absoluta, un único destello de luz naranja en la barra de navegación, todo lo demás blanco o gris fantasmal.
- Ori — La sala de servidores a medianoche es un vacío negro, una luz blanca, un solo interruptor encendido.
- Amaterasu — Santuario Celestial Turquesa
- Stink Studios — Un estudio de cine a medianoche: el proyector zumba, la sala está oscura, solo la película está iluminada.
- Obsidian — Un repositorio de conocimiento cristalino. Un espacio digital claro y multifacético diseñado para la claridad y la concentración, con luminosas vetas púrpuras de interacción.