Dub
Phanele ea taolo ea pampiri ea raese e matte ea Link
Sistimi ea pono ea Dub e na le botle bo sa fetoheng, bo batlang bo tšoana le ba SaaS: kanavase e batlang e le tšoeu e tšoeroeng hammoho ke meeli e mesesaane ho fapana le likarolo tse hlahelletseng, ka mongolo o teteaneng oa monochrome o fanang ka tšehetso ea sebopeho le 'mala o le mong o moputsoa o khanyang (#2563eb) o etsang polelo. Libaka li lula li bataletse ebile li se na foreimi ha u li sheba ka lekhetlo la pele, empa setshelo se seng le se seng se na le moeli oa 1px #e5e5e5, o tsosang maikutlo a tokomane e hatisitsoeng. Botho bo finyelloa ka sete e nyane ea melumo ea "pilisi" e mebala (lamunu, botala, pherese) e phaphametseng ka holim'a palete e sa nke lehlakore, le lihlooho tse ikutloang li kholisehile ebile li le tsa sejoale-joale ntle le ho benya. Likarolo li nyane ebile li teteaneng: li-gutter tsa 8px, radius ea karete ea 12px, mabitso a bōpehileng joaloka pilisi ho 9999px, le li-control tse sa bonahaleng ho e-na le likonopo tse boima, tse tletseng.
Leqephe le hahiloe holim'a sebopeho se bohareng se nang le bophara bo boholo ba hoo e ka bang 1200px. Karolo e ka sehloohong ke boloko ba mongolo bo bohareng bo nang le likarolo tse tharo tse phaphametseng (Mananeo a Kopanetsoeng, Tlhahlobo ea Phetoho, Lihokelo tse Khutšoanyane) tse behiloeng ka ho otloloha ka holim'a sebopeho se seholo sa sehlahisoa. Likarolo li hlophisitsoe ka ho otloloha ka li-gutter tse tsitsitseng tsa 64px, tse fapanyetsanang pakeng tsa canvas e tšoeu le mosi oa pampiri oa #f5f5f5 bakeng sa karohano ea molumo. Karolo e ka tlase e sebelisa sebopeho se bōpehileng joaloka Z: mongolo oa bohlophisi o bohareng ba karolo ea boraro e bohareng, 'me likarete tsa UI tse phaphametseng li khomaretsoe mathōkong a letšehali le a letona, li etsa morethetho o sa lekanang, o kang oa makasine. Leru la logo ke gridi e bonolo ea 5x2, e bohareng ba leqephe. Navigation ke bar e ka holimo e nyane - letšoao ka letsohong le letšehali, navigation bohareng, sehlopha sa likonopo tse peli (konopo ea "Kena" ea moea + konopo e tletseng ea "Ngolisa") ka letsohong le letona - ntle le lenane le tsitsitseng kapa le leholo. Sebopeho sa dashboard sa fensetere e kgolo se bontsha sebopeho sa app sa dikholomo tse pedi sa kgale: lehlakore le tsitsitseng (le tshwanang le 240px) + sebaka sa dikahare se hlalosang bongata ba tlhahisoleseding ya sehlahiswa bakeng sa baeti pele ba qala ho skrola.
Litšoantšo li shebane le sehlahisoa, ha li shebane le mokhoa oa bophelo. Skrine e kholo e shebane le setšoantšo se seholo sa dashboard, se emelang mohlala oa sehlahisoa sa 'nete se nang le ho tsamaea ka lehlakoreng le ka thoko, tafole ea data, le likarolo tsa UI tse phaphametseng, tse behiloeng e le phanele e bataletseng holim'a canvas e tšoeu. Matšoao a bareki a bontšoa ka har'a gridi e se nang metsi ea grayscale (beehiv, superpower, Chatbase, jj.) ho ananela ts'ebetso ea bona ea mecha ea litaba ea sechaba, a hlobotsoe 'mala ho lumella accent e le' ngoe e putsoa ea leqephe ho lula e le matla. Likarete tsa balekane tse phaphametseng (liprofaele tse nyane le lithaele tse nang le data ea lekeno/tefo) li tsamaea ho potoloha liboloko tsa mongolo oa bohlophisi tlase, li etsa hore ho be le kutloisiso ea botebo ntle le ho sebelisa meriti mongolong ka booona. Paterone ea bokamorao ba gridi e nang le matheba ke tšobotsi ea ho saena: mola o mosesaane oa matheba a manyane a nang le ho se bonahale hantle haholo o etsa sebopeho le maikutlo a sistimi ea moralo/bokaholimo ba ho taka, o totobatsa boemo ba sebaka e le "sethala sa sejoale-joale sa ho fana ka lihokelo." Setšoantšo sa litšoantšo se fokola, se na le meralo le litlatsetso, 'me se sebelisa pale ea accent (lamunu ea tangerine, lavender purple, mint green) bakeng sa li-tag tsa likarolo. Ha ho dinepe, ditshwantsho, kapa mehlala ya 3D e sebediswang—sebopeho sa mosebedisi sa sehlahiswa ka bosona ke puo e bonahalang.
Palete
Letšoao
- Electric Blue
#2563eb— 'Mala oa mantlha oa lets'oao—letšoao, lihokelo, matšoao a bohlokoa a ts'ebetso, maemo a sebetsang, le litlhaloso tsa matšoao—oa sebelisoa. Putsoa e tala e bosoeu bo botala bo etsa hore sistimi e ipiletse feela ponong. - Deep Sapphire
#1e40af— Semelo se seholo sa konopo ea ketso, ho tlatsa ka sebete ha pitso ea ketso—'mala o le mong feela o bontšang ketso—ho sebelisoa hanyane ho hohela tlhokomelo.
Lehlakore
- Canvas White
#ffffff— Semelo sa leqephe, bokaholimo ba karete, liphanele tse hlahang ke motheo o phethahetseng oa skrine se seng le se seng. - Paper Mist
#f5f5f5— Liphetoho tse poteletseng tsa 'mala oa ho sesa bakeng sa likarete tse nang le sehlaha, liphanele tse ling le lintho tse tlatsang. - Ash
#e5e5e5— Meeli e mesesaane likareteng, lihokelo tsa ho kenya le likarohano ke mola oa sebopeho o tšoarang sistimi hammoho. - Smoke
#d4d4d4— Meeli e bohale bakeng sa lijana tse khethiloeng le likonopo tse ling. - Pebble
#c8c8c8— Meeli, meralo ea taolo, le likarohano tsa sebopeho tse nang le phapang e mahareng. 'Mala ona ha oa lokela ho sebelisoa e le 'mala oa mantlha bakeng sa ho ipiletsa ketsong. - Midnight Ink
#0a0a0a— Mongolo o ka sehloohong oa likonopo, likonopo tse totobalitsoeng, le mongolo oa ho tsamaea o batla o le motšo bakeng sa phapang e kholo ka ho fetisisa.
Mongolo oa mongolo
ho tloha ho 11 ho isa ho 48px · mehato e 9
- Satoshi — sebaka: Inter (weight 500 · meralo 500 · Dihlooho tsa Pontšo – di sebediswa feela meleng ya dipiksele tse 36–48 bakeng sa dihlooho le dihlooho tsa dikarolo. Boima ba mongolo – 500 (bo mahareng, ha bo matla): Dihlooho di shebahala di itshepa ebile di le sejwalejwale, empa ha di na matla a ho feta. Dipalopalo tsa Satoshi tsa jeometri di fa mongolo maikutlo a sejwalejwale a bohlophisi, a sejwalejwale ao kopi ya mmele wa Inter e ke keng ya a etsisa.
- Inter — sebaka: Inter (native) · meralo 400, 500, 600 · Kopi ea 'mele, mabitso a UI, ho tsamaea, lihloohoana le lihlooho tse nyane. Inter ke mosebetsi o ka sehloohong, o sebetsanang le ntho e 'ngoe le e 'ngoe ho tloha ho mabitso a manyane a 11px ho isa ho lihlooho tsa bobeli tsa 30px. Boima ba 400 ke ba kamehla bakeng sa kopi ea 'mele, 500 bakeng sa likarolo tse totobalitsoeng le mabitso a konopo, 'me 600 e boloketsoe mabitso a bohlokoa a UI. 16px e nang le bolelele ba mola oa 1.5 ke boholo ba mohato o le mong bo atisang ho bonoa (liketsahalo tse 1220), bo tiisang hore 16px ke boholo ba kopi ea 'mele bo amohelehang.
- Geist Mono — sebaka: JetBrains Mono or IBM Plex Mono · meralo 400, 500 · Dikotwana tsa khoutu, metadata ya tekheniki, le di-tokens tse kentsweng sebakeng se le seng di sebediswa dibolokong tsa khoutu ho 12–14px le dikarolong tse kgolo tsa pontsho ya khoutu ho 24px. Sena se netefatsa botshepehi ba sesebediswa sa moqapi, se tsamaellanang le boemo ba sehlahiswa sa Dub.
Likheo le sebopeho
| Morero | Moelelo |
|---|---|
| Botenya | karolelano |
| Mohato oa motheo | 8px |
| Radiyo ea konopo | 8px |
| Radiyo ya karete | 12px |
| Meriti | che - meeli ho e-na le meriti |
| Pakeng tsa likarolo | 64px |
| Bophara ba leqephe | 1200px |
AI e tla haha websaete ea hau ka setaele sa Dub 'me e e tlatse
- Tlatsa ka lihlahisoa le lingoliloeng ka sehokelo - Instagram, TikTok, Facebook.
- Fetisetsa dikahare ho tloha sebakeng sa hao sa marang-rang sa kgale—hlalosa aterese feela.
- Moralo oa sejoale-joale enjeneng e ntle ka ho fetisisa: React ( Next.js) ka tlhahiso ea seva le ntlafatso ea SEO ka ho feletseng.
- Ntlafatso ea SEO e iketsahalletseng ka botlalo bakeng sa liphetho tsa lipatlisiso le likhothaletso tsa marang-rang a methapo ea kutlo.
Mekhoa e tšoanang
- ElevenLabs — Moqoqo oa foto o nang le mebala e mofuthu ea tranelate e nang le lihlooho tse bonolo. Buka ea lintlha ea setaele sa Bauhaus—pampiri e 'mala oa khetla ea lehe, enke e ntšo, le 'mala o le mong o pherese le oa lamunu bakeng sa pontšo ea sehlahisoa.
- Awesomic — Letlooeng la zinki le nang le matšoao a lamunu a hopotsang confetti
- Monad — koranta ea botekgeniki ea bahlophisi mabapi le letlalo le futhumetseng
- Seline Analytics — Tafole e khutsitseng ea tlhahlobo pampiring e futhumetseng
- Notion — Bukana e mofuthu ea pampiri letsatsing la motšehare
- Anthropic — Koranta ea saense ea tšimo e buang ka vellum e futhumetseng—mabota a khutsitseng a lenaka la tlou, lihlooho tsa bohlophisi tse ngotsoeng ka mokhoa o hlakileng, le mokhoa o le mong oa letsopa o hlahang feela ha ho hlokahala ketso.
- Calendly — Enke e putsoa e lefifi holim'a 'mabole o batang
- Augen Pro — Pontšo e tšoeu ea Apple e na le 'mala o moputsoa o bobebe, o se nang boima, o nang le motlakase e le eona feela e sebelisoang sebakeng se le seng sa monochrome.
- Antimetal — Tlaleho ea mohlophisi pampiring ea tranelate—hoseng ho khutsitseng koranteng ea saense, moo boitšoaro bo bontšang kholiseho 'me bo-ralif ba etsa mosebetsi o boima
- Perk — Kalaka ea motlakase pampiring e futhumetseng ea letlalo
- Ditto — Sebaka sa ho lokisa lipalesa tsa naha se bonesitsoeng ke letsatsi. Libaka tse futhumetseng tsa tranelate, 'mala o mosehla o benyang, enke e tebileng e putsoa bo bofubelu, mebala ea tlhaho e thunya ka mor'a sejana.
- Officevibe — Makasine oa bahlophisi o buang ka pampiri e mofuthu e 'mala o boreledi. Nahana ka moqoqo o nahannoeng ka hloko mabapi le tsamaiso ea HR, o hlahisitsoeng e le sehlahisoa—mongolo o kobehileng oa serif o ntseng o hoeshetsa ka har'a sebopeho sa sejoale-joale se seputsoa.