Framer
galeri neon di kehampaan
Framer beroperasi dalam kegelapan total—kanvas hitam tempat konten melayang seperti papan neon di pembukaan galeri. Judul, yang diatur dalam GT Walsheim Medium dengan spasi baris rapat 0,8–1,1 dan spasi huruf negatif yang agresif (-0,04em pada 54px), menciptakan tipografi dekoratif yang padat yang mendorong ke depan daripada tertata rapi di halaman. Warna biru elektrik tunggal (#0099ff) memberikan semua aksen fungsional—batas, cahaya, ikon, status aktif—sementara bagian antarmuka lainnya tetap akromatik, mengandalkan transisi abu-abu halus (#111, #171717, #242424) untuk menciptakan kedalaman dari warna hitam pekat. Komponen terasa dipertimbangkan daripada dekoratif: radius membulat 8–25px, batas tipis 1px, bayangan jatuh minimal, dan permukaan transparan yang memungkinkan kekosongan bersinar.
Bagian-bagian dengan lebar penuh meluas melampaui kanvas hitam, dengan konten dibatasi hingga lebar maksimum sekitar 1200px dan dipusatkan di dalamnya. Bagian utama menampilkan header yang rata kiri dan satu tombol ajakan bertindak (CTA), dengan sisi kanan sengaja dibiarkan kosong—secara asimetris, tidak dipusatkan. Bagian-bagian bergantian antara tata letak hanya teks (header besar + subteks) dan tangkapan layar produk. Bagian "Dilengkapi dengan Framer" menggunakan dinding logo dalam grid 4 kolom. Di bagian komunitas, tangkapan layar produk ditempatkan di dalam wadah lebar penuh yang dipusatkan dengan sudut membulat. Navigasi minimal—bilah atas tipis dengan logo di sebelah kiri dan tautan yang sejajar di sebelah kanan, tanpa kontrol yang terlihat. Ritme bagian: celah vertikal 80px yang signifikan antara bagian-bagian, menciptakan pulau-pulau konten yang berbeda yang mengambang di ruang kosong.
Tangkapan layar antarmuka pengguna produk mendominasi—dibingkai oleh jendela mirip krom dengan titik-titik lampu lalu lintas, tangkapan layar aplikasi yang disematkan menjadi gambar utama. Logo, yang berfungsi sebagai bukti kualitas, disajikan dalam huruf putih di latar belakang hitam dengan spasi lebar. Tidak ada foto, ilustrasi, atau grafik abstrak yang digunakan—bahasa visualnya adalah produk itu sendiri, ditampilkan sebagai antarmuka yang hidup. Gaya ikon: minimalis, bergaris luar, monokrom, dan putih dalam ukuran kecil. Kepadatan teks: didominasi teks, dengan fragmen besar sesekali berupa tangkapan layar produk. Keseimbangan visual ruang jelas lebih mengutamakan tipografi daripada gambar.
Palet
Merek
- Vivid Violet
#0066ff— Tombol aksi utama adalah satu-satunya tempat di antarmuka yang menampilkan latar belakang tombol berwarna solid.
Netral
- Bone
#ffffff— Judul utama, teks utama dengan latar belakang gelap, latar belakang tombol adalah satu-satunya sumber cahaya. - Void
#000000— Kanvas halaman, latar belakang navigasi, permukaan kartu, isian ikon—semuanya berwarna hitam pekat yang menyerap semua konten yang tidak penting. - Graphite
#111111— Permukaan kartu yang timbul merupakan langkah maju di atas kekosongan—kartu berukuran besar dan fungsional serta wadah modal. - Obsidian
#171717— Permukaan perantara untuk tombol, kartu tambahan, isian UI - memisahkan elemen interaktif dari kanvas. - Slate
#242424— Saat diarahkan kursor, kolom input dan panel yang menjorok ke dalam akan berwarna netral paling terang sebelum beralih ke format teks. - Ash
#333333— Pengisian mendalam untuk gambar latar belakang dan elemen struktural yang tidak aktif.
Tipografi
dari 12 hingga 68px · 8 langkah
- sans-serif — penggantian: Inter · garis besar 400 · sans-serif - ditemukan dalam data yang diekstrak tetapi tidak dijelaskan oleh AI.
- GT Walsheim — penggantian: Inter Tight · garis besar 500 · Font untuk judul dan subjudul adalah font merek. Font ini sangat padat, dengan spasi baris 0,8–1,1 dan spasi huruf -0,04em hingga -0,05em dalam rentang 44–68px. Ini bukan elemen dekoratif; kehangatan geometris GT Walsheim, dikombinasikan dengan metrik yang ketat, menciptakan suara sistem—percaya diri, ringkas, dan sedikit futuristik. Untuk ekspresi geometris serupa, pertimbangkan Inter Tight atau Space Grotesk Bold.
- Inter Variable — penggantian: Inter · garis besar 400 · Teks utama, navigasi, dan judul sekunder adalah elemen utama yang digunakan. Sumbu Variabel Inter memungkinkan interpolasi bobot yang halus. Pelacakan menyempit seiring bertambahnya ukuran: dari -0,001em hingga 18px dan dari -0,027em hingga 22px. Versi variabel memungkinkan animasi mikro yang halus pada situs. Pengganti: Inter ( Google) – alternatif yang hampir identik.
Interval dan bentuk
| Tujuan | Arti |
|---|---|
| Kepadatan | rata-rata |
| Langkah dasar | 10px |
| Radius tombol | 9999px |
| Radius kartu | 20px |
| Bayangan | tidak - batas, bukan bayangan |
| Di antara bagian-bagiannya | 80px |
| Lebar halaman | 1200px |
AI akan membangun situs web Anda dengan gaya Framer 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
- Auros — Terminal abyssal dengan bola data bioluminescent.
- Origin Financial — Sebuah galeri tengah malam yang penuh kemewahan yang tenang. Sebuah ruangan yang sunyi, hampir gelap, di mana font serif besar dan beberapa panel berwarna yang bercahaya menciptakan perasaan bahwa keuangan adalah sebuah karya seni yang dikurasi dengan cermat.
- Raycast — Pusat Komando Tengah Malam, Neon Karang
- Dimension — sebuah area kerja yang diterangi cahaya senja dengan panel kaca buram.
- Reflect Notes — Ruang ungu berbintang adalah observatorium gelap tempat not-not melayang seperti rasi bintang dengan latar belakang kekosongan nila yang hampir hitam.
- Ameba — Ruang kendali di tengah malam – denyutan biru elektrik di dalam panel kaca buram.
- Branding — Dinding galeri hitam, aksen merah darah - Huruf-huruf putih besar melayang di atas kanvas gelap yang menyerupai ruang hampa, diselingi oleh satu aksen merah terang dan elemen dekoratif mencolok yang lebih mirip papan nama galeri daripada antarmuka web.
- Harness — Ruang Kontrol Misi di tengah malam dengan aksen hijau berpendar
- Koto — Galeri Obsidian di tengah malam. Panggung yang hampir gelap gulita, di mana satu-satunya sumber cahaya hangat adalah sebuah spidol kuning, dan teks yang padat melayang di ruang kosong yang luas seperti poster pameran.
- Ohzi — Sebuah kubus bercahaya tergantung di galeri yang gelap.
- Depot — Terminal server berwarna gelap. Konsol pengembang yang hampir hitam, dengan satu LED hijau yang menandakan dimulainya pekerjaan, dan sisa antarmuka pengguna ditampilkan dalam warna grafit.
- Maciej Zadykowicz — Midnight Gallery dengan mural kaleidoskopiknya adalah dinding studio yang hampir hitam, di mana satu karya seni tipografi yang cerah dan penuh warna menarik perhatian, sementara segala sesuatu yang lain tetap tenang dan terencana.