Dub
Control panel ng Link na gawa sa matte rice paper
Ang visual system ng Dub ay may mapigil, halos editoryal na estetika ng SaaS: isang halos puting canvas na pinagsasama-sama ng manipis na mga hangganan sa halip na mga nakausling elemento, na may siksik na monochrome typography na nagbibigay ng suporta sa istruktura at isang matingkad na asul na kulay (#2563eb) na nagbibigay ng isang pahayag. Ang mga ibabaw ay nananatiling patag at walang frame sa unang tingin, ngunit ang bawat lalagyan ay may 1px #e5e5e5 margin, na pumupukaw sa pakiramdam ng isang naka-print na dokumento. Nakakamit ang personalidad sa pamamagitan ng isang maliit na hanay ng mga may kulay na "pill" accent (orange, berde, lila) na lumulutang sa ibabaw ng neutral na palette, at mga header na may kumpiyansa at moderno nang hindi nagiging magarbo. Ang mga bahagi ay siksik at siksik: 8px na mga gutter, 12px na radius ng card, mga label na hugis-pill sa 9999px, at mga hindi nakikitang kontrol sa halip na mabibigat at puno na mga buton.
Ang pahina ay binuo sa isang nakasentrong layout na may pinakamataas na lapad na humigit-kumulang 1200px. Ang pangunahing elemento ay isang nakasentrong text block na may tatlong lumulutang na elemento (Mga Programa ng Kaakibat, Conversion Analytics, Maiikling Link) na nakaposisyon nang pahalang sa itaas ng isang malaking layout ng produkto. Ang mga seksyon ay nakaayos nang patayo na may pare-parehong 64px na gutter, na nagpapalitan sa pagitan ng puting canvas at #f5f5f5 na paper haze para sa paghihiwalay ng tono. Ang ibabang seksyon ay gumagamit ng layout na hugis-Z: ang tekstong editoryal ay nakasentro sa gitnang ikatlong bahagi, at ang mga lumulutang na UI card ay nakaangkla sa kaliwa at kanang mga margin, na lumilikha ng isang asymmetrical, parang magasin na ritmo. Ang logo cloud ay isang simpleng 5x2 grid, na nakasentro sa pahina. Ang nabigasyon ay isang minimalistang top bar—logo sa kaliwa, nabigasyon sa gitna, isang grupo ng dalawang button (isang ghost na button na "Login" + isang puno na button na "Register") sa kanan—nang walang nakapirming o mega-menu. Ang layout ng dashboard ng pangunahing window ay nagpapakita ng klasikong layout ng app na may dalawang hanay: isang nakapirming sidebar (katulad ng 240px) + isang content area na tumutukoy sa densidad ng impormasyon ng produkto para sa mga bisita bago sila magsimulang mag-scroll.
Ang mga biswal ay nakatuon sa produkto, hindi sa pamumuhay. Ang pangunahing screen ay nakasentro sa isang malaking screenshot ng dashboard, na kumakatawan sa isang mockup ng produkto sa totoong mundo na may sidebar navigation, data table, at mga lumulutang na elemento ng UI, na nakalagay bilang isang patag na panel sa isang puting canvas. Ang mga logo ng kliyente ay ipinapakita sa isang desaturated grayscale grid (beehiv, superpower, Chatbase, atbp.) upang kilalanin ang kanilang pagganap sa social media, na tinanggalan ng kulay upang manatiling nangingibabaw ang nag-iisang asul na accent ng pahina. Ang mga lumulutang na partner card (maliliit na profile at tile na may data ng kita/pagbabayad) ay gumagalaw sa mga bloke ng tekstong editoryal sa ibaba, na lumilikha ng isang pakiramdam ng lalim nang hindi gumagamit ng mga anino sa mismong teksto. Ang pattern ng background na may tuldok-tuldok na grid ay isang tampok na tampok: ang isang manipis na hanay ng maliliit na tuldok na may napakababang opacity ay lumilikha ng texture at pakiramdam ng isang sistema ng disenyo/ibabaw ng pagguhit, na nagbibigay-diin sa posisyon ng site bilang isang "modernong platform ng link attribution." Minimal ang iconography, na may mga balangkas at mga palaman, at gumagamit ng isang accent palette (tangerine orange, lavender purple, mint green) para sa mga feature tag. Walang mga litrato, ilustrasyon, o 3D na modelo ang ginamit—ang user interface mismo ng produkto ay isang visual na wika.
Paleta
Tatak
- Electric Blue
#2563eb— Ang pangunahing kulay ng brand—ang logo, mga link, mga key performance indicator, mga aktibong estado, at mga icon accent—ang ginagamit. Ang matingkad na asul sa puting background ang siyang lumilikha ng tanging biswal na kaakit-akit ng system. - Deep Sapphire
#1e40af— Ang pangunahing background ng action button, ang naka-bold na laman ng call to action—ang tanging kulay na nagsasaad ng aksyon—ay ginagamit nang matipid upang makaakit ng atensyon.
Neutral
- Canvas White
#ffffff— Ang background ng pahina, ibabaw ng card, at mga pop-up panel ang siyang ganap na pundasyon ng bawat screen. - Paper Mist
#f5f5f5— Banayad na pagbabago ng kulay ng hover para sa mga nested card, karagdagang panel, at mga fill. - Ash
#e5e5e5— Ang manipis na mga hangganan sa mga card, mga input connector, at mga divider ang siyang estruktural na linya na nagbubuklod sa sistema. - Smoke
#d4d4d4— Mas matatalas na hangganan para sa mga piling lalagyan at karagdagang mga balangkas ng butones. - Pebble
#c8c8c8— Mga border, control outline, at mga structural divider na may katamtamang contrast. Hindi dapat gamitin ang kulay na ito bilang pangunahing kulay para sa mga call to action. - Midnight Ink
#0a0a0a— Halos itim ang pangunahing teksto ng mga buton, mga naka-highlight na buton, at teksto ng nabigasyon para sa pinakamataas na contrast.
Tipograpiya
mula 11 hanggang 48px · 9 na hakbang
- Satoshi — kapalit: Inter (weight 500 · mga balangkas 500 · Mga Pamagat sa Pagpapakita – ginagamit lamang sa 36–48px na linya para sa mga pamagat ng pamagat at seksyon. Bigat ng font – 500 (katamtaman, hindi naka-bold): Ang mga pamagat ay mukhang may kumpiyansa at moderno, ngunit hindi kailanman labis na nakakapangibabaw. Ang mga heometrikong proporsyon ni Satoshi ay nagbibigay sa typeface ng bahagyang editoryal at modernong pakiramdam na hindi kayang gayahin ng body copy ng Inter.
- Inter — kapalit: Inter (native) · mga balangkas 400, 500, 600 · Body copy, mga label ng UI, nabigasyon, mga subheading, at mga minor heading. Ang Inter ang pangunahing workhorse, na humahawak sa lahat mula sa 11px micro-label hanggang sa 30px secondary heading. Ang weight na 400 ang default para sa body copy, 500 para sa mga naka-highlight na elemento at button label, at 600 ang nakalaan para sa mahahalagang UI label. Ang 16px na may taas ng linya na 1.5 ang pinakamadalas na nakikitang single-step size (1220 paglitaw), na nagpapatunay na ang 16px ang canonical body copy size.
- Geist Mono — kapalit: JetBrains Mono or IBM Plex Mono · mga balangkas 400, 500 · Ang mga snippet ng code, teknikal na metadata, at naka-embed na monospaced token ay ginagamit sa mga code block na may sukat na 12–14px at sa malalaking elemento ng pagpapakita ng code na may sukat na 24px. Tinitiyak nito ang kredibilidad ng tool ng developer, na naaayon sa pagpoposisyon ng produkto ng Dub.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | karaniwan |
| Pangunahing hakbang | 8px |
| Radius ng buton | 8px |
| Radius ng card | 12px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 64px |
| Lapad ng pahina | 1200px |
Gagawa ang AI ng website mo sa estilong Dub at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- ElevenLabs — Isang photo essay sa maayang kulay krema na may banayad na mga headline. Isang notebook na istilong Bauhaus—papel na kulay itlog, itim na tinta, at isang lila at orange na accent para sa display ng produkto.
- Awesomic — Editoryal na zinc mesh na may orange na bantas na nakapagpapaalala ng confetti
- Monad — teknikal na dyornal ng editoryal tungkol sa mainit na pergamino
- Seline Analytics — Isang tahimik na analytical table sa mainit na papel
- Notion — Isang mainit na kuwaderno na papel sa ilalim ng araw ng tanghali
- Anthropic — Isang siyentipikong field journal sa mainit na vellum—mga kalmadong ibabaw na garing, mga serif na heading editoryal, at isang natatanging accent na luwad na lumilitaw lamang kapag kinakailangan ng aksyon.
- Calendly — Madilim na asul na tinta sa malamig na marmol
- Augen Pro — Ang puting presentasyon ng Apple ay nagtatampok ng klinikal, magaan, at de-kuryenteng asul bilang tanging accent sa isang monochrome na espasyo.
- Antimetal — Isang kronikong editoryal sa kremang papel—isang tahimik na umaga sa isang siyentipikong dyornal, kung saan ang pagtitimpi ay naghahatid ng kumpiyansa at ang mga serif ang siyang nagpapabigat
- Perk — Electric lime sa mainit na parchment paper
- Ditto — Isang workshop na naliliwanagan ng araw na lumilikha ng mga sample ng wildflower. Mainit na kremang ibabaw, matingkad na dilaw na kulay, malalim na asul na tinta, mga organikong kulay na namumukadkad sa likod ng obra.
- Officevibe — Isang magasin na editoryal sa mainit at kulay kremang papel. Isipin ang isang maalalahaning sanaysay tungkol sa pamamahala ng HR, na inilalahad bilang isang produkto—isang cursive serif font na bumubulong sa isang modernong asul na interface.