Shop
Konstelasi perdagangan terapung di atas marmer putih
Toko online ini beroperasi dengan model "kanvas putih", dengan produk ditampilkan sebagai kartu gambar besar yang sangat melengkung, bukan berupa kisi-kisi thumbnail. Seluruh antarmuka sangat halus: radius 20-28px di seluruh bagian, kontrol berbentuk pil, dan bodi GT Standard 16px yang ringkas dengan pelacakan negatif yang ketat sehingga teks menjadi tajam dan tebal. Satu-satunya aksen mencolok pada sistem ini adalah warna ungu cerah (#5433eb), yang muncul di logo, kolom hasil pencarian melingkar, dan sebagai bayangan berwarna pada tombol yang sama. Palet warna lainnya bernuansa netral hangat: permukaan putih, kanvas abu-abu dingin yang halus, batas yang halus, dan teks yang hampir hitam. Kepadatan tetap ringkas dengan jarak antar elemen 12px, tetapi bagian hero dan kategori terasa lebih lapang berkat ritme vertikal yang cukup besar yaitu 64-80px, membuat pengalaman berbelanja terasa lebih seperti menjelajah daripada katalog.
Lebar maksimumnya adalah 1200px, berpusat pada kanvas transparan #f2f4f5, dengan sidebar selebar 64px yang tetap ada di sebelah kiri yang hanya berisi ikon navigasi. Elemen utamanya adalah strip selebar penuh, dengan kartu produk yang diposisikan di atas logo "toko" berwarna ungu yang berpusat, dan bilah pencarian berbentuk pil tepat di bawahnya. Pil kategori disusun dalam satu baris yang berpusat di bawah bilah pencarian. Bagian konten (Wanita, Pria, Kecantikan, Rumah, Bayi & Anak) mengikuti sebagai strip yang ditentukan, masing-masing berisi grid 4 kolom dengan gambar produk atau komposisi "elemen utama dan grid" 2 kolom. Ritme vertikalnya cukup lebar: 64–80px antara bagian utama. Footer adalah strip gelap di bagian bawah halaman dengan grup tautan berbentuk kolom. Panah carousel di sisi kanan panel produk horizontal menunjukkan konten yang dapat digulir tanpa titik penomoran halaman.
Fotografi merupakan elemen visual yang dominan: foto produk layar penuh dengan latar belakang putih, dipotong 1:1, dan gambar gaya hidup dengan warna-warna hangat bernuansa tanah (beige, terakota, sage, gading). Gambar produk memiliki warna tersendiri—antarmuka pengguna tetap akromatik, sehingga warna produk dapat memberikan variasi visual. Logo merek muncul sebagai teks overlay pada gambar utama yang gelap atau terang, bukan sebagai ikon individual. Dalam komposisi utama, kartu produk diposisikan sebagai konstelasi mengambang yang sedikit tumpang tindih di atas logo merek. Ikon bersifat minimalis dan monokrom (garis luar hitam), kecuali ikon kategori yang menggunakan satu warna merek. Tidak ada ilustrasi, efek 3D, atau gradien pada gambar produk.
Palet
Merek
- Shop Violet
#5433eb— Tombol kirim, tanda teks putus-putus, dan logo merek adalah satu-satunya aksen yang menyoroti aksi dan individualitas pada latar belakang putih. - Violet Wash
#c0b5f3— Sebuah lingkaran cahaya tembus pandang di belakang tombol kirim berwarna ungu yang mempertahankan cahayanya tanpa mengubah warna.
Netral
- Canvas Mist
#f2f4f5— Latar belakang halaman dan perlakuan permukaan tambahan di balik kartu timbul. - Pure White
#ffffff— Permukaan utama untuk kartu, kolom input, tanda mengambang, dan tombol berbentuk pil. - Ink Black
#000000— Teks utama, judul, ikon, simbol navigasi, dan kartu produk dalam mode gelap. - Faint Border
#ebebeb— Garis pemisah tipis pada kartu, garis luar kolom input, dan bingkai tombol berbentuk pil. - Muted Gray
#787574— Teks sekunder, label navigasi, dan garis luar ikon saat tidak aktif. - Cool Stone
#cccccc— Placeholder, status nonaktif, dan latar belakang ikon tidak aktif
Tipografi
dari 11 hingga 16px · 4 langkah
- GT Standard — penggantian: Inter · garis besar 400 · Font utama untuk semua ukuran—baik untuk teks isi maupun judul. GTStandard-MRegular dengan ukuran 16px/-0.031em adalah font utama untuk teks isi, tombol, dan label. GTStandard-MSemibold dengan ukuran 20px/-0.05em digunakan untuk beberapa judul besar; GTStandard-MMedium dengan ukuran 11–12px digunakan untuk keterangan mikro. Setiap varian font ditampilkan dengan bobot optik 400—hierarki font dicapai melalui gradien halus dan jarak antar huruf negatif yang rapat, bukan kontras yang mencolok. Ini adalah gaya khas: Shop tidak berteriak dengan font tebal, tetapi membentuk teks melalui jarak antar huruf.
- Shopify Sans — penggantian: Inter · garis besar 400, 700 · Dikhususkan untuk pesan tingkat sistem seperti banner pemuatan aplikasi dan teks persetujuan cookie.
Interval dan bentuk
| Tujuan | Arti |
|---|---|
| Kepadatan | rata-rata |
| Langkah dasar | 12px |
| Radius tombol | 9999px |
| Radius kartu | 28px |
| Bayangan | bayangan lembut |
| Di antara bagian-bagiannya | 64px |
| Lebar halaman | 1200px |
AI akan membangun situs web Anda dengan gaya Shop 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
- Cursor — Sebuah bengkel perkamen yang nyaman, diterangi oleh bara api yang menyala-nyala.
- Slush — Alam semesta tiup berupa stiker di atas kertas pastel.
- MindMarket — Sebuah buku dongeng yang nyaman di atas kertas krem - kanvas editorial yang ramah di mana judul Inter yang besar dan karakter kertas yang dipotong berdampingan di permukaan yang lembut seperti stiker dan bermandikan sinar matahari.
- Airbnb — Dinding galeri putih yang tenang dengan satu pembatas buku berwarna merah koral.
- Superr — Sebuah buku catatan sekolah yang hangat dalam cahaya sore yang lembut. Halaman berwarna krem, spidol oranye tanpa tutup, dan setumpuk stiker nama berlaminasi yang menunggu untuk dilepas.
- Apple (España) — Galeri museum, dalam cahaya siang yang lembut, merupakan ruang putih tunggal yang memikat dan terasa ringan, dengan setiap pameran diterangi oleh lampu sorot pada dinding yang sedikit berwarna.
- Lamborghini — Warna bodi hitam di ruang pamer, di bawah sorotan lampu - satu mobil kuning
- Amplemarket — Tempat kerja yang bermandikan sinar matahari dan ditaburi konfeti.
- Getharvest — Sebuah meja kerja saat senja – kanvas berwarna krem hangat, kartu pos putih digantung di kanvas, dan nyala api oranye terang.
- Agence Foudre — Sampul majalah tersebut berwarna merah muda lembut yang mengingatkan pada lipstik.
- Drive Capital — Poster perjalanan darat retro di atas kertas hangat.
- Apple (España) — etalase galeri putih