Spotify
ruang kendali jukebox malam
Antarmuka web Spotify adalah pusat kendali media yang padat dan gelap: kanvas hampir hitam yang dihiasi dengan sampul album yang cerah, aksen hijau khas tunggal, dan kontrol berbentuk pil. Tipografinya ringkas dan fungsional—jenis huruf sans-serif geometris yang dirancang khusus dengan ukuran kecil, memungkinkan sampul album dan foto artis melakukan sebagian besar pekerjaan visual. Tata letaknya adalah kerangka dua kolom tetap (sidebar + umpan utama) dengan kisi-kisi sampul album persegi dan avatar bulat, menciptakan pergantian tipe geometris yang berirama. Antarmuka menghindari perubahan ketinggian yang tajam, mengandalkan perbedaan permukaan yang halus (kartu #121212 pada kanvas #000000) dan satu banner gradien besar untuk energi. Hasilnya adalah nuansa bilik DJ: padat informasi, gelap secara akustik, dan siap diputar dalam sekejap.
Tata letak dua kolom tetap menampilkan bilah sisi kiri ("Pustaka Anda") dan area konten utama yang responsif. Bilah atas adalah bilah hitam lebar penuh dengan pencarian di sebelah kiri dan tindakan akun di sebelah kanan. Konten utama bergulir secara vertikal, dengan carousel kartu horizontal—lagu-lagu populer dalam grid persegi 5 kolom, artis populer dalam grid melingkar 5 kolom, dan album/single populer melanjutkan pola ini. Jarak antar bagian kompak (32 cm). Banner iklan bawah tertambat di bagian bawah tampilan. Navigasi ditangani secara eksklusif melalui bilah atas dan bilah sisi—tidak ada mega-menu atau breadcrumb. Ritmenya bergantian: kartu persegi → kartu bundar → kartu persegi, menciptakan kontras geometris antar bagian.
Sampul album dan foto artis adalah konten visual utama. Sampul disajikan sebagai fragmen persegi padat (rasio aspek 1:1) dengan radius 6px—cukup tajam untuk terlihat editorial namun cukup lembut untuk terlihat kontemporer. Foto artis berupa fragmen bulat, menekankan wajah sebagai pengenal. Antarmuka utama bebas dari foto dekoratif, gambar gaya hidup, atau grafik abstrak. Satu-satunya elemen visual non-fotografis adalah banner gradien ungu ke biru di bagian bawah, yang berfungsi sebagai satu-satunya elemen warna merek. Ikon minimalis, monolinear, putih di atas latar belakang gelap—kecil dan fungsional, tidak pernah dekoratif.
Palet
Merek
- Spotify Green
#1ed760— Warna hijau digunakan sebagai aksen sekunder untuk detail dekoratif dan untuk menyoroti kueri pencarian yang jarang digunakan. Warna ini tidak boleh digunakan sebagai warna utama untuk ajakan bertindak (call to action).
Netral
- Pure White
#ffffff— Permukaan pendukung yang ringan untuk menciptakan latar belakang yang tidak mencolok dan memisahkan bagian-bagian. Warna ini tidak boleh digunakan sebagai warna utama untuk ajakan bertindak (call to action). - Signal Red
#b85850— Warna merah berfungsi sebagai aksen pendukung untuk detail dekoratif dan untuk menonjolkan warna-warna yang tidak umum. Gunakan sebagai aksen pendukung, bukan sebagai warna penanda status. - Void Black
#000000— Kanvas halaman, latar belakang navigasi atas, lapisan permukaan terdalam - Carbon
#121212— Permukaan karton, panel samping, lapisan permukaan sekunder di atas kanvas - Graphite
#1f1f1f— Permukaan yang ditinggikan - status saat kursor diarahkan ke atasnya, kolom input, elemen navigasi yang dipilih. - Smoke
#292929— Latar belakang navigasi aktif, efek cahaya latar yang sedikit.
Tipografi
dari 11 hingga 24px · 4 langkah
- SpotifyMixUI — penggantian: Inter · garis besar 400, 600, 700 · Teks utama, navigasi, tombol, metadata, keterangan singkat—desain ringkas dan kaya informasi yang dirancang agar tidak mencolok, sehingga karya seni dapat menjadi elemen utama.
- SpotifyMixUITitle — penggantian: Inter weight 700 · garis besar 700 · Judul bagian ("Lagu Populer," "Artis Populer") - font tebal berukuran sedang membuat judul menonjol tanpa membebani grid kartu.
Interval dan bentuk
| Tujuan | Arti |
|---|---|
| Kepadatan | padat |
| Langkah dasar | 8-12px |
| Radius tombol | 9999px |
| Radius kartu | 6px |
| Bayangan | minimal |
| Di antara bagian-bagiannya | 32-48px |
AI akan membangun situs web Anda dengan gaya Spotify dan mengisinya.
- Isi dengan produk dan postingan melalui tautan - Instagram, TikTok, Facebook.
- Pindahkan konten dari situs lama Anda—cukup tentukan alamatnya.
- Desain modern pada mesin terbaik: React ( Next.js) dengan rendering sisi server dan optimasi SEO langsung dari awal.
- Optimasi SEO otomatis sepenuhnya untuk hasil pencarian dan rekomendasi jaringan saraf.
Gaya serupa
- Resend — beludru hitam dengan warna neon ungu
- Neon — Ruang server setelah gelap. Kegelapan total, di mana satu-satunya cahaya berasal dari data dan interaksi pengguna.
- Discord — Dunia permainan tersembunyi di balik jendela obrolan pop-up - setiap bagian merupakan lingkungan mandiri dengan pencahayaan dan karakter tersendiri.
- Idle Finance — Lantai perdagangan neon di terminal laut dalam adalah terminal angkatan laut yang gelap di mana satu cahaya biru menembus kegelapan.
- Midjourney — Terminal bioluminesen di dasar laut. Sebuah dunia laut dalam di mana kecerdasan secara visual muncul dalam aliran ASCII, dan kontrol muncul sebagai pola yang bercahaya samar.
- Netflix — Rak Digital Tak Terbatas. Sebuah pengalaman sinematik di mana perpustakaan konten tanpa batas disajikan dengan latar belakang teater yang gelap gulita.
- Wope — Wope adalah antarmuka cakrawala ungu. Bayangkan meja observatorium gelap dengan cahaya ungu yang memancar dari bawah kaca.
- basement — Mesin cetak kosong pukul 3 pagi – font besar dan terkompresi terbentang di kegelapan pekat, secercah cahaya oranye di bilah navigasi, sisanya berwarna putih atau abu-abu pucat.
- Ori — Ruang server di tengah malam adalah kehampaan hitam, cahaya putih, satu saklar menyala.
- Amaterasu — Tempat Suci Turquoise Surgawi
- Stink Studios — Sebuah studio film di tengah malam - proyektor berdengung, ruangan gelap, hanya film yang menyala.
- Obsidian — Sebuah gudang pengetahuan yang jernih. Ruang digital yang jelas dan multifaset, dirancang untuk kejelasan dan fokus, dengan urat-urat ungu bercahaya yang menjadi penanda interaksi.