Shop
Sebuah buruj perdagangan terapung di atas marmar putih
Kedai dalam talian ini beroperasi menggunakan model "kanvas putih", dengan produk dipaparkan sebagai kad imej yang besar dan melengkung tebal dan bukannya grid lakaran kecil. Keseluruhan antara muka sangat lancar: jejari 20-28px di seluruh bahagian, kawalan berbentuk pil dan badan GT Standard 16px yang padat dengan penjejakan negatif yang ketat yang menjadikan teks jelas dan berani. Satu-satunya aksen berani sistem ialah ungu terang (#5433eb), yang muncul dalam logo, medan hasil carian bulat dan sebagai bayang berwarna pada butang yang sama. Palet selebihnya berwarna neutral hangat: permukaan putih, kanvas kelabu sejuk yang halus, sempadan halus dan teks hampir hitam. Ketumpatan kekal padat dengan talang 12px, tetapi jalur wira dan kategori bernafas berkat irama menegak 64-80px yang banyak, menjadikan pengalaman perdagangan lebih terasa seperti melayari daripada katalog.
Lebar maksimum ialah 1200px, berpusat pada kanvas #f2f4f5 lut sinar, dengan bar sisi selebar 64px yang berterusan di sebelah kiri yang hanya mengandungi ikon navigasi. Elemen utama ialah jalur lebar penuh, dengan kad produk diletakkan di atas logo "kedai" ungu berpusat, dan bar carian berbentuk pil betul-betul di bawahnya. Pil kategori disusun dalam satu baris berpusat di bawah bar carian. Bahagian kandungan (Wanita, Lelaki, Kecantikan, Rumah, Bayi & Kanak-kanak) mengikut jalur yang ditetapkan, setiap satu mengandungi grid 4 lajur dengan imej produk atau komposisi "elemen utama dan grid" 2 lajur. Ritma menegak adalah luas: 64–80px antara bahagian utama. Pengaki ialah jalur gelap di bahagian bawah halaman dengan kumpulan pautan berbentuk lajur. Anak panah karusel di sebelah kanan panel produk mendatar menunjukkan kandungan yang boleh ditatal tanpa titik penomboran halaman.
Fotografi merupakan elemen visual yang dominan: foto produk skrin penuh dengan latar belakang putih, dipangkas 1:1, dan imej gaya hidup dengan rona tanah yang hangat (beige, terakota, sage, gading). Imej produk mempunyai warna tersendiri—antara muka pengguna kekal akromatik, membolehkan rona produk memberikan kepelbagaian visual. Logo jenama muncul sebagai teks tindanan pada imej utama yang gelap atau terang, bukannya sebagai ikon individu. Dalam komposisi utama, kad produk diletakkan sebagai buruj terapung yang sedikit bertindih di atas tanda perkataan. Ikon adalah minimalis dan monokrom (garis hitam), kecuali ikon kategori, yang menggunakan satu warna jenama. Tiada ilustrasi, kesan 3D atau kecerunan dalam imej produk.
Palet
Jenama
- Shop Violet
#5433eb— Butang hantar, tanda teks bertitik dan logo jenama adalah satu-satunya aksen yang menonjolkan aksi dan keperibadian pada latar belakang putih. - Violet Wash
#c0b5f3— Halo lut sinar di belakang butang hantar ungu yang mengekalkan cahayanya tanpa berubah rona.
Neutral
- Canvas Mist
#f2f4f5— Latar belakang halaman dan rawatan permukaan tambahan di belakang kad yang dinaikkan. - Pure White
#ffffff— Permukaan utama untuk kad, medan input, papan tanda terapung dan butang berbentuk pil. - Ink Black
#000000— Teks utama, tajuk, ikon, simbol navigasi dan kad produk dalam mod gelap. - Faint Border
#ebebeb— Garisan pembahagi nipis pada kad, garisan luar medan input dan bingkai butang berbentuk pil. - Muted Gray
#787574— Teks sekunder, label navigasi, garis besar ikon apabila tidak aktif - Cool Stone
#cccccc— Pemegang tempat, keadaan dilumpuhkan dan latar belakang ikon tidak aktif
Tipografi
dari 11 hingga 16px · 4 langkah
- GT Standard — penggantian: Inter · garis besar 400 · Fon utama pada semua saiz—untuk teks isi dan tajuk. GTStandard-MRegular pada 16px/-0.031em ialah fon utama untuk teks isi, butang dan label. GTStandard-MSemibold pada 20px/-0.05em digunakan untuk beberapa tajuk besar; GTStandard-MMedium pada 11–12px digunakan untuk mikrokapsyen. Setiap varian fon dipaparkan dengan pemberat optik 400—hierarki fon dicapai melalui kecerunan halus dan jarak huruf negatif yang padat, bukannya kontras yang tebal. Ini ialah gaya khas: Shop tidak menggunakan fon tebal, tetapi sebaliknya membentuk teks melalui jarak huruf.
- Shopify Sans — penggantian: Inter · garis besar 400, 700 · Dikhaskan untuk mesej peringkat sistem seperti sepanduk pemuatan aplikasi dan teks persetujuan kuki.
Selang dan bentuk
| Tujuan | Maksudnya |
|---|---|
| Ketumpatan | purata |
| Langkah asas | 12px |
| Jejari butang | 9999px |
| Jejari kad | 28px |
| Bayang-bayang | bayang-bayang lembut |
| Antara bahagian | 64px |
| Lebar halaman | 1200px |
AI akan membina laman web anda dalam gaya Shop dan mengisinya
- Isi dengan produk dan siaran melalui pautan - Instagram, TikTok, Facebook.
- Pindahkan kandungan dari tapak lama anda—cuma nyatakan alamatnya.
- Reka bentuk moden pada enjin terbaik: React ( Next.js) dengan pemaparan pelayan dan pengoptimuman SEO sedia ada.
- Pengoptimuman SEO automatik sepenuhnya untuk hasil carian dan cadangan rangkaian saraf.
Gaya yang serupa
- Cursor — Bengkel perkamen yang selesa, diterangi oleh bara yang membara
- Slush — alam semesta kembung pelekat pada kertas pastel
- MindMarket — Sebuah buku kisah dongeng yang selesa di atas kertas krim - kanvas editorial yang mesra di mana tajuk utama Inter yang besar dan watak-watak kertas potongan wujud bersama di atas permukaan yang lembut seperti pelekat yang disinari matahari.
- Airbnb — Dinding galeri putih yang tenang dengan penanda buku merah karang tunggal
- Superr — Sebuah buku nota sekolah yang hangat di bawah cahaya petang yang lembut. Sebuah halaman berwarna krim, penanda oren tanpa penutup, dan setumpuk pelekat nama berlamina yang menunggu untuk ditanggalkan.
- Apple (España) — Galeri muzium, dalam cahaya siang yang lembut, merupakan ruang putih tunggal yang menawan dan ringan, dengan setiap pameran diterangi oleh lampu sorot pada dinding yang berwarna sedikit.
- Lamborghini — Warna badan hitam di bilik pameran, di bawah lampu sorot - satu kereta kuning
- Amplemarket — Tempat kerja yang disinari matahari berselerak dengan konfeti
- Getharvest — Sebuah meja pada waktu keemasan – kanvas krim hangat, poskad putih digantung pada kanvas, dan satu nyalaan api oren terang
- Agence Foudre — Muka depan majalah itu berwarna merah jambu lembut yang mengingatkan pada gincu.
- Drive Capital — Poster perjalanan jalan raya retro di atas kertas suam
- Apple (España) — kotak paparan galeri putih