Dub
Panel sa pagkontrol sa matte rice paper sa Link
Ang visual system sa Dub adunay usa ka pinugngan, halos editoryal nga SaaS aesthetic: usa ka hapit puti nga canvas nga gihiusa sa nipis nga mga border imbes nga nagtuybo nga mga elemento, nga adunay dasok nga monochrome typography nga naghatag suporta sa istruktura ug usa ka hayag nga asul nga kolor (#2563eb) nga naghimo usa ka pahayag. Ang mga nawong nagpabilin nga patag ug walay frame sa unang pagtan-aw, apan ang matag sudlanan adunay 1px #e5e5e5 margin, nga nagpahinumdom sa pagbati sa usa ka giimprinta nga dokumento. Ang personalidad makab-ot pinaagi sa usa ka gamay nga hugpong sa mga kolor nga "pill" accents (orange, berde, purple) nga naglutaw sa ibabaw sa neyutral nga palette, ug mga header nga mobati nga masaligon ug moderno nga dili magarbo. Ang mga sangkap siksik ug dasok: 8px nga mga gutter, 12px nga radius sa kard, mga label nga porma sa pildoras sa 9999px, ug dili makita nga mga kontrol imbes nga bug-at, puno nga mga butones.
Ang panid gitukod sa usa ka nakasentro nga layout nga adunay pinakataas nga gilapdon nga gibana-bana nga 1200px. Ang pangunang elemento usa ka nakasentro nga text block nga adunay tulo ka naglutaw nga elemento (Affiliate Programs, Conversion Analytics, Short Links) nga gibutang nga pinahigda sa ibabaw sa usa ka dako nga layout sa produkto. Ang mga seksyon gihan-ay nga patindog nga adunay makanunayon nga 64px nga mga gutter, nga nagpuli-puli tali sa puti nga canvas ug #f5f5f5 nga papel nga haze alang sa pagbulag sa tonal. Ang ubos nga seksyon naggamit ug Z-shaped nga layout: ang editorial nga teksto nakasentro sa tunga nga ikatulo, ug ang naglutaw nga mga UI card gi-angkla sa wala ug tuo nga mga margin, nga nagmugna og asymmetrical, sama sa magasin nga ritmo. Ang logo cloud usa ka yano nga 5x2 grid, nga nakasentro sa panid. Ang nabigasyon usa ka minimalist nga top bar—logo sa wala, nabigasyon sa tunga, usa ka grupo sa duha ka butones (usa ka ghost nga "Login" button + usa ka puno nga "Register" button) sa tuo—nga walay pirmi o mega-menu. Ang layout sa dashboard sa pangunang bintana nagpakita sa usa ka klasiko nga duha ka kolum nga layout sa app: usa ka pirmi nga sidebar (parehas sa 240px) + usa ka content area nga nagtino sa densidad sa impormasyon sa produkto para sa mga bisita sa dili pa sila magsugod sa pag-scroll.
Ang mga biswal naka-pokus sa produkto, dili sa estilo sa kinabuhi. Ang pangunang screen nakasentro sa usa ka dako nga screenshot sa dashboard, nga nagrepresentar sa usa ka tinuod nga mockup sa produkto nga adunay sidebar navigation, data table, ug naglutaw nga mga elemento sa UI, nga gibutang isip usa ka patag nga panel sa usa ka puti nga canvas. Ang mga logo sa kliyente gipakita sa usa ka desaturated grayscale grid (beehiv, superpower, Chatbase, ug uban pa) aron mailhan ang ilang performance sa social media, gihuboan og kolor aron ang usa ka asul nga accent sa panid magpabilin nga dominante. Ang naglutaw nga mga partner card (gagmay nga mga profile ug mga tile nga adunay datos sa kita/pagbayad) naglihok-lihok sa mga bloke sa editorial nga teksto sa ubos, nga nagmugna og usa ka pagbati sa giladmon nga wala gigamit ang mga anino sa teksto mismo. Ang dotted grid background pattern usa ka signature feature: ang usa ka nipis nga laray sa gagmay nga mga tuldok nga adunay ubos kaayo nga opacity nagmugna og texture ug ang pagbati sa usa ka design system/drawing surface, nga nagpasiugda sa posisyon sa site isip usa ka "modernong link attribution platform." Ang iconography gamay ra, nga adunay mga outline ug mga fill, ug naggamit og accent palette (tangerine orange, lavender purple, mint green) para sa mga feature tag. Walay mga litrato, ilustrasyon, o 3D nga mga modelo nga gigamit—ang user interface mismo sa produkto usa ka biswal nga pinulongan.
Paleta
Brand
- Electric Blue
#2563eb— Ang pangunang kolor sa brand—ang logo, mga link, mga key performance indicator, mga active states, ug mga icon accents—ang gigamit. Ang dato nga asul sa puti nga background mao lamang ang makadani sa sistema. - Deep Sapphire
#1e40af— Ang pangunang background sa action button, ang bold nga sulod sa call to action—ang bugtong kolor nga nagpakita sa aksyon—gigamit nga panagsa ra aron makadani sa atensyon.
Neutral
- Canvas White
#ffffff— Ang background sa panid, nawong sa kard, ug mga pop-up panel mao ang hingpit nga pundasyon sa matag screen. - Paper Mist
#f5f5f5— Hinayhinay nga pag-usab sa kolor sa hover para sa mga nested card, dugang nga mga panel, ug mga pun-an. - Ash
#e5e5e5— Ang nipis nga mga border sa mga card, input connector ug divider mao ang estruktural nga linya nga naghiusa sa sistema. - Smoke
#d4d4d4— Mas hait nga mga utlanan para sa piniling mga sudlanan ug dugang nga mga outline sa butones. - Pebble
#c8c8c8— Mga border, control outline, ug structural divider nga adunay medium contrast. Kini nga kolor dili angay gamiton isip pangunang kolor para sa mga call to action. - Midnight Ink
#0a0a0a— Ang pangunang teksto sa mga buton, gi-highlight nga mga buton, ug teksto sa nabigasyon halos itom para sa labing taas nga contrast.
Tipograpiya
gikan sa 11 ngadto sa 48px · 9 ka lakang
- Satoshi — kapuli: Inter (weight 500 · mga balangkas 500 · Mga Ulohan sa Pagpakita – gigamit lamang sa 36–48px nga linya para sa ulohan ug mga titulo sa seksyon. Gibug-aton sa font – 500 (medium, dili bold): Ang mga ulohan morag kompiyansa ug moderno, apan dili gyud sobra ka-overpower. Ang geometric nga proporsyon ni Satoshi naghatag sa typeface og gamay nga editoryal ug moderno nga pagbati nga dili masundog sa body copy sa Inter.
- Inter — kapuli: Inter (native) · mga balangkas 400, 500, 600 · Body copy, UI labels, nabigasyon, subheadings, ug minor headings. Ang Inter mao ang pangunang workhorse, nga nagdumala sa tanan gikan sa 11px micro-labels ngadto sa 30px secondary headings. Ang gibug-aton nga 400 mao ang default para sa body copy, 500 para sa highlighted elements ug button labels, ug 600 ang gitagana para sa importanteng UI labels. Ang 16px nga adunay line height nga 1.5 mao ang pinakakasagarang makita nga single-step size (1220 ka pagpakita), nga nagpamatuod nga ang 16px mao ang canonical body copy size.
- Geist Mono — kapuli: JetBrains Mono or IBM Plex Mono · mga balangkas 400, 500 · Ang mga code snippet, teknikal nga metadata, ug mga embedded monospaced token gigamit sa mga code block sa 12–14px ug sa dagkong mga code display elements sa 24px. Kini nagsiguro sa kredibilidad sa developer tool, nga nahiuyon sa product positioning sa Dub.
Mga interval ug porma
| Katuyoan | Kahulugan |
|---|---|
| Densidad | aberids |
| Batakang lakang | 8px |
| Radius sa butones | 8px |
| Radius sa kard | 12px |
| Mga anino | walay - mga utlanan imbes nga mga anino |
| Taliwala sa mga seksyon | 64px |
| Lapad sa panid | 1200px |
Ang AI motukod sa imong website sa estilo sa Dub ug mopuno niini
- Pun-a og mga produkto ug mga post pinaagi sa link - Instagram, TikTok, Facebook.
- Ibalhin ang sulod gikan sa imong daang site—ipiho lang ang adres.
- Modernong disenyo sa pinakamaayong makina: React ( Next.js) nga adunay server rendering ug SEO optimization nga andam na gamiton.
- Bug-os nga awtomatik nga pag-optimize sa SEO para sa mga resulta sa pagpangita ug mga rekomendasyon sa neural network.
Parehas nga mga estilo
- ElevenLabs — Usa ka photo essay sa init nga krema nga mga kolor nga adunay malumo nga mga ulohan sa balita. Usa ka notebook nga istilo sa Bauhaus—papel nga kolor sama sa kabhang sa itlog, itom nga tinta, ug usa ka purpura ug kahel nga accent para sa display sa produkto.
- Awesomic — Editoryal nga zinc mesh nga adunay orange nga mga marka sa bantas nga nagpahinumdom sa confetti
- Monad — teknikal nga dyornal sa editoryal bahin sa mainit nga pergamino
- Seline Analytics — Usa ka hilom nga analytical table sa init nga papel
- Notion — Usa ka mainit nga notebook nga papel sa udto
- Anthropic — Usa ka siyentipikong field journal sa init nga vellum—kalma nga garing nga mga nawong, serifed nga mga ulohan sa editoryal, ug usa ka accent nga lapok nga makita lamang kung kinahanglan ang aksyon.
- Calendly — Itom nga asul nga tinta sa bugnaw nga marmol
- Augen Pro — Ang puti nga presentasyon sa Apple adunay klinikal, gaan, electric blue isip bugtong aksento sa usa ka monochrome nga espasyo.
- Antimetal — Usa ka kronika sa editoryal sa kremang papel—usa ka hilom nga buntag sa usa ka siyentipikong dyurnal, diin ang pagpugong nagpahayag sa pagsalig ug ang mga serif mao ang nagbuhat sa bug-at nga buluhaton
- Perk — Electric lime sa init nga parchment paper
- Ditto — Usa ka workshop nga gisidlakan sa adlaw nga naghimo og mga sample sa ihalas nga mga bulak. Mainit nga krema nga mga nawong, usa ka hayag nga dalag nga kolor sa base, lawom nga asul nga mga tinta, mga organikong kolor nga namulak sa luyo sa obra.
- Officevibe — Usa ka magasin nga editoryal sa init nga krema nga papel. Handurawa ang usa ka mahunahunaon nga sanaysay bahin sa pagdumala sa HR, nga gipresentar isip usa ka produkto—usa ka cursive serif font nga naghunghong pinaagi sa usa ka moderno nga asul nga interface.