FRANKY'S
Kiosk permainan retro di kaunter kedai papan luncur
Bahasa visual Franky merupakan gabungan arked retro dan kedai papan luncur: kanvas krim hangat (#f3e5df) yang dibingkai oleh sempadan piksel tegar, papan dam hitam putih yang terdapat di mana-mana, dan fon piksel tunggal, Arcade, yang digunakan untuk setiap perkataan di laman web. Paletnya sengaja jarang—hanya dua warna kromatik yang tinggal (isyarat oren #faa21f untuk papan tanda dan hijau pekat #128e44 untuk butang beli), dengan keseluruhan hierarki dinyatakan dengan meningkatkan berat fon Arcade daripada 400 kepada 700 dan dengan menggunakan hitam pada latar belakang krim. Permukaan kekal rata dan monolitik; kedalaman dicapai hanya melalui garisan krim 1px yang disisipkan pada butang dan permainan ton papan dam. Komponennya mengingatkan sprite kedai tahun 1990-an: sempadan hitam tebal, jejari sempadan 6-12px yang ketat, pelapik 4-8px yang padat, dan togol 3D/AR yang kelihatan seperti ikon piksel dan bukannya elemen krom. Halaman-halaman baharu ini bertujuan untuk mengekalkan suasana seperti arked: tiada kecerunan selain teks skrol oren, tiada bayang-bayang lembut, tiada tipografi hiasan—hanya kertas berwarna krim, garisan piksel hitam dan satu warna oren hangat.
Pada desktop, halaman produk memaparkan susun atur tengah lebar penuh dengan lebar maksimum 1200px. Rentak dari atas ke bawah ialah: teks skrol oren → pengepala berwarna krim dengan garisan hitam → pecahan dua lajur (55% papan dam pada halaman utama / 45% grid dua lajur kad produk) → jalur berwarna krim di pengaki. Pada mudah alih, halaman utama dilipat menjadi papan dam lebar penuh dan grid menjadi susun atur lajur tunggal. Kad diagihkan secara sama rata dalam grid dua lajur dengan pembahagi Piksel kelabu (#e5e7eb) di antaranya. Jarak antara bahagian adalah minimum (43–61px), dan antara muka tidak pernah menggunakan jalur gelap yang merangkumi keseluruhan lebar halaman—kanvas krim dipaparkan tanpa gangguan.
Gambar topi dengan latar belakang krim bersih, di tengah dan dipotong rapat, dengan bayang-bayang hitam pekat yang lembut di bawahnya. Tiada gaya hidup, tiada model, tiada konteks—topi itu bintangnya. Corak papan dam di belakang elemen utama berfungsi sebagai permukaan grafik. Tiada ilustrasi, tiada pemaparan 3D kecuali untuk togol realiti imbuhan, tiada ikon hiasan kecuali untuk palang piksel dalam logo.
Palet
Jenama
- Marquee Orange
#faa21f— Bar pemberitahuan di bahagian atas skrin, elemen aksen, penjenamaan. - Buy Green
#128e44— Butang "TAMBAH KE TROLI" telah diisi - satu-satunya tindakan pembelian yang ditanda dengan warna hijau.
Neutral
- Arcade Cream
#f3e5df— Latar belakang halaman, permukaan kad produk, sisipan butang. - Ink Black
#000000— Teks utama, susun atur papan dam, semua sempadan UI, garisan kad, sempadan ikon. - Pixel Gray
#e5e7eb— Sempadan nipis, pembahagi kad, peraturan struktur antara sel grid. - Charcoal
#333333— Nada permukaan sekunder, petak bayang papan dam, warna bayang - Carbon
#151515— Nada neutral yang kaya untuk ilustrasi pengisian dan jubin papan dam yang paling padat. - Muted Gray
#737373— Teks dinyahdayakan/dibisukan pada butang dan dalam teks isi
Tipografi
dari 10 hingga 18px · 4 langkah
- Arcade — penggantian: VT323 · garis besar 400, 700 · Satu fon digunakan di seluruh antara muka—semua tajuk, label, harga, butang, teks isi dan ikon berada dalam Arcade. Peralihan dari 400 ke 700 adalah satu-satunya alat untuk mencipta hierarki; menggunakan fon kedua akan merosakkan ilusi kiosk.
Selang dan bentuk
| Tujuan | Maksudnya |
|---|---|
| Ketumpatan | padat |
| Langkah asas | 4-8px |
| Jejari butang | 6px |
| Jejari kad | 12px |
| Bayang-bayang | tiada - sempadan dan bukannya bayang-bayang |
| Antara bahagian | 43-61px |
| Lebar halaman | 1200px |
AI akan membina laman web anda dalam gaya FRANKY'S 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
- 099 SUPPLY — Dinding galeri yang dipenuhi dengan objek hitam putih
- teenage engineering — Katalog perindustrian dalam pencahayaan studio - produk adalah satu-satunya objek penting pada halaman, dan semua perkara lain dibincangkan di sekelilingnya
- Custo — Sebuah galeri berwarna gunmetal dengan fon monolitik. Bilik pameran dalam rona kelabu-hijau yang disenyapkan, di mana satu objek gelap dan fon 57px bercakap untuk diri mereka sendiri.
- Walden — Kesunyian lantai hutan - setiap produk adalah batu, setiap piksel adalah lumut dan kesunyian
- Fiverr — Titik fokus bazar digital ini ialah denyutan hijau yang bertenaga di hadapan pentas teater yang gelap. Satu titik hijau neon berfungsi sebagai sauh untuk logo; selebihnya adalah monokrom, direka untuk menonjolkan daya tarikan perkhidmatan yang ditawarkan.
- Peloton — Sebuah lampu merah di atas pentas peragaan yang gelap gelita. Sebuah bilik pameran kecergasan di mana satu papan tanda CTA berwarna merah terang memotong ruang pameran yang luas dan gelap dan menuju ke bilik produk yang bersih dan putih.
- HOUSEPLANT — sebuah kedai buku dengan kacang di atas kertas linen
- Adam Lippes — Sebuah studio editorial monokrom di atas kertas krim – hamparan Vogue yang satu-satunya hiasannya ialah grid susun atur, bukan palet warna.
- Elektron — Panel kawalan peralatan pada tengah malam bagaikan kanvas yang hampir hitam, di mana foto produk bersinar manakala antara muka kekal hampir tidak kelihatan.
- Sigmaphoto — Galeri Instrumen Kejituan Monokrom ialah sebuah bilik putih yang tenang di mana satu-satunya warna yang penting ialah warna yang memanggil anda untuk bertindak.
- Channel Studio — Makmal foto studio dengan satu tudung lampu karang
- Specht Studio — Dinding galeri yang dipenuhi dengan rasa ingin tahu yang tersembunyi. Kemasan krom studio itu sendiri ialah permukaan putih dan huruf hitam; bunga api visual tertumpu sepenuhnya dalam kerja jubin projek.