Dub
Ogwe njikwa akwụkwọ osikapa matte nke Link
Sistemụ anya nke Dub nwere mma SaaS nke a na-ejigide, nke fọrọ nke nta ka ọ bụrụ nchịkọta akụkọ: ákwà mkpuchi dị ọcha nke dị nso na nsọtụ dị gịrịgịrị nke ejiri ókèala dị gịrịgịrị jide ọnụ kama ihe ndị na-apụta, yana ụdịdị monochrome dị oke ukwuu nke na-enye nkwado nhazi na otu agba anụnụ anụnụ na-egbuke egbuke (#2563eb) na-eme ka a mara ihe. Elu ya na-anọgide na-adị larịị ma na-enweghị frame na mbụ, mana akpa ọ bụla nwere oke 1px #e5e5e5, na-akpali mmetụta nke akwụkwọ ebipụtara. A na-enweta àgwà site na obere ihe osise agba "mkpụrụ ọgwụ" (oroma, akwụkwọ ndụ akwụkwọ ndụ, odo odo) nke na-ese n'elu palette na-anọpụ iche, na isi okwu ndị nwere obi ike na nke oge a na-enweghị ihe na-egbuke egbuke. Ihe mejupụtara ya dị obere ma dị oke: gutters 8px, radius kaadị 12px, akara dị ka mkpụrụ ọgwụ na 9999px, na njikwa a na-adịghị ahụ anya kama bọtịnụ dị arọ, jupụtara.
E wuru ibe a n'elu nhazi etiti ya nke nwere oke obosara nke ihe dị ka 1200px. Isi ihe dị na ya bụ blọk ederede etiti ya nwere ihe atọ na-ese n'elu mmiri (Mmemme Ndị Mmekọ, Nyocha Mgbanwe, Njikọ Dị Mkpirikpi) nke edobere n'elu nnukwu nhazi ngwaahịa. E debere ngalaba ndị ahụ n'usoro kwụ ọtọ na gutters 64px na-agbanwe agbanwe, na-agbanwe n'etiti kanvas ọcha na haze akwụkwọ #f5f5f5 maka nkewa ụda. Ngalaba ala na-eji nhazi dị ka Z: ederede ederede dị n'etiti etiti atọ, a na-etinyekwa kaadị UI na-ese n'elu mmiri n'akụkụ aka ekpe na aka nri, na-emepụta ụda dị ka magazin. Igwe ojii akara ngosi bụ grid 5x2 dị mfe, nke dị n'etiti ibe ahụ. Nsoro ụzọ bụ obere ogwe elu - akara ngosi n'aka ekpe, igodo ụzọ n'etiti, otu bọtịnụ abụọ (bọtịnụ "Nbanye" mmụọ + bọtịnụ "Debanye aha" jupụtara) n'aka nri - na-enweghị menu edoziri ma ọ bụ nnukwu. Nhazi dashboard nke isi windo ahụ na-egosi nhazi ngwa kọlụm abụọ ochie: akụkụ aka nri edobere (yiri 240px) + mpaghara ọdịnaya nke na-akọwa njupụta nke ozi ngwaahịa maka ndị ọbịa tupu ha amalite ịpịgharịa.
Ihe onyonyo ndị a lekwasịrị anya na ngwaahịa, ọ bụghị nke lekwasịrị anya na ụdị ndụ. Ihuenyo bụ isi dị na nnukwu ihuenyo dashboard, nke na-anọchite anya ihe ngosi ngwaahịa n'ezie nwere ụzọ isi, tebụl data, na ihe UI na-ese n'elu mmiri, nke edobere dị ka panel dị larịị na kanvas ọcha. A na-egosi akara ngosi ndị ahịa na grid grayscale desaturated (beehiv, superpower, Chatbase, wdg) iji gosi arụmọrụ mgbasa ozi ọha ha, nke a na-ewepụ agba iji kwe ka otu olu anụnụ anụnụ nke ibe ahụ nọgide na-achịkwa. Kaadị ndị mmekọ na-ese n'elu mmiri (obere profaịlụ na taịlị nwere data ego/ịkwụ ụgwọ) na-agagharị gburugburu blọk ederede nchịkọta akụkọ dị n'okpuru, na-emepụta mmetụta nke omimi na-enweghị ojiji onyinyo na ederede n'onwe ya. Ụdị ndabere grid ntụpọ bụ njirimara mbinye aka: ahịrị dị gịrịgịrị nke obere ntụpọ nwere obere opacity na-emepụta udidi na mmetụta nke sistemụ imewe/elu eserese, na-emesi ọnọdụ saịtị ahụ ike dị ka "ikpo okwu njirimara njikọ ọgbara ọhụrụ." Akara ngosi ahụ pere mpe, nwere nkọwa na jupụta, ma na-eji palette accent (tangerine orange, lavender purple, mint green) maka mkpado atụmatụ. A naghị eji foto, ihe osise, ma ọ bụ ụdị 3D eme ihe—njikwa onye ọrụ nke ngwaahịa ahụ n'onwe ya bụ asụsụ anya.
Paletị
Akara
- Electric Blue
#2563eb— A na-eji agba akara ngosi bụ isi—akara ngosi, njikọ, ihe ngosi arụmọrụ dị mkpa, ọnọdụ na-arụ ọrụ, na ihe ngosi akara ngosi—eme ka sistemụ ahụ maa mma nke ukwuu. Anụ anụnụ anụnụ dị n'azụ ọcha na-emepụta naanị ihe na-adọrọ adọrọ na sistemụ ahụ. - Deep Sapphire
#1e40af— A na-eji ihe ndabere dị mkpa nke bọtịnụ ihe omume ahụ, ihe e ji mee ihe n'olu dara ụda nke oku ime ihe—naanị agba na-egosi ihe omume ahụ—adọta uche.
Na-anọpụ iche
- Canvas White
#ffffff— Ntọala ibe, elu kaadị, ogwe mmapụta bụ ntọala zuru oke nke ihuenyo ọ bụla. - Paper Mist
#f5f5f5— Mgbanwe agba dị nro maka kaadị ndị a kpọkọtara ọnụ, panel ndị ọzọ, na ihe ndị e ji ejupụta. - Ash
#e5e5e5— Ókè dị gịrịgịrị dị na kaadị ndị ahụ, njikọ ntinye na nkewa bụ ahịrị nhazi nke na-ejikọta sistemụ ahụ ọnụ. - Smoke
#d4d4d4— Oke dị nkọ maka akpa ahọpụtara na ndepụta bọtịnụ ndị ọzọ. - Pebble
#c8c8c8— Ókèala, ihe nhazi njikwa, na ihe nkewa nhazi nwere ọdịiche dị n'etiti. Ekwesighi iji agba a dị ka agba bụ isi maka oku maka ihe omume. - Midnight Ink
#0a0a0a— Ederede bụ isi nke bọtịnụ ndị ahụ, bọtịnụ ndị a kpụrụ akpụ, na ederede ịnyagharịa fọrọ nke nta ka ọ bụrụ oji maka ọdịiche kachasị.
Ụdị edemede
site na 11 ruo 48px · Nzọụkwụ 9
- Satoshi — nnọchi: Inter (weight 500 · ihe nhazi 500 · Isi Ihe Ngosi - ejiri naanị ahịrị 36–48px maka isi okwu na aha ngalaba. Ibu mkpụrụedemede - 500 (ọkara, ọ bụghị nke siri ike): Isi okwu na-adị ka nke nwere obi ike na nke ọgbara ọhụrụ, mana ọ dịghị mgbe ọ karịrị akarị. Nhazi geometric nke Satoshi na-enye ụdị edemede ahụ mmetụta dị ntakịrị na nke oge a nke otu ahụ Inter enweghị ike ịmegharị.
- Inter — nnọchi: Inter (native) · ihe nhazi 400, 500, 600 · Nchịkọta ahụ, akara UI, ịnyagharịa, isiokwu nta, na isi mmalite obere. Inter bụ isi ọrụ, na-ejikwa ihe niile site na obere akara 11px ruo isi mmalite nke 30px. Ibu nke 400 bụ ndabara maka nchịkọta ahụ, 500 maka ihe ndị a ma ama na akara bọtịnụ, na 600 bụ echekwara maka akara UI dị mkpa. 16px nwere ogologo ahịrị nke 1.5 bụ nha otu nzọụkwụ a na-ahụkarị (ihe 1220 na-eme), na-akwado na 16px bụ nha nchịkọta ahụ canonical.
- Geist Mono — nnọchi: JetBrains Mono or IBM Plex Mono · ihe nhazi 400, 500 · A na-eji obere ihe e ji koodu mee, metadata teknụzụ, na ihe e tinyere n'otu ebe n'ime blọk koodu na 12–14px na n'ime ihe ngosi koodu buru ibu na 24px. Nke a na-eme ka ngwaọrụ onye nrụpụta nwee ntụkwasị obi, nke kwekọrọ na ọnọdụ ngwaahịa Dub.
Oge na ụdị
| Ebumnuche | Ihe ọ pụtara |
|---|---|
| Njupụta | nkezi |
| Nzọụkwụ bụ isi | 8px |
| Redịọs bọtịnụ | 8px |
| Redịọs kaadị | 12px |
| Onyinyo | mba - ókèala kama onyinyo |
| N'etiti ngalaba | 64px |
| Obosara ibe | 1200px |
AI ga-ewulite weebụsaịtị gị n'ụdị Dub ma jupụta ya
- Jupụta ngwaahịa na ozi site na njikọ ahụ - Instagram, TikTok, Facebook.
- Bufee ọdịnaya site na saịtị ochie gị—kpọọ naanị adreesị ahụ.
- Nhazi ọgbara ọhụrụ na injin kacha mma: React ( Next.js) na nhazi sava na nhazi SEO n'ime igbe.
- Nhazi SEO akpaghị aka zuru oke maka nsonaazụ ọchụchọ na ndụmọdụ netwọkụ akwara.
Ụdị ndị yiri ya
- ElevenLabs — Edemede foto n'ụdị ude ọkụ nwere isi akụkọ dị mfe nghọta. Akwụkwọ ndetu ụdị Bauhaus—akwụkwọ nwere agba àkwá, ink ojii, na otu olu odo odo na oroma maka ngosipụta ngwaahịa.
- Awesomic — Ntugharị zinc nke nchịkọta akụkọ nwere akara edemede oroma na-echetara gị confetti
- Monad — akwụkwọ akụkọ teknụzụ nchịkọta akụkọ gbasara akwụkwọ parchment ọkụ
- Seline Analytics — Tebụl nyocha dị jụụ dị n'elu akwụkwọ ọkụ
- Notion — Akwụkwọ ndetu akwụkwọ na-ekpo ọkụ n'anwụ ehihie
- Anthropic — Akwụkwọ akụkọ sayensị gbasara vellum na-ekpo ọkụ—elu ọdụ́ dị jụụ, isi akụkọ e serifed, na otu olu ụrọ nke na-apụta naanị mgbe ọ dị mkpa ime ihe.
- Calendly — Ink na-acha anụnụ anụnụ gbara ọchịchịrị n'elu mabụl oyi
- Augen Pro — Ngosipụta ọcha nke Apple nwere acha anụnụ anụnụ eletriki, nke na-enweghị ibu, dịka naanị olu ya n'ime oghere monochrome.
- Antimetal — Akụkọ ihe mere eme nke akwụkwọ edemede dị n'akwụkwọ ude—ụtụtụ dị jụụ n'akwụkwọ sayensị, ebe njide onwe onye na-egosi obi ike na serif na-ebuli ibu arọ
- Perk — Lime eletriki dị na akwụkwọ parchment ọkụ
- Ditto — Ụlọ ọrụ ebe a na-eme ihe atụ okooko osisi ọhịa. Elu ude na-ekpo ọkụ, agba ntọala odo odo na-egbuke egbuke, ink anụnụ anụnụ miri emi, agba organic na-acha okooko osisi n'azụ ihe ahụ.
- Officevibe — Magazin nchịkọta akụkọ gbasara akwụkwọ na-acha ude ọkụ. Chee echiche banyere edemede dị mma gbasara njikwa HR, nke a na-egosi dị ka ngwaahịa—mkpụrụedemede serif nke na-ada ụda site na interface acha anụnụ anụnụ nke oge a.