Spotify
Kontrollrum för nattjukebox
Spotifys webbgränssnitt är ett tätt, mörkt kontrollcenter för media: en nästan svart duk prydd med livfull albumomslag, en enda grön accent och pillerformade kontroller. Typografin är kompakt och funktionell – ett specialdesignat geometriskt sans-serif-typsnitt i liten storlek, vilket gör att albumomslaget och artistbilderna gör huvuddelen av det visuella arbetet. Layouten är ett fast tvåkolumnsskal (sidofält + huvudflöde) med ett rutnät av fyrkantig albumomslag och runda avatarer, vilket skapar en rytmisk växling av geometriska typer. Gränssnittet undviker skarpa höjdförändringar och förlitar sig på subtila ytliga distinktioner (#121212-kort på en #000000-duk) och en enda stor gradientbanner för energi. Resultatet är en känsla av ett DJ-bås: informationstätt, akustiskt mörkt och redo att spelas med en snabb blick.
En fast layout med två kolumner har en vänster sidofält ("Ditt bibliotek") och ett responsivt huvudinnehållsområde. Den översta fältet är en svart stapel i full bredd med sökning till vänster och kontoåtgärder till höger. Huvudinnehållet rullar vertikalt, med horisontella karuseller av kort – populära låtar i ett fyrkantigt rutnät med 5 kolumner, populära artister i ett cirkulärt rutnät med 5 kolumner och populära album/singlar som fortsätter detta mönster. Avståndet mellan avsnitten är kompakt (32 cm). Den nedre annonsbannern är förankrad längst ner i visningsfönstret. Navigering hanteras uteslutande via den översta fältet och sidofältet – inga megamenyer eller brödsmulor. Rytmen växlar: fyrkantiga kort → runda kort → fyrkantiga kort, vilket skapar geometrisk kontrast mellan avsnitten.
Albumomslag och artistfoton är det primära visuella innehållet. Omslagen presenteras som täta fyrkantiga fragment (bildförhållande 1:1) med en radie på 6px – tillräckligt skarpa för att se redaktionella ut men ändå tillräckligt mjuka för att vara samtida. Artistfoton är runda fragment som betonar ansiktet som en identifierare. Huvudgränssnittet är fritt från dekorativa foton, livsstilsbilder eller abstrakt grafik. Det enda icke-fotografiska visuella elementet är en lila-till-blå toningsbanner längst ner, som fungerar som det enda elementet i varumärkesfärgen. Ikonerna är minimalistiska, monolinjära, vita mot en mörk bakgrund – små och funktionella, aldrig dekorativa.
Palett
Stämpla
- Spotify Green
#1ed760— Grönt används som en sekundär accentfärg för dekorativa detaljer och för att framhäva mindre frekvent använda sökfrågor. Det bör inte användas som primärfärg för uppmaningar till handling.
Neutral
- Pure White
#ffffff— En lätt stödjande yta för att skapa en diskret bakgrund och separera sektioner. Den bör inte användas som primärfärg för uppmaningen till handling. - Signal Red
#b85850— Rött fungerar som en stödjande accent för dekorativa detaljer och för att framhäva ovanliga färger. Använd det som en stödjande accent, inte som en statusfärg. - Void Black
#000000— Sidduk, övre navigeringsbakgrund, djupaste ytskikt - Carbon
#121212— Kartongytor, sidopaneler, sekundärt ytskikt över duk - Graphite
#1f1f1f— Upphöjd yta - hovringstillstånd, inmatningsfält, valda navigeringselement. - Smoke
#292929— Aktiv navigationsbakgrund, svag bakgrundsbelysningseffekt.
Typografi
från 11 till 24px · 4 steg
- SpotifyMixUI — ersättning: Inter · konturer 400, 600, 700 · Brödtext, navigering, knappar, metadata, små bildtexter – en kompakt, informationsrik design utformad för att vara subtil, vilket gör att de konstnärliga elementen dominerar.
- SpotifyMixUITitle — ersättning: Inter weight 700 · konturer 700 · Avsnittsrubriker ("Populära låtar", "Populära artister") – ett fetstilt, medelstort typsnitt gör att rubrikerna sticker ut utan att överbelasta kortrutnätet.
Intervaller och form
| Ändamål | Menande |
|---|---|
| Densitet | tät |
| Grundläggande steg | 8-12px |
| Knappradie | 9999px |
| Kortradie | 6px |
| Skuggor | minimal |
| Mellan sektioner | 32-48px |
AI kommer att bygga din webbplats i Spotify -stil och fylla den
- Fyll på med produkter och inlägg via länken - Instagram, TikTok, Facebook.
- Överför innehåll från din gamla webbplats – ange bara adressen.
- Modern design på den bästa sökmotorn: React ( Next.js) med serverrendering och SEO-optimering direkt ur lådan.
- Helautomatisk SEO-optimering för sökresultat och rekommendationer för neurala nätverk.
Liknande stilar
- Resend — svart sammet med lila neonfärg
- Neon — Ett serverrum efter mörkrets inbrott. Rent mörker, där det enda ljuset kommer från data och användarinteraktioner.
- Discord — Spelvärlden är dold bakom ett popup-chattfönster – varje sektion är en fristående miljö med sin egen belysning och karaktärsuppsättning.
- Idle Finance — Neonhandelsgolvet vid djuphavsterminalerna är en mörk marinterminal där ett enda blått ljus genomtränger mörkret.
- Midjourney — En bioluminescerande terminal i djuphavet. En djuphavsvärld där intelligens visuellt genererar sig själv i ASCII-strömmar, och kontroller visas som svagt glödande mönster.
- Netflix — Oändlig digital hylla. En filmupplevelse där ett oändligt bibliotek av innehåll presenteras mot en becksvart, teatralisk bakgrund.
- Wope — Wope är ett gränssnitt med lila horisonter. Föreställ dig ett mörkt observationsbord med ett lila ljus som strålar under glaset.
- basement — En tom tryckpress klockan tre på natten – enorma, komprimerade typsnitt som utbreder sig över det kolsvarta, en enda glimt av orange ljus i navigeringsfältet, allt annat vitt eller spöklikt grått.
- Ori — Serverrummet vid midnatt är ett svart tomrum, vitt ljus, en strömbrytare tänd.
- Amaterasu — Celestial Turquoise Sanctuary
- Stink Studios — En filmstudio vid midnatt - projektorn surrar, rummet är mörkt, bara filmen är upplyst
- Obsidian — Ett arkiv av kristallklar kunskap. Ett klart, mångfacetterat digitalt utrymme utformat för tydlighet och fokus, med lysande lila vener av interaktion.