Glossier
Pemotretan di bawah sinar matahari - kertas putih, tinta hitam, satu aksen kuning cerah
Glossier berfungsi seperti majalah kecantikan digital: kanvas yang hampir monokromatik berwarna putih dan hitam, dihiasi dengan aksen kuning cerah yang berfungsi ganda sebagai logo merek dan satu-satunya ajakan bertindak. Sistemnya terkendali secara editorial—judul Apercu berukuran besar, ruang teks yang luas, fotografi gaya hidup halaman penuh yang membawa sebagian besar bobot emosional—dan fungsional dalam pelaksanaannya: kartu produk datar, batas tipis, dan tanpa hiasan sama sekali. Kuning bukanlah warna merek sekunder; itu ADALAH merek itu sendiri, digunakan secara hemat, sehingga setiap kemunculannya terasa seperti kilatan kamera. Segala sesuatu yang lain dimaksudkan untuk memudar ke latar belakang: warna netral adalah abu-abu hangat dengan sedikit nuansa merah muda, batasnya halus, dan tipografinya padat dan ringkas. Hasilnya adalah toko online yang terasa percaya diri, bersahaja, dan modern tanpa kompromi.
Halaman ini menampilkan serangkaian bagian layar penuh yang disusun secara vertikal, masing-masing dirancang sebagai halaman editorial mandiri. Bagian utama adalah foto lebar penuh dengan lapisan putih mengambang (kiri atas) dan logo kuning besar yang menempati seluruh bagian bawah halaman. Di bawah bagian utama, bagian-bagian bergantian antara gambar layar penuh dan kisi-kisi kartu individual. Pembagian kategori (perawatan kulit/makeup) menjadi dua kolom dengan rasio gambar yang sama (50/50) terjadi tanpa batas yang terlihat—hanya garis yang menghubungkan gambar yang memisahkannya. Katalog produk menggunakan kisi empat kolom kartu persegi pada kanvas #f7f7f7. Navigasi berupa bilah atas minimalis dengan strip iklan sekunder di atasnya. Jarak antar bagian cukup besar (64px), tetapi transisi antar bagian mulus—tanpa pembatas atau warna latar belakang yang berganti-ganti, kecuali untuk footer berwarna hangat. Ritme keseluruhannya adalah: foto, teks, foto, kisi, foto – seperti membolak-balik majalah mode.
Fotografi adalah bahasa visual yang dominan. Seluruh area tampilan dipenuhi dengan gambar gaya hidup dan potret—pencahayaan hangat saat matahari terbenam, close-up lembut kulit, tangan memegang botol produk dengan latar belakang silau matahari. Palet warna dalam foto-foto tersebut hangat dan tidak jenuh: langit berwarna peach, warna kulit terakota, biru laut yang dalam. Gambar selalu memenuhi seluruh permukaan halaman, tanpa sudut membulat, bingkai, atau lapisan tambahan, kecuali kartu teks putih atau logo kuning. Foto produk pada kartu katalog dipotret dengan latar belakang putih polos tanpa sambungan dengan pencahayaan yang rata dan halus. Rasio gambar terhadap teks kira-kira 70/30—gambar menyampaikan emosi, teks menyampaikan fungsi. Tidak ada ilustrasi, tidak ada grafik abstrak, tidak ada rendering 3D.
Palet
Merek
- Glossier Yellow
#fff116— Warna kuning 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
- Ink
#000000— Teks isi, tautan navigasi, teks utama, teks footer, garis luar ikon, batas tipis; warna tipografi dan struktural dominan. - Paper
#ffffff— Permukaan kartu produk, area pengisian, panel timbul; tingkat permukaan paling terang dalam tumpukan. - Fog
#f7f7f7— Kanvas halaman, latar belakang bagian, transisi antar gambar di halaman; permukaan dasar tempat seluruh situs web berada. - Blush
#faf2f4— Latar belakang footer, pembatas bagian yang lembut dan hangat; rona putih kemerahan yang halus menambah kehangatan di bagian bawah halaman. - Mist
#f0f0f0— 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). - Ash
#e8e8e8— Batas kolom input, latar belakang ikon, garis pemisah tipis; warna batas struktural untuk kartu dan elemen formulir.
Tipografi
dari 12 hingga 32px · 5 langkah
- Apercu — penggantian: Inter · garis besar 400, 500, 700 · Jenis huruf utama digunakan di seluruh antarmuka pengguna—teks isi pada 16px/400, navigasi dan keterangan pada 12–14px/500, subjudul pada 20px/500, dan judul editorial pada 32px/700. Desain geometris dan humanistik Apercu memberikan merek tersebut gaya yang ringkas dan modern; jarak antar huruf yang hampir nol (0,002–0,003em) membuat jenis huruf ini kompak dan seperti majalah, bukan ringan atau ramah. Bobot 700 dikhususkan untuk elemen tampilan dalam editorial, bukan elemen UI.
- Apercu Mono — penggantian: JetBrains Mono or IBM Plex Mono · garis besar 400 · Tipografi mikro-utilitarian untuk metadata pesanan, nomor pelacakan, dan label di samping kode; versi monospasi menciptakan tekstur teknis yang kontras dengan tipe teks proporsional.
- GTStandard-M — penggantian: Inter · garis besar 400 · GTStandard-M - Ditemukan dalam data yang diekstrak tetapi tidak dijelaskan oleh AI.
Interval dan bentuk
| Tujuan | Arti |
|---|---|
| Kepadatan | rata-rata |
| Langkah dasar | 8px |
| Radius tombol | 0px |
| Radius kartu | 0px |
| Bayangan | tidak - batas, bukan bayangan |
| Di antara bagian-bagiannya | 64px |
| Lebar halaman | 1440px |
AI akan membangun situs web Anda dengan gaya Glossier 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
- Lightship — Sebuah diorama sinematik tentang jalan terbuka. Dinding galeri berwarna krem hangat dihiasi dengan foto-foto lanskap besar yang dipasang berdekatan, tulisan hitam tipis yang hampir tak terlihat pada bingkai, dan satu aksen oranye terang yang memecah monokrom seperti api unggun di padang rumput.
- Faire ES — Katalog grosir krim hangat
- Adanola — Sebuah lookbook editorial di atas kertas putih. Pemotretan mode di mana tipografi dan fotografi tampak hidup di permukaan putih yang bersih, dengan tinta hitam untuk jenis huruf dan font sans-serif khas yang halus (Favorit), mencerminkan gaya keseluruhan merek.
- Oura Ring — Sebuah bengkel pembuatan oatmeal yang nyaman, bermandikan cahaya siang yang lembut.
- Stykka — Sebuah bengkel Skandinavia dalam cahaya putih – ruang pamer kerajinan tangan yang tenang di mana satu-satunya suara adalah fotografi.
- DJI — Kanvas hitam kedirgantaraan dengan satu aksen biru elektrik.
- Altitude Beverages — Tata letak majalah monokrom. Bayangkan tata letak majalah mode yang dilucuti semua warna kecuali foto-foto statis—teks dan ruang kosong menceritakan keseluruhan cerita.
- AATHER — Telapak tangan terbuka, nyala api tunggal - kemewahan tenang yang terkandung dalam keheningan.
- Cowboy — Sebuah galeri sepeda Belgia dalam suasana porselen putih salju. Sebuah ruang pamer di mana permukaan matte, font besar yang digunakan dalam materi editorial, dan hampir tidak adanya dekorasi menarik perhatian pada sepeda dan isinya.
- Refero — Tata letak editorial di atas marmer putih - halaman produk yang dibuat oleh seorang tipografer, di mana judul dengan huruf serif menjadi kartu identitas merek, dan elemen lainnya dirancang agar tidak mencolok.
- Face Formula — Potret editorial Skandinavia. Tata letak yang tenang, bergaya majalah, di mana tatapan model dan judul, yang ditulis dengan font serif yang padat, berbicara sendiri di tengah latar belakang yang sejuk dan berkabut.
- Shupatto — Lemari pajangan museum di atas marmer putih