Panduan antarmuka situs.

BAB 01

Katalog adalah jalannya, bukan tokonya.

Etalase: katalog adalah deretan toko. Kerangkanya adalah gedung — hitam, putih, dan satu aksen vermilion — dan logo lingkarannya terpasang di fasad setiap halaman katalog, di kaki halaman, dan sebagai ikon browser. Setiap tema memasang papan namanya sendiri dengan huruf dan warnanya sendiri. Pilih tokonya, pasang brand-mu. Aset asli Syafrilverse menandai pembuatnya.

BAB 02

Tinta, putih, dan satu vermilion.

Ini token semantik asli kerangka; nilainya mengikuti tema terang dan gelap. Kerangka tidak pernah meminjam warna tema: warna di situs ini milik papan nama toko, yang tetap memakai paletnya sendiri di kedua tema.

BAB 03

Suara papan direktori; toko membawa hurufnya sendiri.

IBM Plex Mono adalah suara kerangka: judul, label, nomor toko, dan kontrol, seperti papan direktori gedung. Inter Tight membawa teks bacaan. Setiap papan nama memakai huruf display tema dari berkas kontennya. Semua huruf berlisensi OFL dan dihosting situs ini.

BAB 04

Deretan toko menentukan ritme.

Setiap etalase punya anatomi yang sama: papan nama, tenda, jendela, lalu catatan. Deretan toko di beranda memuat empat toko per baris di desktop, tiga di tablet, dan dua di ponsel, sehingga karya mengisi layar pertama; kartu katalog memuat tiga, dua, atau satu. Jendela berisi tangkapan asli, tegak lurus dengan halaman.

BAB 05

Bingkai milik katalog; papan nama milik toko.

Ini kartu katalog asli. Papan nama, tenda, dan jendela Roti Pagi berasal dari berkas konten dan tangkapannya; bingkai tinta, baris catatan, aksi simpan, dan tautannya milik katalog.

012

Roti Pagi: Roti Pagi

KulinerEditorialSimpan

Croissant, sourdough, dan roti kayu manis dalam satu daftar ambil.

FrauncesCoba langsung

BAB 06

Keluarga tanda yang konsisten.

Ikon Lucide mendampingi navigasi dan kontrol, dengan garis 1,6 px dan ukuran 16–20 px. Aksi yang hanya berisi ikon memiliki nama aksesibel dan bantuan kontekstual.

BAB 07

Merespons keputusan pengguna.

Hover dan fokus mengubah bingkai toko menjadi vermilion; tidak ada yang membesar atau bergeser. Aksi simpan langsung menunjukkan statusnya dan hasil filter muncul singkat. Preferensi pengurangan gerak menghilangkan perpindahan. Tidak ada slideshow otomatis atau pengambilalihan gulir.

Fokus terlihat, kontras terbaca, dan label lengkap merupakan bagian antarmuka. Pilihan dan tooltip mendukung papan ketik, termasuk Escape dan pengembalian fokus.

BAB 08

Lengkapi detail antarmuka.

Contoh pilihan, tooltip, dan area gulir ini memakai primitive yang sama dengan katalog. Buku demo menerapkan kontrak visual masing-masing pada perilaku interaksi bersama.

BAB 09

Temukan layar di tema yang berfungsi.