Dub
Iphaneli yokulawula iphepha lerayisi elingacwebezeliyo leLink
Inkqubo yokubona kaDub inobuhle obuqinileyo, obuphantse bube bobokuhlela beSaaS: i-canvas ephantse ibe mhlophe ebanjwe kunye yimida emincinci endaweni yezinto ezivele ngaphandle, kunye noyilo lwe-monochrome oluxineneyo olubonelela ngenkxaso yesakhiwo kunye nombala omnye oluhlaza okwesibhakabhaka oqaqambileyo (#2563eb) owenza intetho. Imiphezulu ihlala ithe tyaba kwaye ingenafreyimu xa uyijonga okokuqala, kodwa isikhongozeli ngasinye sinomda we-1px #e5e5e5, ovusa imvakalelo yoxwebhu oluprintiweyo. Ubuntu bufezekiswa ngeseti encinci yeempawu "zepilisi" ezinemibala (orenji, oluhlaza, omfusa) ezidada ngaphezulu kwephalethi engathathi cala, kunye neentloko ezizive ziqinisekile kwaye zanamhlanje ngaphandle kokuba zikhazimle. Izinto zincinci kwaye zixinene: ii-gutters ze-8px, i-radius yekhadi ye-12px, iilebhile ezimile okwepilisi kwi-9999px, kunye nolawulo olungabonakaliyo endaweni yamaqhosha anzima, agcweleyo.
Iphepha lakhiwe phezu koyilo oluphakathi olunobubanzi obuphezulu obumalunga ne-1200px. Into ephambili yibhloko yombhalo ephakathi enezinto ezintathu ezidadayo (iiNkqubo eziManyeneyo, uHlalutyo loGuqulo, iiLinks ezimfutshane) ezibekwe ngokuthe tye ngaphezulu koyilo olukhulu lwemveliso. Amacandelo acwangciswe ngokuthe nkqo ngee-gutter ezihambelanayo ze-64px, ezitshintshana phakathi kwe-canvas emhlophe kunye ne-#f5f5f5 iphepha elimnyama ukuze kwahlulwe ithoni. Icandelo elisezantsi lisebenzisa uyilo olufana no-Z: umbhalo wokuhlela uphakathi kwindawo yesithathu ephakathi, kwaye amakhadi e-UI aqatywe kumaphethelo asekhohlo nasekunene, okwenza isigqi esifana nemagazini. Ilifu lelogo liyigridi elula ye-5x2, ephakathi kwiphepha. Ukuhamba yibha ephezulu encinci—ilogo ekhohlo, ukuhamba embindini, iqela lamaqhosha amabini (iqhosha elithi "Ngena" eliyi-ghost + iqhosha elithi "Bhalisa" eligcweleyo) ekunene—ngaphandle kwemenyu emiselweyo okanye enkulu. Uyilo lwedeshibhodi yefestile ephambili lubonisa uyilo lwe-app oluneenkolamu ezimbini: i-sidebar esisigxina (efana ne-240px) + indawo yomxholo echaza ubuninzi bolwazi lwemveliso kubatyeleli ngaphambi kokuba baqale ukuskrola.
Imifanekiso igxile kwimveliso, ayijoliswanga kwindlela yokuphila. Isikrini esiphambili sigxile kwi-screenshot enkulu yedeshibhodi, emele umfanekiso wemveliso wehlabathi lokwenyani kunye ne-sidebar navigation, itafile yedatha, kunye nezinto ze-UI ezintantayo, ezibekwe njengephaneli ethe tyaba kwi-canvas emhlophe. Iilogo zabathengi ziboniswa kwigridi ye-grayscale engagcwaliyo (i-beehiv, i-superpower, i-Chatbase, njl.njl.) ukuvuma ukusebenza kwazo kwimidiya yoluntu, zisuswe umbala ukuvumela i-accent enye eluhlaza okwesibhakabhaka yephepha ukuba ihlale ilawula. Amakhadi amaqabane antantayo (iiprofayili ezincinci kunye neethayile ezinedatha yengeniso/yentlawulo) zihambahamba kwiibhloko zesicatshulwa sokuhlela ezantsi, zenza uvakalelo lobunzulu ngaphandle kokusebenzisa izithunzi kwisicatshulwa ngokwaso. Ipateni yangasemva yegridi enamachaphaza luphawu olubalulekileyo: umqolo omncinci wamachaphaza amancinci anokungabonakali kakhulu udala ubume kunye nokuvakala kwenkqubo yoyilo/umphezulu womzobo, ugxininisa indawo yesiza njenge "iqonga le-link attribution yanamhlanje." I-iconography incinci, inemigca kunye nokuzalisa, kwaye isebenzisa i-palette ye-accent (i-tangerine orange, i-lavender purple, i-mint green) kwiithegi zeempawu. Akukho mifanekiso, mifanekiso, okanye iimodeli ze-3D ezisetyenzisiweyo—ujongano lomsebenzisi lwemveliso ngokwalo lulwimi olubonakalayo.
Iphalethi
Uphawu
- Electric Blue
#2563eb— Umbala oyintloko wophawu—ilogo, amakhonkco, izalathisi zokusebenza eziphambili, iimeko ezisebenzayo, kunye neempawu ze-icon—ziyasetyenziswa. Umbala oluhlaza okwesibhakabhaka oqaqambileyo kwimvelaphi emhlophe udala kuphela umtsalane obonakalayo wenkqubo. - Deep Sapphire
#1e40af— Imvelaphi ephambili yeqhosha lesenzo, ukugcwalisa okucacileyo kokubiza isenzo—umbala okuphela kwawo obonisa isenzo—usetyenziswa kancinci ukutsala ingqalelo.
Ukungathathi cala
- Canvas White
#ffffff— Imvelaphi yephepha, umphezulu wekhadi, iiphaneli ezivelelayo zezona ziseko zibalulekileyo zesikrini ngasinye. - Paper Mist
#f5f5f5— Utshintsho oluncinci lombala we-hover kwiikhadi ezifakwe kwiindlwane, iiphaneli ezongezelelweyo, kunye nokuzaliswa. - Ash
#e5e5e5— Imida emincinci kumakhadi, izihlanganisi zokufaka kunye nezahluli ngumgca wolwakhiwo obamba inkqubo kunye. - Smoke
#d4d4d4— Imida ebukhali kwizikhongozeli ezikhethiweyo kunye nemida eyongezelelweyo yamaqhosha. - Pebble
#c8c8c8— Imida, imigca yokulawula, kunye nezahluli zesakhiwo ezinomahluko ophakathi. Lo mbala akufuneki usetyenziswe njengombala oyintloko wokubiza isenzo. - Midnight Ink
#0a0a0a— Umbhalo oyintloko wamaqhosha, amaqhosha agqanyisiweyo, kunye nombhalo wokukhangela uphantse ube mnyama ukuze kubekho umahluko omkhulu.
Ubhalo lweencwadi
ukusuka kwi-11 ukuya kwi-48px · amanyathelo ali-9
- Satoshi — ukutshintshwa: Inter (weight 500 · imida 500 · Izihloko zeDisplay – zisetyenziswa kuphela kwimigca engama-36–48px kwizihloko zezihloko nezecandelo. Ubunzima befonti – 500 (ephakathi, engangqindilili): Izihloko zibonakala ziqinisekile kwaye zisexesheni, kodwa azikaze zigqithise. Ubungakanani bejometri bukaSatoshi bunika uhlobo lwefonti uluvo lwanamhlanje oluhlelweyo, olunokuthi ikopi yomzimba ka-Inter ayinakuphinda ifane.
- Inter — ukutshintshwa: Inter (native) · imida 400, 500, 600 · Ikopi yomzimba, iilebhile ze-UI, ukuhambahamba, izihlokwana, kunye nezihloko ezincinci. I-Inter yeyona nto iphambili, iphatha yonke into ukusuka kwiilebhile ezincinci ze-11px ukuya kwiihlokwana zesibini ze-30px. Ubunzima obuyi-400 buyinto eqhelekileyo kwikopi yomzimba, i-500 kwizinto ezigqanyisiweyo kunye neelebhile zeqhosha, kwaye i-600 igcinelwe iilebhile ezibalulekileyo ze-UI. I-16px enobude bomgca obuyi-1.5 lolona bungakanani benyathelo elinye obufumaneka rhoqo (iziganeko eziyi-1220), okuqinisekisa ukuba i-16px lulubungakanani bekopi yomzimba obuqulathwe yi-canonical.
- Geist Mono — ukutshintshwa: JetBrains Mono or IBM Plex Mono · imida 400, 500 · Iziqwenga zekhowudi, i-metadata yobuchwephesha, kunye neethokheni ezifakwe i-monospaced zisetyenziswa kwiibhloko zekhowudi kwi-12–14px nakwii-code display elements ezinkulu kwi-24px. Oku kuqinisekisa ukuthembeka kwesixhobo somphuhlisi, okuhambelana nokubekwa kwemveliso kaDub.
Amaxesha okuphumla kunye nefom
| Injongo | Intsingiselo |
|---|---|
| Uxinano | umndilili |
| Inyathelo elisisiseko | 8px |
| Irediyasi yeqhosha | 8px |
| Irediyasi yekhadi | 12px |
| Izithunzi | akukho - imida endaweni yezithunzi |
| Phakathi kwamacandelo | 64px |
| Ububanzi bephepha | 1200px |
I-AI iza kwakha iwebhusayithi yakho ngesitayile sika- Dub ize iyizalise
- Gcwalisa iimveliso kunye nezithuba ngekhonkco - Instagram, TikTok, Facebook.
- Dlulisa umxholo usuka kwisiza sakho esidala—chaza nje idilesi.
- Uyilo lwanamhlanje kwinjini engcono kakhulu: React ( Next.js) ene-server rendering kunye ne-SEO optimization ephuma kwibhokisi.
- Ukulungiswa kwe-SEO ngokuzenzekelayo ngokupheleleyo kwiziphumo zophando kunye neengcebiso zenethiwekhi ye-neural.
Iintlobo ezifanayo
- ElevenLabs — Isincoko seefoto ezinemibala efudumeleyo yekhrimu enezihloko ezincinci. Incwadi yeencwadi efana neBauhaus—iphepha elinombala weqokobhe leqanda, i-inki emnyama, kunye ne-accent enye emfusa neorenji yokubonisa imveliso.
- Awesomic — I-zinc mesh yomhleli eneempawu zokubhala eziorenji ezikhumbuza i-confetti
- Monad — ijenali yobugcisa yomhleli malunga nephepha elifudumeleyo
- Seline Analytics — Itheyibhile yohlalutyo ezolileyo ephepheni elifudumeleyo
- Notion — Incwadi yephepha efudumeleyo elangeni lasemini
- Anthropic — Ijenali yenzululwazi ethetha nge-vellum efudumeleyo—imiphezulu ezolileyo ye-ivory, izihloko zomhleli ezicacileyo, kunye nesimbo esinye sodongwe esibonakala kuphela xa kufuneka isenzo.
- Calendly — I-inki eluhlaza okwesibhakabhaka emnyama kwimabula ebandayo
- Augen Pro — Imbonakalo emhlophe ye-Apple inombala oluhlaza okwesibhakabhaka okhanyayo, ongenabunzima, njengombala oqaqambileyo kwindawo enye.
- Antimetal — Ingxelo yomhleli ekwiphepha elinokhilimu—intsasa ezolileyo kwijenali yesayensi, apho ukuzibamba kubonisa ukuzithemba kwaye ii-serif zenza umsebenzi onzima
- Perk — Ilayimu yombane kwiphepha elifudumeleyo lephepha lokubhaka
- Ditto — Indawo yokusebenzela ekhanyiswe lilanga edala iisampulu zeentyatyambo zasendle. Imiphezulu efudumeleyo yekhrimu, umbala otyheli oqaqambileyo osisiseko, ii-inki eziluhlaza okwesibhakabhaka ezinzulu, imibala yendalo eqhakaza emva kwesiqwenga.
- Officevibe — Imagazini yomhleli ekwiphepha elifudumeleyo elinombala okhrimu. Khawuthelekelele isincoko esicingisisiweyo malunga nolawulo lwe-HR, esivezwe njengemveliso—ifonti ye-cursive serif ehleba kwi-interface eluhlaza okwesibhakabhaka yanamhlanje.