Shopify
Rumah Hijau Tengah Malam - Cap dagangan mekar dengan latar belakang biru kehijauan yang pekat, diterangi oleh percikan pudina tunggal
Sistem reka bentuk Shopify merupakan bengkel tengah malam untuk perdagangan: kanvas hampir hitam yang diwarnai dengan warna hijau firus tua, rupa taip sans-serif yang lebar dan yakin, serta aksen pudina tunggal yang bertenaga yang mengaktifkan detik interaktif. Antara mukanya menyerupai bilik gelap, di mana produk dan jenama merupakan sumber cahaya—foto dan etalase bersinar pada permukaan hampir hitam, manakala elemen krom berkurangan. Komponennya berbentuk geometri namun lembut: kad berjejari 12px dengan sempadan nipis, butang berbentuk pil, dan rupa taip seberat 330 yang membisikkan skala dan bukannya jeritan. Satu tanda baca kromatik (#36f4a4) digunakan secara berhati-hati pada pautan, tag dan keadaan fokus, menyimpan warna untuk detik berfungsi bagi memastikan cerita pedagang kekal sebagai titik fokus visual.
Lebar maksimum ialah ~1280px, di tengah, dengan blok percikan lebar penuh memanjang di luar bekas foto. Ritma halaman berselang-seli: (1) halaman percikan gelap lebar penuh dengan tajuk utama dan butang seruan bertindak bertindih, (2) bahagian gelap yang selesa dengan teks lebar maksimum dan blok imej dalam 2 lajur atau grid imej dalam 3 lajur, (3) panel pameran interaktif (kad produk, kalkulator penghantaran, peta dunia) dipaparkan sebagai kad timbul pada kanvas yang lebih dalam. Navigasi ialah bar atas tetap dengan logo + 3 elemen navigasi + pautan sekunder + butang seruan bertindak utama, semuanya sejajar ke kanan. Ritma menegak menggunakan jurang 80px antara bahagian dengan peralihan yang lancar—tiada pembahagi antara bahagian gelap, hanya perubahan dalam ton permukaan.
Reka bentuk visual tertumpu terutamanya pada peruncit: foto produk bersaiz penuh dan foto daripada acara jenama membawa sebahagian besar berat visual, selalunya dalam bentuk latar belakang yang besar dengan teks putih bertindih. Imej dipangkas ketat, kontras tinggi dan bersifat perayaan (bunyian loceng Nasdaq, ucapan berkumpulan, gambar jarak dekat produk di tangan). Latar belakang yang gelap mewujudkan tanggapan bahawa foto-foto ini diterangi oleh lampu sorot. Ilustrasi adalah minimalis—kerja penerangan utama dilakukan oleh imej produk terbenam dan tangkapan skrin kedai. Ikon adalah monokrom, dengan lebar garis 1.5–2px, biasanya putih atau #36f4a4 untuk keadaan aktif.
Palet
Jenama
- Shopify Mint
#36f4a4— Penunjuk navigasi aktif, gelang fokus, sorotan tag dan sorotan hover pada pautan adalah satu-satunya kilauan kromatik yang mewujudkan rasa interaktiviti yang diaktifkan terhadap latar belakang gelap.
Neutral
- Midnight Forest
#02090a— Kanvas halaman, imej latar belakang pengepala, imej latar belakang bahagian - Deep Lichen
#061a1c— Permukaan kad utama, panel yang dinaikkan, blok kandungan. - Shaded Fern
#072720— Panel navigasi, kad tambahan, peningkatan panel yang hampir tidak ketara. - Spruce Border
#1e2c31— Sempadan nipis untuk kad, garisan pembahagi, garisan luar medan input. - Abyss Indigo
#000a1e— Permukaan tambahan untuk membenamkan produk/demonstrasi, panel dengan penerangan fungsi. - Pure White
#ffffff— Teks utama, isian butang, tajuk, logo.
Tipografi
dari 12 hingga 70 piksel · 8 langkah
- Neue Haas Grotesk — penggantian: Inter · garis besar 330, 400, 500, 550, 600 · Sistem tipografi teras adalah tajuk utama dengan pemberat fon 70–96px (330–400) yang halus dan bukannya lantang; salinan badan dengan pemberat fon 16–18px (400–500); dan navigasi dan antara muka pengguna dengan pemberat fon 14–16px (500–550). Pemberat fon ultra ringan 330 pada saiz skrin besar merupakan ciri tersendiri: ia menyampaikan keyakinan melalui pengekangan dan bukannya kekasaran.
- Inter Variable — penggantian: Inter · garis besar 400, 420, 450, 550 · Jenis fon sekunder yang digunakan dalam elemen antara muka navigasi, nota kecil, kawalan tab dan mikroteks dalam pengaki. Huruf kecilnya yang sedikit lebih besar dan jarak huruf yang lebih standard menjadikannya lebih mudah dibaca pada saiz padat. Ia juga sesuai untuk situasi di mana fon seberat 420 mengisi jurang antara fon biasa dan bersaiz sederhana.
Selang dan bentuk
| Tujuan | Maksudnya |
|---|---|
| Ketumpatan | purata |
| Langkah asas | 12px |
| Jejari butang | 9999px |
| Jejari kad | 12px |
| Bayang-bayang | tiada - sempadan dan bukannya bayang-bayang |
| Antara bahagian | 80px |
| Lebar halaman | 1280px |
AI akan membina laman web anda dalam gaya Shopify 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
- Retool — Bengkel obsidian yang hangat - permukaan untuk alat ketepatan, diterangi oleh bara api yang membara, tempat semuanya diciptakan
- Elektron — Panel kawalan peralatan pada tengah malam bagaikan kanvas yang hampir hitam, di mana foto produk bersinar manakala antara muka kekal hampir tidak kelihatan.
- REKKI — Panel kawalan penerbangan di makmal foto
- OFFFICE : — galeri noir yang diliputi fon monolitik
- Clyde — Bilik pameran, dengan lampu sorot tunggalnya, merupakan galeri yang hampir gelap di mana satu-satunya warna di dalam bilik itu ialah bola kecerunan yang hangat.
- Channel Studio — Makmal foto studio dengan satu tudung lampu karang
- Electronic Materials Office — Bara bara yang bercahaya di galeri yang dihiasi dengan arang
- ORYZO AI — Esei foto tentang bilik gelap. Objek bersendirian yang berlegar-legar dalam kegelapan yang hangat, fon krim satu-satunya hiasan.
- Factory — Terminal "bilik perang" pada tengah malam. "Kilang" itu ialah panel kawalan hitam pekat di mana satu kad putih mendarat seperti penghantar barang yang diterangi lampu suluh—satu-satunya objek di dalam bilik itu ialah kerja itu sendiri.
- Hungry Tiger — Grafiti berwarna terang kunyit di dinding tandoor. Palet emas dan coklat berkarat yang seragam, dengan fon yang begitu besar sehingga kelihatan lebih seperti papan tanda pasar rempah daripada laman web.
- Bibliothèque — Sebuah galeri berbentuk kubus hitam di bawah lampu sorot – satu plat bercahaya tunggal di dewan yang luas dan gelap
- Apple (España) — teater hitam dengan kelengkapan bercahaya