Notion
Incwadi yephepha efudumeleyo elangeni lasemini
Ujongano lweNotion lufana nencwadana yephepha ethandwayo emini: i-canvas efudumeleyo nekhrimu (#f6f5f4) evakala ngathi iyachukumisa kunokuba ibe yimfuza, i-typography ekhululekileyo engena-serif enika ubunzima bokuhlela kwikopi yemveliso, kunye nombala osetyenziswa njengeempawu zokubhala ezinqabileyo—i-"pills" yepeach igxininisa izenzi, i-blue enye iqinisa isenzo esiphambili, kunye noluhlu olujikelezayo lwemibala ye-accent (i-coral, i-amber, isibhakabhaka, i-midnight) ifaka imibala kwimvelaphi yekhadi njengezitikha. Amakhadi acwangciswe kwi-canvas enemida emincinci kunye neekona—akukho zithunzi, akukho chrome—njengeendawo ezifakwe umgca zencwadana yeMoleskine. I-animation iyadlala kwaye ine-spring, kunye notshintsho olugudileyo kwi-200ms kunye ne-animations yabalinganiswa abane-spring ezizisa ubomi kwi-interface ngaphandle kokuba zihombise.
Ububanzi obuphezulu bunqunyelwe kwi-1440px. Into ephambili yi-stack ephakathi: umqolo weesimboli → isihloko esikhulu esinemigca emibini esinepilisi enemibala efakwe ngaphakathi → isihloko esincinci → umqolo onamaqhosha amabini okubiza isenzo → i-mockup enkulu ye-UI yemveliso. Ngaphantsi kwento ephambili, amacandelo atshintshana phakathi kweegridi zamakhadi amhlophe kunye neephaneli ze-accent ezinemibala epheleleyo. Udonga lwelogo luyigridi yomqolo omnye ephakathi yeelogo zamaqabane kwi-grayscale. Iibhloko zeempawu zisebenzisa uyilo lweekholamu ezimbini (umbhalo ngasekhohlo, iphaneli enemibala ngasekunene), itshintshana ukusuka ekhohlo ukuya ekunene phakathi kwamacandelo. Icandelo elithi "Buza abancedisi bakho xa ufuna" lisebenzisa igridi yamakhadi e-2x2, apho ikhadi eliphezulu lithatha ububanzi obupheleleyo, kwaye umqolo ongezantsi wahlulwe waba ziikholamu ezimbini ezilinganayo. Imijelo phakathi kwamacandelo inkulu (~80px), idala isigqi esithe nkqo esizolileyo. Ukuhambahamba yibha ephezulu ezinzileyo ye-64px enezinto zokuhamba eziphakathi kunye namaqhosha esenzo ahambelana ngasekunene.
Imifanekiso ibaluleke kakhulu, akukho zithombe. Ulwimi olubonakalayo lwakhiwe kwiimpawu ezithe tyaba nezinemifanekiso (imiphetho ejikelezileyo kwizangqa ezinemibala ezi-2px), izinto zokuhombisa ezingabonakaliyo (ii-squiggles ezidwetshwe ngesandla, i-glitter, iintolo, iimilo zeentyatyambo), kunye neemodeli zembonakalo yomsebenzisi yemveliso. Iimpawu zivela kwifestile ephambili njengomqolo othe tye wee-avatar ezisixhenxe kwaye zisasazeke kwiphepha lonke njengeempawu zokubhala ezidlalayo. Ii-skrini zemveliso zezona zinto zibonakalayo "zokwenyani": zibonisa i-interface yokwenyani yeNotion (iibhodi zeKanban, imbono yamaxwebhu, iiphaneli zearhente ye-AI) kunye neseti epheleleyo yezinto kunye nedatha yokwenyani. I-mockup yemveliso kwifestile ephambili inkulu, iphakathi, kwaye iphosa isithunzi esinye esahlula kwi-canvas. Akukho zithombe zendlela yokuphila, akukho mifanekiso yesitokhwe, akukho mifanekiso ye-3D engabonakaliyo.
Iphalethi
Uphawu
- Notion Blue
#0075de— Into ephambili egcwalisa iqhosha lokubiza isenzo (CTA), i-accent kwi-active navigation, amaqhosha esenzo azaliswe yiyo kuphela i-color scheme kwinkqubo ephantse ibe monochrome egcwele ngokwaneleyo ukuba ibonwe njengeswitshi.
Ukungathathi cala
- Paper Warmth
#f6f5f4— I-canvas yephepha, imvelaphi yefestile ephambili, kunye nemvelaphi yecandelo zonke zinemibala efudumeleyo, enombala oluhlaza okwesibhakabhaka enika inkqubo imvakalelo echukumisayo, efana neye-analog. - Pure White
#ffffff— Imiphezulu yekhadi, iiphaneli eziphakanyisiweyo, imvelaphi yelogo, umbhalo ochaseneyo kumakhadi amnyama. - Ink Black
#000000— Isicatshulwa esiphambili, amakhonkco okuhambahamba, izihloko - zisetyenziswa ngendlela eyahlukileyo yokucaca (100%, 95%, 90%, 60%, 40%, 20%) ukwakha uluhlu ngaphandle kokongeza imibala emitsha. - Charcoal
#111111— Ukhetho lombhalo omnyama kwiindawo ze-UI apho umnyama omsulwa ubuya kubonakala unzima kakhulu. - Stone
#757575— Umbhalo wesibini wokukhangela, umbhalo oncedisayo othuliweyo, iilebhile zamaqhosha ezikhutshazisiweyo - i-alpha ye-inki engama-60% - Graphite
#615d59— Isicatshulwa esiphambili sinomfanekiso ofudumeleyo - ngwevu omdaka, ohambelana nemvelaphi efudumeleyo.
Ubhalo lweencwadi
ukusuka kwi-12 ukuya kwi-96px · amanyathelo ali-10
- NotionInter — ukutshintshwa: Inter · imida 400, 500, 600, 700 · Ifonti ephambili ye-sans-serif yi-geometric humanist eneempawu ezincinci, ezisetyenziswa ngobukhulu obungama-400 kumbhalo womzimba, ezingama-500 kunxibelelwano lomsebenzisi, kunye nama-600-700 kwizihloko. Isikali sefonti sisebenzisa isithuba soonobumba abangalunganga kubukhulu obukhulu (-4.6px kwi-96px, -2px kwi-72px), nto leyo eyenza isihloko sibonakale sincinci kwaye siqinisekile, endaweni yokuba sibonakale sinomoya.
- Lyon Text — ukutshintshwa: Source Serif Pro · imida 400 · Ifonti ye-serif yomhleli, egcinelwe amacandelo athile esicatshulwa esiphambili kunye neentshayelelo zecandelo, isetyenziswa kancinci (kane) ukunika ubunzima bombhalo we-typeface, njengesicatshulwa esikwindlela yokubhala kwimagazini. Isebenza njenge-accent ecwangcisiweyo endaweni yokuba yi-hierarchy efanayo.
Amaxesha okuphumla kunye nefom
| Injongo | Intsingiselo |
|---|---|
| Uxinano | umndilili |
| Inyathelo elisisiseko | 8px |
| Irediyasi yeqhosha | 8px |
| Irediyasi yekhadi | 12px |
| Izithunzi | akukho - imida endaweni yezithunzi |
| Phakathi kwamacandelo | 80px |
| Ububanzi bephepha | 1440px |
I-AI iza kwakha iwebhusayithi yakho ngesitayile sika- Notion 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
- Dub — Iphaneli yokulawula iphepha lerayisi elingacwebezeliyo leLink
- Seline Analytics — Itheyibhile yohlalutyo ezolileyo ephepheni elifudumeleyo
- 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.