Dub
Panel kontrol kertas beras matte Link
Sistem visual Dub nduwèni estetika SaaS sing kalem lan meh kaya editorial: kanvas sing meh putih digabungake karo wates tipis tinimbang unsur sing nonjol, kanthi tipografi monokrom sing padhet sing nyedhiyakake dhukungan struktural lan siji warna biru padhang (#2563eb) sing nggawe pernyataan. Permukaan tetep rata lan tanpa pigura ing pandangan pertama, nanging saben wadhah nduwèni margin 1px #e5e5e5, sing ngélingaké rasa dokumen sing dicithak. Kepribadian digayuh liwat aksen "pil" warna cilik (oranye, ijo, ungu) sing ngambang ing ndhuwur palet netral, lan header sing krasa percaya diri lan modern tanpa mencolok. Komponen kompak lan padhet: talang 8px, radius kertu 12px, label berbentuk pil ing 9999px, lan kontrol sing ora katon tinimbang tombol sing abot lan kebak.
Kaca iki dibangun nganggo tata letak sing ana ing tengah kanthi jembar maksimal kira-kira 1200px. Unsur utama yaiku blok teks sing ana ing tengah kanthi telung unsur ngambang (Program Afiliasi, Analitik Konversi, Pranala Cekak) sing diposisikake kanthi horisontal ing ndhuwur tata letak produk sing gedhe. Bagean-bagean disusun kanthi vertikal kanthi talang 64px sing konsisten, silih ganti antarane kanvas putih lan kabut kertas #f5f5f5 kanggo pamisahan tonal. Bagean ngisor nggunakake tata letak berbentuk Z: teks editorial ana ing tengah ing tengah, lan kertu UI sing ngambang dipasang ing margin kiwa lan tengen, nggawe irama asimetris kaya majalah. Awan logo minangka kothak 5x2 sing prasaja, ana ing tengah kaca. Navigasi minangka bilah ndhuwur minimalis—logo ing sisih kiwa, navigasi ing tengah, saklompok rong tombol (tombol "Login" hantu + tombol "Register" sing diisi) ing sisih tengen—tanpa menu tetep utawa mega-menu. Tata letak dasbor jendhela utama nampilake tata letak aplikasi rong kolom klasik: bilah sisi tetep (padha karo 240px) + area konten sing nemtokake kapadhetan informasi produk kanggo pengunjung sadurunge miwiti nggulung.
Visual-visual kasebut fokus ing produk, dudu fokus ing gaya urip. Layar utama dipusatake ing gambar layar dashboard gedhe, sing makili mockup produk ing jagad nyata kanthi navigasi sidebar, tabel data, lan elemen UI sing ngambang, sing ditata minangka panel datar ing kanvas putih. Logo klien ditampilake ing kothak skala abu-abu desaturasi (beehiv, superpower, Chatbase, lsp.) kanggo ngakoni kinerja media sosial, dicopot warnane supaya aksen biru tunggal ing kaca tetep dominan. Kartu mitra sing ngambang (profil cilik lan kothak kanthi data pendapatan/pembayaran) obah ing sekitar blok teks editorial ing sisih ngisor, nggawe rasa jero tanpa nggunakake bayangan ing teks kasebut dhewe. Pola latar mburi kothak titik-titik minangka fitur khas: deretan tipis titik-titik cilik kanthi opacity sing sithik banget nggawe tekstur lan rasa sistem desain/permukaan gambar, nandheske posisi situs minangka "platform atribusi link modern." Ikonografi minimal, kanthi garis besar lan isi, lan nggunakake palet aksen (jeruk keprok, ungu lavender, ijo mint) kanggo tag fitur. Ora ana foto, ilustrasi, utawa model 3D sing digunakake—antarmuka panganggo produk kasebut dhewe awujud basa visual.
Palet
Merek
- Electric Blue
#2563eb— Werna merek utama—logo, pranala, indikator kinerja utama, status aktif, lan aksen ikon—digunakake. Werna biru sing sugih ing latar mburi putih nggawe daya tarik visual siji-sijine sistem. - Deep Sapphire
#1e40af— Latar mburi utama tombol aksi, isi kandel saka ajakan tumindak—siji-sijine werna sing nuduhake tumindak—digunakake kanthi hemat kanggo narik kawigaten.
Netral
- Canvas White
#ffffff— Latar mburi kaca, lumahing kertu, panel pop-up minangka pondasi mutlak saben layar. - Paper Mist
#f5f5f5— Owah-owahan warna sing alus kanggo kertu sing disarangkan, panel tambahan, lan isian. - Ash
#e5e5e5— Wates tipis ing kertu, konektor input, lan pembagi minangka garis struktural sing nyawiji sistem kasebut. - Smoke
#d4d4d4— Wates sing luwih landhep kanggo wadhah sing dipilih lan garis tombol tambahan. - Pebble
#c8c8c8— Wates, garis kontrol, lan pembagi struktural kanthi kontras medium. Werna iki ora kena digunakake minangka werna utama kanggo ajakan tumindak. - Midnight Ink
#0a0a0a— Teks utama tombol, tombol sing disorot, lan teks navigasi meh ireng kanggo kontras maksimal.
Tipografi
saka 11 nganti 48px · 9 langkah
- Satoshi — panggantos: Inter (weight 500 · garis besar 500 · Judhul Tampilan – mung digunakake ing baris 36–48px kanggo judhul lan bagean. Bobot font – 500 (sedheng, ora kandel): Judhul katon manteb lan modern, nanging ora tau kakehan. Proporsi geometris Satoshi menehi jinis huruf sing rada editorial lan modern sing ora bisa ditiru dening salinan awak Inter.
- Inter — panggantos: Inter (native) · garis besar 400, 500, 600 · Salinan awak, label UI, navigasi, subjudul, lan judhul cilik. Inter minangka mesin utama, nangani kabeh saka label mikro 11px nganti judhul sekunder 30px. Bobot 400 minangka standar kanggo salinan awak, 500 kanggo elemen sing disorot lan label tombol, lan 600 dicadhangake kanggo label UI sing penting. 16px kanthi dhuwur baris 1,5 minangka ukuran langkah tunggal sing paling kerep ditemokake (1220 kedadeyan), sing ngonfirmasi manawa 16px minangka ukuran salinan awak kanonik.
- Geist Mono — panggantos: JetBrains Mono or IBM Plex Mono · garis besar 400, 500 · Cuplikan kode, metadata teknis, lan token monospace sing disemat digunakake ing blok kode kanthi ukuran 12-14px lan ing elemen tampilan kode gedhe kanthi ukuran 24px. Iki njamin kredibilitas alat pangembang, selaras karo posisi produk Dub.
Interval lan wujud
| Tujuan | Tegese |
|---|---|
| Kapadhetan | rata-rata |
| Langkah dhasar | 8px |
| Radius tombol | 8px |
| Radius kertu | 12px |
| Bayangan | ora ana wates tinimbang bayangan |
| Antarane bagean | 64px |
| Ambane kaca | 1200px |
AI bakal mbangun situs web sampeyan nganggo gaya Dub lan ngisi situs kasebut
- Isi nganggo produk lan kiriman liwat pranala - Instagram, TikTok, Facebook.
- Transfer konten saka situs lawasmu—cukup sebutna alamate.
- Desain modern nganggo mesin paling apik: React ( Next.js) nganggo rendering server lan optimasi SEO sing wis ana.
- Optimasi SEO otomatis kanggo asil panelusuran lan rekomendasi jaringan saraf.
Gaya sing padha
- ElevenLabs — Esai foto nganggo warna krem anget kanthi judhul sing alus. Buku cathetan gaya Bauhaus—kertas warna kulit endhog, tinta ireng, lan aksen ungu lan oranye siji kanggo tampilan produk.
- Awesomic — Jaring seng editorial nganggo tandha wacan oranye sing ngelingake konfeti
- Monad — jurnal teknis editorial babagan perkamen anget
- Seline Analytics — Tabel analitis sing sepi ing kertas anget
- Notion — Buku cathetan kertas sing anget ing srengenge awan
- Anthropic — Jurnal lapangan ilmiah babagan vellum anget—permukaan gading sing tenang, judhul editorial serif, lan aksen lempung tunggal sing mung katon nalika ana tindakan sing dibutuhake.
- Calendly — Tinta biru peteng ing marmer adhem
- Augen Pro — Presentasi putih Apple nduweni warna biru elektrik sing klinis, entheng minangka aksen tunggal ing ruang monokrom.
- Antimetal — Kronik editorial ing kertas krem—esuk sing sepi ing jurnal ilmiah, ing ngendi pengekangan nuduhake rasa percaya diri lan serif nindakake tugas sing abot
- Perk — Jeruk nipis listrik ing kertas roti anget
- Ditto — Lokakarya sing kebak cahya srengenge nggawe conto kembang liar. Permukaan krem sing anget, warna dasar kuning sing cerah, tinta biru laut sing jero, wujud warna organik sing mekar ing mburi karya kasebut.
- Officevibe — Majalah editorial ing kertas warna krem sing anget. Bayangna esai sing dipikir kanthi tliti babagan manajemen SDM, sing ditampilake minangka produk—font serif kursif sing muni liwat antarmuka biru modern.