Notion
Bukana e mofuthu ea pampiri letsatsing la motšehare
Sebopeho sa Notion se shebahala joaloka bukana e ratoang ea pampiri motšehare o moholo: kanavase e mofuthu, e boreleli (#f6f5f4) e ikutloang e ama ho fapana le ho ba e sa hloekang, e nang le mongolo o motle o sa serif o fanang ka boima ba bohlophisi koping ea sehlahisoa, le 'mala o sebelisoang e le matšoao a fokolang a puo - "lipilisi" tsa perekisi li totobatsa maetsi, putsoa e le 'ngoe e tiisa ketso ea mantlha, le letoto le potolohang la mebala ea accent (korale, amber, leholimo, bosiu) e daea bokamorao ba karete joalo ka li-sticker. Likarete li hlophisitsoe kanavaseng e nang le meeli e mesesaane le likhutlo - ha ho na meriti, ha ho na chrome - joalo ka likarolo tse nang le mela ea bukana ea Moleskine. Li-animation lia bapala ebile li na le springy, ka liphetoho tse boreleli ho 200ms le li-animation tsa litlhaku tse nang le springy tse tlisang bophelo ho sebopeho ntle le ho ba mekhabiso.
Bophara bo boholo bo lekanyelitsoe ho hoo e ka bang 1440px. Karolo e ka sehloohong ke sehlopha se bohareng: mola wa matshwao → sehlooho se seholo sa mela e mmedi se nang le pilisi e mebala e kentsweng → sehloohoana → mola o nang le dikonopo tse pedi tsa ho bitsa ketso → mohlala o moholo wa UI wa sehlahiswa. Ka tlase ho karolo e ka sehloohong, dikarolo di fapanyetsana pakeng tsa digridi tsa dikarata tse tshweu le diphanele tse nang le mmala o felletseng. Lebota la letshwao ke gridi ya mola o le mong e bohareng ya matshwao a balekane ka grayscale. Diboloko tsa dibopeho di sebedisa sebopeho sa kholomo tse pedi (mongolo ka letsohong le letshehadi, phanele e mebala ka ho le letona), e fapanyetsana ka ho le letshehadi ho ya ho le letona pakeng tsa dikarolo. Karolo ya "Botsa bathusi ba hao ha ba hloka" e sebedisa gridi ya dikarata tsa 2x2, moo karete e ka hodimo e nkang bophara bo felletseng, mme mola o ka tlase o arotsoe ka dikholomo tse pedi tse lekanang. Di-gutter pakeng tsa dikarolo di ngata (~80px), di etsa morethetho o kgutsitseng o otlolohileng. Tsamaiso ke bara e ka hodimo e tsitsitseng ya 64px e nang le dikarolo tsa ho tsamaya tse bohareng le dikonopo tsa ketso tse tsamaellanang le letshehadi.
Litšoantšo ke tsa bohlokoa haholo, ha li na linepe. Puo ea pono e hahiloe holim'a matšoao a bataletseng, a nang le litšoantšo (likhutlo tse chitja ka li-circles tse mebala ea 2px), likarolo tsa mekhabiso e sa bonahaleng (li-squiggles tse huloang ka letsoho, benyang, metsu, libopeho tsa lipalesa), le litšoantšo tsa sebopeho sa mosebelisi sa sehlahisoa. Matšoao a hlaha fensetereng e kholo e le mola o otlolohileng oa li-avatar tse supileng 'me a hasane ho pholletsa le leqephe e le matšoao a bapalang. Litšoantšo tsa sehlahisoa ke tsona feela likarolo tsa pono tsa "'nete": li bontša sebopeho sa 'nete sa Notion (maboto a Kanban, maikutlo a litokomane, liphanele tsa moemeli oa AI) ka sete e felletseng ea likarolo le data ea 'nete. Mohlala oa sehlahisoa fensetereng e kholo o moholo, o bohareng, 'me o hlahisa moriti o le mong o o arolang ho tloha ho canvas. Ha ho na linepe tsa mokhoa oa bophelo, ha ho litšoantšo tsa setoko, ha ho litšoantšo tsa 3D tse sa bonahaleng.
Palete
Letšoao
- Notion Blue
#0075de— Karolo e ka sehloohong e tlatsang konopo ea call-to-action (CTA), e leng lets'oao la ho tsamaea ka mokhoa o sebetsang, likonopo tsa ketso tse tlatsitsoeng ke tsona feela moralo oa 'mala tsamaisong e batlang e le monochrome e tletseng ho lekana ho nkoa e le switch.
Lehlakore
- Paper Warmth
#f6f5f4— Khane ea leqephe, bokamorao ba fensetere e kholo, le bokamorao ba karolo kaofela ke mebala e mofuthu, e benya hanyane e fang sistimi maikutlo a ho ama, a analog. - Pure White
#ffffff— Libaka tsa likarete, liphanele tse phahamisitsoeng, bokamorao ba lets'oao, mongolo o fapaneng likareteng tse lefifi. - Ink Black
#000000— Mongolo o ka sehloohong, lihokelo tsa ho tsamaea, lihlooho - li sebelisoa ka ho hlaka ho fapaneng (100%, 95%, 90%, 60%, 40%, 20%) ho haha tatelano ntle le ho eketsa mebala e mecha. - Charcoal
#111111— Khetho ea mongolo o lefifi bakeng sa libaka tseo UI e leng ho tsona moo botšo bo hloekileng bo ka shebahalang bo le thata haholo. - Stone
#757575— Mongolo oa bobeli oa ho tsamaea, mongolo oa mothusi ea khutsitseng, mabitso a konopo a holofetseng - alpha ea enke ea 60% - Graphite
#615d59— Mongolo o ka sehloohong o na le molumo o mofuthu - bohlooho bo sootho, bo lumellanang le bokamorao bo mofuthu.
Mongolo oa mongolo
ho tloha ho 12 ho isa ho 96px · mehato e 10
- NotionInter — sebaka: Inter · meralo 400, 500, 600, 700 · Fonte e ka sehloohong e sa serif ke setsebi sa botho sa jeometri se nang le dipharologanyo tse poteletseng, tse sebediswang ka boholo ba 400 bakeng sa mongolo wa mmele, 500 bakeng sa sebopeho sa ho tsamaya/mosebelisi, le 600-700 bakeng sa dihlooho. Sekala sa fonte se sebedisa sebaka se matla sa ditlhaku tse mpe boholong bo boholo (-4.6px ho 96px, -2px ho 72px), e leng se etsang hore sehlooho se ikutlwe se le senyane ebile se itshepa, ho ena le ho ba moya.
- Lyon Text — sebaka: Source Serif Pro · meralo 400 · Mongolo wa serif wa bohlophisi, o boloketsweng dikarolo tse ikgethang tsa sengoloa se seholo le dikenyelletso tsa dikarolo, o sebediswa hanyane (makgetlo a mane) ho fa mongolo boima ba dingolwa, jwalo ka qotso e hlophisitsweng makasineng. O sebetsa e le modumo o hlophisehileng ho ena le tatellano e bapileng.
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 | 80px |
| Bophara ba leqephe | 1440px |
AI e tla haha websaete ea hau ka setaele sa Notion '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
- Dub — Phanele ea taolo ea pampiri ea raese e matte ea Link
- Seline Analytics — Tafole e khutsitseng ea tlhahlobo pampiring e futhumetseng
- 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.