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
- Mollie — Ebe a na-ere ihe na cashmere, akwụkwọ ndekọ gbara ọchịchịrị. Hapụ oghere ọcha zuru oke maka nhazi ederede gburugburu ederede ojii ahụ, wee jiri ude ọkụ, espresso browns, na foto ndị metụtara ngwaahịa mee ka ihe ndị a pụta ìhè.
- Kagi — Ụlọ ọgụgụ dị iche. Mepụta oghere ọcha mepere emepe gburugburu ederede graphite gbara ọkpụrụkpụ, jiri ụda olu odo odo na elu pastel na-ekpo ọkụ mee ka udo dị.
- Milanote — Milanote bụ ụlọ ọrụ ihe okike raara onwe ya nye. Mepụta ibe ndị a na-ahụ anya site na iji bọọdụ ihe osise na-ese n'elu mmiri: mgbidi gbara ọchịchịrị, oghere ngosi ọcha, na nseta ihuenyo ndị dị ka ihe ndị dị adị n'ezie nwere omimi dị nro.
- Co2 — Atlas ihu igwe n'ìhè oyi. Mepụta ibe dị ka ala akwụkwọ ikuku, ebe isi okwu serif, data nwere koodu otu, na onyonyo oyi na-egosipụta oke ọcha sara mbara.
- GitButler — Turquoise dị na njedebe nke ederede ahụ. Nchikota nke isi akụkọ serif dị iche iche nwere grid teknụzụ dị nro, elu graphite na-ekpo ọkụ, na olu turquoise dị nro.
- 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