Framer
galeri neon dalam kekosongan
Framer beroperasi sebagai kegelapan hampir sepenuhnya—kanvas hitam di mana kandungan melayang seperti papan tanda neon di bukaan galeri. Tajuk utama, yang ditetapkan dalam GT Walsheim Medium dengan jarak baris yang ketat 0.8–1.1 dan jarak huruf negatif yang agresif (-0.04em pada 54px), mencipta rupa taip hiasan yang padat yang menolak ke hadapan dan bukannya terletak kemas di halaman. Satu warna biru elektrik tunggal (#0099ff) menyediakan semua aksen berfungsi—sempadan, cahaya, ikon, keadaan aktif—manakala antara muka yang lain kekal akromatik, bergantung pada peralihan kelabu halus (#111, #171717, #242424) untuk mencipta kedalaman daripada warna hitam tulen. Komponen terasa dipertimbangkan dan bukannya hiasan: jejari bulat 8–25px, sempadan nipis 1px, bayang-bayang jatuh minimum dan permukaan lut sinar yang membolehkan kekosongan bersinar.
Bahagian lebar penuh melangkaui kanvas hitam, dengan kandungan dihadkan kepada lebar maksimum ~1200px dan berpusat di dalamnya. Bahagian utama menampilkan pengepala sejajar kiri dan satu butang seruan bertindak (CTA), dengan sebelah kanan sengaja dibiarkan kosong—secara tidak simetri, tidak berpusat. Bahagian berselang-seli antara susun atur teks sahaja (pengepala besar + subteks) dan tangkapan skrin produk. Bahagian "Dilengkapi dengan Framer" menggunakan dinding logo dalam grid 4 lajur. Dalam bahagian komuniti, tangkapan skrin produk diletakkan di dalam bekas selebar penuh berpusat dengan sudut bulat. Navigasi adalah minimum—bar atas nipis dengan logo di sebelah kiri dan pautan sejajar ke kanan, tanpa kawalan yang kelihatan. Ritma bahagian: jurang menegak 80px yang ketara antara bahagian, mewujudkan pulau kandungan yang berbeza terapung dalam kekosongan.
Tangkapan skrin antara muka pengguna produk mendominasi—dibingkai oleh tetingkap seperti krom dengan titik lampu isyarat, tangkapan skrin aplikasi yang terbenam menjadi imej utama. Logo, yang berfungsi sebagai bukti kualiti, dibentangkan dalam huruf putih pada latar belakang hitam dengan jarak yang luas. Tiada gambar, ilustrasi atau grafik abstrak digunakan—bahasa visual ialah produk itu sendiri, dipaparkan sebagai antara muka hidup. Gaya ikon: minimalis, bergaris, monokrom dan putih dalam saiz kecil. Ketumpatan teks: kebanyakannya teks, dengan serpihan besar sekali-sekala dalam bentuk tangkapan skrin produk. Keseimbangan visual ruang jelas mengutamakan tipografi berbanding imej.
Palet
Jenama
- Vivid Violet
#0066ff— Butang tindakan utama ialah satu-satunya tempat dalam antara muka di mana latar belakang butang berwarna pepejal dipaparkan.
Neutral
- Bone
#ffffff— Tajuk utama, teks utama pada latar belakang gelap, latar belakang butang adalah satu-satunya sumber cahaya. - Void
#000000— Kanvas halaman, latar belakang navigasi, permukaan kad, isian ikon—semuanya merupakan warna hitam tanpa henti yang menyerap semua kandungan yang tidak penting. - Graphite
#111111— Permukaan kad yang dinaikkan adalah satu langkah di atas lompang—kad besar yang berfungsi dan bekas modal. - Obsidian
#171717— Permukaan perantaraan untuk butang, kad tambahan, isian UI - memisahkan elemen interaktif daripada kanvas. - Slate
#242424— Semasa melayang, medan input dan panel yang diinden ialah rona neutral paling terang sebelum bertukar kepada format teks. - Ash
#333333— Isian mendalam untuk imej latar belakang dan elemen struktur yang tidak aktif.
Tipografi
dari 12 hingga 68px · 8 langkah
- sans-serif — penggantian: Inter · garis besar 400 · sans-serif - terdapat dalam data yang diekstrak tetapi tidak diterangkan oleh AI.
- GT Walsheim — penggantian: Inter Tight · garis besar 500 · Fon untuk tajuk dan tajuk utama ialah fon jenama. Ia dipadatkan secara agresif, dengan jarak baris 0.8–1.1 dan jarak huruf -0.04em hingga -0.05em dalam julat 44–68px. Ia bukan elemen hiasan; kehangatan geometri GT Walsheim, digabungkan dengan metrik yang ketat, mencipta suara sistem—yakin, padat dan sedikit futuristik. Untuk ekspresi geometri yang serupa, pertimbangkan Inter Tight atau Space Grotesk Bold.
- Inter Variable — penggantian: Inter · garis besar 400 · Teks utama, navigasi dan tajuk sekunder merupakan bahagian penting. Paksi Antara Pembolehubah membolehkan interpolasi pemberat yang lancar. Penjejakan menyempit apabila saiz meningkat: dari -0.001em kepada 18px dan kepada -0.027em kepada 22px. Versi boleh ubah membolehkan animasi mikro tapak yang lancar. Penggantian: Inter ( Google) – sandaran yang hampir sama.
Selang dan bentuk
| Tujuan | Maksudnya |
|---|---|
| Ketumpatan | purata |
| Langkah asas | 10px |
| Jejari butang | 9999px |
| Jejari kad | 20px |
| Bayang-bayang | tiada - sempadan dan bukannya bayang-bayang |
| Antara bahagian | 80px |
| Lebar halaman | 1200px |
AI akan membina laman web anda dalam gaya Framer 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
- Auros — Terminal abisal dengan bola data bioluminesen
- Origin Financial — Sebuah galeri tengah malam yang penuh dengan kemewahan yang tenang. Sebuah bilik yang sunyi dan hampir gelap di mana fon serif yang besar dan beberapa panel berwarna yang diterangi mencipta perasaan bahawa kewangan adalah karya seni yang dikurasi dengan teliti.
- Raycast — Pusat Perintah Tengah Malam, Coral Neon
- Dimension — stesen kerja yang diterangi cahaya senja dengan panel kaca berkabut
- Reflect Notes — Angkasa ungu berbintang merupakan sebuah balai cerap gelap di mana nota-nota terapung seperti buruj dengan latar belakang kekosongan nila yang hampir hitam.
- Ameba — Bilik kawalan pada tengah malam – denyutan biru elektrik di dalam panel kaca berkabut
- Branding — Dinding galeri hitam, aksen merah darah - Fon putih besar terapung di atas kanvas gelap yang menyerupai lompang, diganggu oleh satu aksen merah terang dan elemen hiasan menarik yang lebih kelihatan seperti papan tanda galeri daripada antara muka web.
- Harness — Kawalan Misi pada tengah malam dengan aksen hijau berpendar
- Koto — Galeri Obsidian pada tengah malam. Sebuah pentas yang hampir gelap gelita, di mana satu-satunya sumber cahaya hangat hanyalah penanda kuning tunggal, dan jenis pekat terapung di ruang negatif yang luas seperti poster pameran.
- Ohzi — Sebuah kiub bercahaya tergantung di galeri gelap
- Depot — Terminal pelayan gelap. Konsol pembangun yang hampir hitam, dengan satu LED hijau menandakan permulaan kerja, dan selebihnya antara muka pengguna dipaparkan dalam grafit.
- Maciej Zadykowicz — Galeri Tengah Malam dengan mural kaleidoskopiknya ialah dinding studio yang hampir hitam di mana satu karya seni tipografi yang berwarna-warni dan bertenaga menarik perhatian sementara yang lain kekal senyap dan disengajakan.