Dub
Panel kontrol kertas beras matte milik Link
Sistem visual Dub memiliki estetika SaaS yang terkendali, hampir seperti editorial: kanvas hampir putih yang disatukan oleh batas tipis alih-alih elemen yang menonjol, dengan tipografi monokrom padat yang memberikan dukungan struktural dan satu warna biru cerah (#2563eb) yang memberikan pernyataan. Permukaan tetap datar dan tanpa bingkai pada pandangan pertama, tetapi setiap kontainer memiliki margin 1px #e5e5e5, membangkitkan nuansa dokumen cetak. Kepribadian dicapai melalui serangkaian kecil aksen "pil" berwarna (oranye, hijau, ungu) yang melayang di atas palet netral, dan header yang terasa percaya diri dan modern tanpa mencolok. Komponennya kompak dan padat: jarak antar elemen 8px, radius kartu 12px, label berbentuk pil pada 9999px, dan kontrol tak terlihat alih-alih tombol yang berat dan penuh.
Halaman ini dibangun dengan tata letak terpusat dengan lebar maksimum sekitar 1200px. Elemen utamanya adalah blok teks terpusat dengan tiga elemen mengambang (Program Afiliasi, Analisis Konversi, Tautan Pendek) yang diposisikan secara horizontal di atas tata letak produk yang besar. Bagian-bagiannya disusun secara vertikal dengan jarak antar bagian yang konsisten sebesar 64px, bergantian antara kanvas putih dan efek kabut kertas #f5f5f5 untuk pemisahan tonal. Bagian bawah menggunakan tata letak berbentuk Z: teks editorial dipusatkan di sepertiga bagian tengah, dan kartu UI mengambang ditambatkan ke margin kiri dan kanan, menciptakan ritme asimetris seperti majalah. Awan logo adalah grid sederhana 5x2, yang dipusatkan di halaman. Navigasi berupa bilah atas minimalis—logo di sebelah kiri, navigasi di tengah, sekelompok dua tombol (tombol "Login" transparan + tombol "Daftar" yang terisi) di sebelah kanan—tanpa menu tetap atau mega-menu. Tata letak dasbor jendela utama menampilkan tata letak aplikasi dua kolom klasik: bilah sisi tetap (mirip dengan 240px) + area konten yang menentukan kepadatan informasi produk untuk pengunjung sebelum mereka mulai menggulir.
Tampilan visualnya berfokus pada produk, bukan gaya hidup. Layar utama berpusat pada tangkapan layar dasbor besar, yang mewakili maket produk dunia nyata dengan navigasi sidebar, tabel data, dan elemen UI mengambang, yang ditata sebagai panel datar di atas kanvas putih. Logo klien ditampilkan dalam grid skala abu-abu yang pudar (Beehiv, Superpower, Chatbase, dll.) untuk mengakui kinerja media sosial mereka, tanpa warna agar aksen biru tunggal halaman tetap dominan. Kartu mitra mengambang (profil kecil dan ubin dengan data pendapatan/pembayaran) bergerak di sekitar blok teks editorial di bagian bawah, menciptakan kesan kedalaman tanpa menggunakan bayangan pada teks itu sendiri. Pola latar belakang grid titik-titik adalah fitur khas: deretan tipis titik-titik kecil dengan opasitas sangat rendah menciptakan tekstur dan nuansa sistem desain/permukaan gambar, menekankan posisi situs sebagai "platform atribusi tautan modern". Ikonografinya minimalis, dengan garis luar dan isian, dan menggunakan palet aksen (oranye tangerine, ungu lavender, hijau mint) untuk tag fitur. Tidak ada foto, ilustrasi, atau model 3D yang digunakan—antarmuka pengguna produk itu sendiri adalah bahasa visual.
Palet
Merek
- Electric Blue
#2563eb— Warna utama merek—logo, tautan, indikator kinerja utama, status aktif, dan aksen ikon—digunakan. Warna biru pekat pada latar belakang putih menciptakan daya tarik visual tunggal dari sistem ini. - Deep Sapphire
#1e40af— Latar belakang utama tombol aksi, yaitu warna tebal ajakan bertindak—satu-satunya warna yang menunjukkan tindakan tersebut—digunakan secara hemat untuk menarik perhatian.
Netral
- Canvas White
#ffffff— Latar belakang halaman, permukaan kartu, dan panel pop-up adalah fondasi utama dari setiap layar. - Paper Mist
#f5f5f5— Perubahan warna yang halus saat kursor diarahkan ke kartu bersarang, panel tambahan, dan isian. - Ash
#e5e5e5— Garis tepi tipis pada kartu, konektor input, dan pembatas merupakan garis struktural yang menyatukan sistem. - Smoke
#d4d4d4— Garis tepi yang lebih tajam untuk kontainer tertentu dan tambahan garis luar tombol. - Pebble
#c8c8c8— Garis tepi, garis kontrol, dan pembatas struktural dengan kontras sedang. Warna ini tidak boleh digunakan sebagai warna utama untuk ajakan bertindak (call to action). - Midnight Ink
#0a0a0a— Teks utama tombol, tombol yang disorot, dan teks navigasi hampir berwarna hitam untuk kontras maksimal.
Tipografi
dari 11 hingga 48px · 9 langkah
- Satoshi — penggantian: Inter (weight 500 · garis besar 500 · Judul Tampilan – hanya digunakan dalam baris 36–48px untuk judul dan subjudul. Ketebalan huruf – 500 (sedang, bukan tebal): Judul terlihat percaya diri dan modern, tetapi tidak pernah berlebihan. Proporsi geometris Satoshi memberikan jenis huruf ini nuansa editorial dan modern yang tidak dapat ditiru oleh teks isi Inter.
- Inter — penggantian: Inter (native) · garis besar 400, 500, 600 · Teks isi, label UI, navigasi, subjudul, dan judul kecil. Font Inter adalah font utama yang menangani segala hal mulai dari label mikro 11px hingga judul sekunder 30px. Bobot 400 adalah default untuk teks isi, 500 untuk elemen yang disorot dan label tombol, dan 600 dikhususkan untuk label UI penting. Ukuran 16px dengan tinggi baris 1,5 adalah ukuran satu langkah yang paling sering ditemui (1220 kali), yang menegaskan bahwa 16px adalah ukuran teks isi standar.
- Geist Mono — penggantian: JetBrains Mono or IBM Plex Mono · garis besar 400, 500 · Cuplikan kode, metadata teknis, dan token monospasi yang disematkan digunakan dalam blok kode pada ukuran 12–14px dan dalam elemen tampilan kode besar pada ukuran 24px. Hal ini memastikan kredibilitas alat pengembang, konsisten dengan posisi produk Dub.
Interval dan bentuk
| Tujuan | Arti |
|---|---|
| Kepadatan | rata-rata |
| Langkah dasar | 8px |
| Radius tombol | 8px |
| Radius kartu | 12px |
| Bayangan | tidak - batas, bukan bayangan |
| Di antara bagian-bagiannya | 64px |
| Lebar halaman | 1200px |
AI akan membangun situs web Anda dengan gaya Dub 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
- ElevenLabs — Esai foto dalam nuansa krem hangat dengan judul yang halus. Sebuah buku catatan bergaya Bauhaus—kertas berwarna putih telur, tinta hitam, dan aksen ungu dan oranye tunggal untuk tampilan produk.
- Awesomic — Jaring seng editorial dengan tanda baca oranye yang mengingatkan pada confetti.
- Monad — jurnal teknis editorial tentang perkamen hangat
- Seline Analytics — Sebuah tabel analitis yang tenang di atas kertas hangat.
- Notion — Sebuah buku catatan kertas hangat di bawah terik matahari siang.
- Anthropic — Jurnal ilmiah lapangan di atas kertas vellum hangat—permukaan gading yang tenang, judul editorial berserif, dan aksen tanah liat tunggal yang hanya muncul ketika diperlukan tindakan.
- Calendly — Tinta biru tua di atas marmer dingin
- Augen Pro — Presentasi serba putih Apple menampilkan warna biru elektrik yang klinis dan ringan sebagai satu-satunya aksen di ruang monokrom.
- Antimetal — Sebuah catatan editorial di atas kertas krem—pagi yang tenang di sebuah jurnal ilmiah, di mana sikap menahan diri menyampaikan kepercayaan diri dan huruf serif melakukan tugas berat.
- Perk — Kapur elektrik di atas kertas perkamen hangat
- Ditto — Sebuah bengkel yang diterangi sinar matahari sedang membuat sampel bunga liar. Permukaan krem yang hangat, warna dasar kuning yang cerah, tinta biru tua yang pekat, bentuk warna organik yang bermekaran di belakang karya tersebut.
- Officevibe — Sebuah majalah editorial dengan kertas berwarna krem hangat. Bayangkan sebuah esai mendalam tentang manajemen SDM, yang disajikan sebagai sebuah produk—font serif kursif yang berbisik melalui antarmuka biru modern.