Shopify
Midnight Greenhouse - Merek dagang bermekaran di atas latar belakang biru kehijauan yang pekat, diterangi oleh secercah warna mint.
Sistem desain Shopify bagaikan bengkel tengah malam untuk perdagangan: kanvas hampir hitam yang diwarnai dengan hijau turquoise pekat, jenis huruf sans-serif yang lebar dan percaya diri, serta aksen mint cerah yang mengaktifkan momen interaktif. Antarmuka menyerupai ruang gelap, di mana produk dan merek adalah sumber cahaya—foto dan etalase toko bersinar di permukaan yang hampir hitam, sementara elemen krom tampak memudar. Komponennya geometris namun lembut: kartu dengan radius 12px dan batas tipis, tombol berbentuk pil, dan jenis huruf dengan bobot 330 yang memberikan kesan skala yang halus. Tanda baca kromatik tunggal (#36f4a4) digunakan secara hemat pada tautan, tag, dan status fokus, dengan warna dikhususkan untuk momen fungsional guna memastikan kisah pedagang tetap menjadi titik fokus visual.
Lebar maksimumnya sekitar 1280px, terpusat, dengan blok splash lebar penuh yang meluas melampaui wadah foto. Ritme halaman bergantian: (1) halaman splash gelap lebar penuh dengan judul dan tombol ajakan bertindak yang ditambahkan, (2) bagian gelap yang nyaman dengan blok teks dan gambar lebar maksimum dalam 2 kolom atau grid gambar dalam 3 kolom, (3) panel tampilan interaktif (kartu produk, kalkulator pengiriman, peta dunia) yang ditampilkan sebagai kartu timbul pada kanvas yang lebih dalam. Navigasinya berupa bilah atas tetap dengan logo + 3 elemen navigasi + tautan sekunder + tombol ajakan bertindak utama, semuanya sejajar ke kanan. Ritme vertikal menggunakan celah 80px antar bagian dengan transisi yang halus—tidak ada pembatas antar bagian gelap, hanya perubahan nada permukaan.
Desain visual terutama berfokus pada peritel: foto produk ukuran penuh dan foto dari acara merek membawa sebagian besar bobot visual, seringkali dalam bentuk latar belakang besar dengan teks putih yang ditambahkan di atasnya. Gambar-gambar tersebut dipotong rapat, memiliki kontras tinggi, dan bernuansa meriah (bunyi lonceng Nasdaq, sapaan kelompok, close-up produk di tangan). Latar belakang gelap menciptakan kesan bahwa foto-foto ini diterangi oleh lampu sorot. Ilustrasinya minimalis—penjelasan utama dilakukan oleh gambar produk yang disematkan dan tangkapan layar toko. Ikon berwarna monokrom, dengan lebar garis 1,5–2px, biasanya putih atau #36f4a4 untuk status aktif.
Palet
Merek
- Shopify Mint
#36f4a4— Indikator navigasi aktif, lingkaran fokus, sorotan tag, dan sorotan saat kursor diarahkan ke tautan adalah satu-satunya kilauan warna yang menciptakan kesan interaktivitas yang diaktifkan di tengah latar belakang gelap.
Netral
- Midnight Forest
#02090a— Kanvas halaman, gambar latar belakang header, gambar latar belakang bagian. - Deep Lichen
#061a1c— Permukaan kartu utama, panel timbul, blok konten. - Shaded Fern
#072720— Panel navigasi, kartu tambahan, dan sedikit peningkatan ketinggian panel yang hampir tidak terlihat. - Spruce Border
#1e2c31— Garis tepi tipis untuk kartu, garis pemisah, garis luar kolom input. - Abyss Indigo
#000a1e— Permukaan tambahan untuk menempatkan produk/demonstrasi, panel dengan deskripsi fungsi. - Pure White
#ffffff— Teks utama, isi tombol, judul, logo.
Tipografi
dari 12 hingga 70px · 8 langkah
- Neue Haas Grotesk — penggantian: Inter · garis besar 330, 400, 500, 550, 600 · Sistem tipografi intinya adalah judul dengan ketebalan font 70–96px (330–400) yang halus dan tidak mencolok; teks isi dengan ketebalan font 16–18px (400–500); dan navigasi serta antarmuka pengguna dengan ketebalan font 14–16px (500–550). Ketebalan font ultra-ringan 330 pada ukuran layar besar merupakan fitur khas: hal ini menyampaikan kepercayaan diri melalui kesederhanaan dan bukan ketebalan.
- Inter Variable — penggantian: Inter · garis besar 400, 420, 450, 550 · Jenis huruf sekunder yang digunakan dalam elemen antarmuka navigasi, catatan kecil, kontrol tab, dan teks mikro di bagian bawah halaman. Huruf kecilnya yang sedikit lebih besar dan jarak antar huruf yang lebih standar membuatnya lebih mudah dibaca pada ukuran yang ringkas. Jenis huruf ini juga cocok untuk situasi di mana huruf dengan bobot 420 mengisi celah antara huruf reguler dan huruf berukuran sedang.
Interval dan bentuk
| Tujuan | Arti |
|---|---|
| Kepadatan | rata-rata |
| Langkah dasar | 12px |
| Radius tombol | 9999px |
| Radius kartu | 12px |
| Bayangan | tidak - batas, bukan bayangan |
| Di antara bagian-bagiannya | 80px |
| Lebar halaman | 1280px |
AI akan membangun situs web Anda dengan gaya Shopify 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
- Retool — Bengkel obsidian yang hangat - permukaan untuk peralatan presisi, diterangi oleh bara api yang menyala, tempat segala sesuatu diciptakan.
- Elektron — Panel kontrol peralatan di tengah malam merupakan kanvas yang hampir hitam, di mana foto produk bersinar sementara antarmuka tetap hampir tak terlihat.
- REKKI — Panel kontrol penerbangan di laboratorium foto
- OFFFICE : — sebuah galeri noir yang diselimuti font monolitik
- Clyde — Ruang pamer, dengan satu lampu sorotnya, adalah galeri yang hampir gelap di mana satu-satunya warna di ruangan itu adalah bola gradien hangat.
- Channel Studio — Laboratorium foto studio dengan satu kap lampu berwarna karang
- Electronic Materials Office — Bara api yang menyala di galeri yang didekorasi dengan arang.
- ORYZO AI — Esai foto tentang ruang gelap. Sebuah objek tunggal melayang dalam kegelapan yang hangat, font krem sebagai satu-satunya hiasan.
- Factory — Terminal "ruang perang" di tengah malam. "Pabrik" adalah panel kontrol hitam pekat tempat sebuah kartu putih mendarat seperti kiriman yang diterangi senter—satu-satunya objek di ruangan itu adalah pekerjaan itu sendiri.
- Hungry Tiger — Grafiti berwarna kunyit cerah di dinding tandoor. Palet warna yang serasi antara emas dan cokelat berkarat, dengan ukuran font yang sangat besar sehingga lebih mirip papan nama pasar rempah-rempah daripada situs web.
- Bibliothèque — Sebuah galeri berbentuk kubus hitam di bawah sorotan lampu – sebuah piring bercahaya tunggal di aula yang luas dan gelap.
- Apple (España) — teater hitam dengan perlengkapan penerangan