Dub
Panel kawalan kertas beras matte Link
Sistem visual Dub mempunyai estetika SaaS yang terkawal dan hampir seperti editorial: kanvas hampir putih yang disatukan oleh sempadan nipis dan bukannya elemen yang menonjol, dengan tipografi monokrom yang padat memberikan sokongan struktur dan satu warna biru terang (#2563eb) yang memberikan kenyataan. Permukaan kekal rata dan tanpa bingkai pada pandangan pertama, tetapi setiap bekas mempunyai margin 1px #e5e5e5, yang membangkitkan rasa dokumen yang dicetak. Personaliti dicapai melalui satu set kecil aksen "pil" berwarna (oren, hijau, ungu) yang terapung di atas palet neutral, dan pengepala yang terasa yakin dan moden tanpa kelihatan mencolok. Komponennya padat dan padat: talang 8px, jejari kad 12px, label berbentuk pil pada 9999px, dan kawalan halimunan dan bukannya butang yang berat dan berisi.
Halaman ini dibina pada susun atur berpusat dengan lebar maksimum kira-kira 1200px. Elemen utama ialah blok teks berpusat dengan tiga elemen terapung (Program Gabungan, Analitis Penukaran, Pautan Pendek) yang diletakkan secara mendatar di atas susun atur produk yang besar. Bahagian disusun secara menegak dengan talang 64px yang konsisten, berselang-seli antara kanvas putih dan jerebu kertas #f5f5f5 untuk pemisahan ton. Bahagian bawah menggunakan susun atur berbentuk Z: teks editorial berpusat di sepertiga tengah, dan kad UI terapung disauhkan pada margin kiri dan kanan, mewujudkan irama asimetri seperti majalah. Awan logo ialah grid 5x2 ringkas, berpusat pada halaman. Navigasi ialah bar atas minimalis—logo di sebelah kiri, navigasi di tengah, sekumpulan dua butang (butang "Log Masuk" hantu + butang "Daftar" yang diisi) di sebelah kanan—tanpa menu tetap atau mega. Susun atur papan pemuka tetingkap utama mempamerkan susun atur aplikasi dua lajur klasik: bar sisi tetap (serupa dengan 240px) + kawasan kandungan yang menentukan kepadatan maklumat produk untuk pelawat sebelum mereka mula menatal.
Visualnya tertumpu pada produk, bukan gaya hidup. Skrin utama berpusat pada tangkapan skrin papan pemuka yang besar, mewakili mockup produk dunia sebenar dengan navigasi bar sisi, jadual data dan elemen UI terapung, dibentangkan sebagai panel rata pada kanvas putih. Logo pelanggan dipaparkan dalam grid skala kelabu tepu (beehiv, superpower, Chatbase, dll.) untuk mengiktiraf prestasi media sosial mereka, dilucutkan warna untuk membolehkan aksen biru tunggal halaman kekal dominan. Kad rakan kongsi terapung (profil kecil dan jubin dengan data hasil/pembayaran) bergerak di sekitar blok teks editorial di bahagian bawah, mewujudkan rasa kedalaman tanpa menggunakan bayang-bayang pada teks itu sendiri. Corak latar belakang grid bertitik ialah ciri khas: deretan titik kecil nipis dengan kelegapan yang sangat rendah mencipta tekstur dan rasa sistem reka bentuk/permukaan lukisan, menekankan kedudukan tapak sebagai "platform atribusi pautan moden." Ikonografi adalah minimum, dengan garis besar dan isian, dan menggunakan palet aksen (oren tangerin, ungu lavender, hijau pudina) untuk tag ciri. Tiada gambar, ilustrasi atau model 3D digunakan—antara muka pengguna produk itu sendiri ialah bahasa visual.
Palet
Jenama
- Electric Blue
#2563eb— Warna jenama utama—logo, pautan, penunjuk prestasi utama, keadaan aktif dan aksen ikon—digunakan. Warna biru pekat pada latar belakang putih mencipta satu-satunya daya tarikan visual sistem. - Deep Sapphire
#1e40af— Latar belakang utama butang tindakan, iaitu isian tebal bagi seruan bertindak—satu-satunya warna yang menunjukkan tindakan—digunakan secara berhati-hati untuk menarik perhatian.
Neutral
- Canvas White
#ffffff— Latar belakang halaman, permukaan kad, panel timbul merupakan asas mutlak setiap skrin. - Paper Mist
#f5f5f5— Perubahan warna hover yang halus untuk kad bersarang, panel tambahan dan isian. - Ash
#e5e5e5— Sempadan nipis pada kad, penyambung input dan pembahagi ialah garis struktur yang menyatukan sistem. - Smoke
#d4d4d4— Sempadan yang lebih tajam untuk bekas terpilih dan garisan butang tambahan. - Pebble
#c8c8c8— Sempadan, garis kawalan dan pembahagi struktur dengan kontras sederhana. Warna ini tidak boleh digunakan sebagai warna utama untuk seruan bertindak. - Midnight Ink
#0a0a0a— Teks utama butang, butang yang diserlahkan dan teks navigasi hampir hitam untuk kontras maksimum.
Tipografi
dari 11 hingga 48px · 9 langkah
- Satoshi — penggantian: Inter (weight 500 · garis besar 500 · Paparan Tajuk – hanya digunakan dalam baris 36–48px untuk tajuk dan tajuk bahagian. Berat fon – 500 (sederhana, tidak tebal): Tajuk kelihatan yakin dan moden, tetapi tidak pernah terlalu menonjol. Perkadaran geometri Satoshi memberikan rupa taip sedikit nuansa editorial dan moden yang tidak dapat ditiru oleh salinan badan Inter.
- Inter — penggantian: Inter (native) · garis besar 400, 500, 600 · Salinan isi kandungan, label UI, navigasi, subtajuk dan tajuk kecil. Inter ialah tugasan utama, mengendalikan segala-galanya daripada label mikro 11px hingga tajuk sekunder 30px. Pemberat 400 ialah lalai untuk salinan isi kandungan, 500 untuk elemen yang diserlahkan dan label butang dan 600 dikhaskan untuk label UI yang penting. 16px dengan ketinggian baris 1.5 ialah saiz langkah tunggal yang paling kerap ditemui (1220 kejadian), mengesahkan bahawa 16px ialah saiz salinan isi kandungan kanonik.
- Geist Mono — penggantian: JetBrains Mono or IBM Plex Mono · garis besar 400, 500 · Coretan kod, metadata teknikal dan token monospace terbenam digunakan dalam blok kod pada 12–14px dan dalam elemen paparan kod besar pada 24px. Ini memastikan kredibiliti alat pembangun, selaras dengan kedudukan produk Dub.
Selang dan bentuk
| Tujuan | Maksudnya |
|---|---|
| Ketumpatan | purata |
| Langkah asas | 8px |
| Jejari butang | 8px |
| Jejari kad | 12px |
| Bayang-bayang | tiada - sempadan dan bukannya bayang-bayang |
| Antara bahagian | 64px |
| Lebar halaman | 1200px |
AI akan membina laman web anda dalam gaya Dub 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
- ElevenLabs — Esei foto dalam rona krim hangat dengan tajuk utama yang halus. Buku nota gaya Bauhaus—kertas berwarna kulit telur, dakwat hitam dan satu aksen ungu dan oren untuk paparan produk.
- Awesomic — Jaring zink editorial dengan tanda baca oren yang mengingatkan pada konfeti
- Monad — jurnal teknikal editorial mengenai perkamen hangat
- Seline Analytics — Jadual analitik yang tenang di atas kertas suam
- Notion — Buku nota kertas yang hangat di bawah sinaran matahari tengah hari
- Anthropic — Jurnal lapangan saintifik mengenai vellum hangat—permukaan gading yang tenang, tajuk editorial serif dan aksen tanah liat tunggal yang hanya muncul apabila tindakan diperlukan.
- Calendly — Dakwat biru tua pada marmar sejuk
- Augen Pro — Pembentangan putih Apple menampilkan warna biru elektrik klinikal, tanpa berat sebagai satu-satunya aksen dalam ruang monokrom.
- Antimetal — Kronik editorial di atas kertas krim—pagi yang tenang di jurnal saintifik, di mana kekangan menyampaikan keyakinan dan serif melakukan tugas yang berat
- Perk — Kapur elektrik di atas kertas parchment yang suam
- Ditto — Sebuah bengkel yang disinari cahaya matahari menghasilkan sampel bunga liar. Permukaan krim hangat, warna asas kuning terang, dakwat biru laut pekat, bentuk warna organik mekar di sebalik karya itu.
- Officevibe — Sebuah majalah editorial di atas kertas berwarna krim suam. Bayangkan sebuah esei yang bernas tentang pengurusan HR, yang dibentangkan sebagai satu produk—fon serif kursif yang berbisik melalui antara muka biru moden.