Notion
Ib phau ntawv sau sov so hauv lub hnub nruab hnub
Notion lub interface zoo li ib phau ntawv sau uas neeg nyiam heev thaum nruab hnub: ib daim ntaub canvas sov so, creamy (#f6f5f4) uas zoo li kov tau es tsis yog sterile, dav sans-serif typography qiv qhov hnyav rau cov ntawv luam tawm, thiab xim siv ua cov cim tsis tshua muaj - peach "tshuaj" qhia txog cov lus qhia, ib qho xiav anchors qhov kev ua tseem ceeb, thiab ib qho kev sib hloov ntawm cov xim accent (coral, amber, ntuj, nruab hmo) xim rau cov keeb kwm yav dhau los ntawm daim npav zoo li cov ntawv nplaum. Daim npav tau teeb tsa rau ntawm daim ntaub canvas nrog cov ciam teb nyias thiab cov ces kaum - tsis muaj duab ntxoov ntxoo, tsis muaj chrome - zoo li cov ntu ntawm phau ntawv Moleskine. Cov duab kos yog kev ua si thiab springy, nrog kev hloov pauv du ntawm 200ms thiab cov duab kos cim springy uas coj lub neej rau lub interface yam tsis tau kho kom zoo nkauj.
Nyob rau hauv nruab nrab, qhov dav tshaj plaws tsuas yog txwv rau kwv yees li 1440px. Lub ntsiab lus tseem ceeb yog ib pawg uas nyob hauv nruab nrab: ib kab ntawm cov cim → ib kab loj ob kab nrog ib lub tshuaj xim uas muab tso rau hauv → ib lub npe me → ib kab nrog ob lub khawm hu-rau-kev ua → ib qho khoom loj UI mockup. Hauv qab lub ntsiab lus tseem ceeb, cov ntu hloov pauv ntawm cov kab sib txuas ntawm cov ntawv dawb thiab cov vaj huam sib luag xim puv npo. Phab ntsa logo yog ib kab sib txuas ntawm cov logos khub hauv qhov nruab nrab hauv greyscale. Cov blocks feature siv ob kab layout (cov ntawv nyeem ntawm sab laug, vaj huam sib luag xim ntawm sab xis), hloov pauv sab laug mus rau sab xis ntawm cov ntu. Ntu "Nug koj cov neeg pabcuam raws li qhov xav tau" siv daim npav 2x2, qhov twg daim npav sab saum toj siv qhov dav tag nrho, thiab kab hauv qab yog faib ua ob kab sib npaug. Cov gutters ntawm cov ntu yog dav (~ 80px), tsim kom muaj lub suab ntsug ntsiag to. Lub navigation yog ib qho ruaj khov 64px siab sab saum toj bar nrog cov ntsiab lus navigation nyob hauv nruab nrab thiab cov nyees khawm ua haujlwm sib dhos sab xis.
Cov duab kos yog qhov tseem ceeb, tsis muaj duab. Cov lus pom yog tsim los ntawm cov cim tiaj tiaj, cov duab kos (cov npoo puag ncig hauv 2px xim voj voog), cov khoom dai kom zoo nkauj (squiggles kos tes, glitter, xub, paj), thiab mockups ntawm cov khoom siv interface. Cov cim tshwm sim hauv lub qhov rais tseem ceeb ua kab kab rov tav ntawm xya tus avatars thiab tau tawg thoob plaws nplooj ntawv ua si punctuation. Cov duab thaij duab khoom yog tib qho "tiag tiag" pom cov ntsiab lus: lawv qhia qhov tseeb Notion interface (Kanban boards, cov ntaub ntawv pom, AI tus neeg sawv cev panels) nrog rau tag nrho cov ntsiab lus thiab cov ntaub ntawv tiag tiag. Cov khoom mockup hauv lub qhov rais tseem ceeb yog loj, nyob hauv nruab nrab, thiab pov ib qho duab ntxoov ntxoo cais nws ntawm daim ntaub. Tsis muaj cov duab kev ua neej, tsis muaj cov duab Tshuag, tsis muaj 3D renders abstract.
Xim av
Hom
- Notion Blue
#0075de— Lub ntsiab lus tseem ceeb uas sau rau ntawm lub pob hu-rau-kev ua (CTA), ib qho kev hais txog hauv kev taw qhia nquag, cov khawm ua haujlwm puv nkaus yog tib lub xim hauv lub kaw lus yuav luag monochrome uas tau saturated txaus kom pom tau tias yog lub hloov.
Nruab nrab
- Paper Warmth
#f6f5f4— Cov ntaub ntawm nplooj ntawv, keeb kwm yav dhau ntawm lub qhov rais tseem ceeb, thiab keeb kwm yav dhau ntawm seem yog cov xim sov so, me ntsis beige uas ua rau lub kaw lus muaj qhov kov tau, zoo li analog. - Pure White
#ffffff— Cov nto ntawm daim npav, cov vaj huam sib luag tsa siab, keeb kwm yav dhau logo, cov ntawv sib txawv ntawm cov npav tsaus nti. - Ink Black
#000000— Cov ntawv tseem ceeb, cov kev sib txuas navigation, cov npe - siv nrog ntau yam pob tshab (100%, 95%, 90%, 60%, 40%, 20%) los tsim cov hierarchy yam tsis ntxiv cov xim tshiab. - Charcoal
#111111— Ib qho kev xaiv ntawv tsaus nti rau cov cheeb tsam UI uas cov xim dub yuav zoo li hnyav dhau. - Stone
#757575— Cov ntawv qhia kev thib ob, cov ntawv pab uas tsis muaj suab, cov ntawv cim khawm uas tsis siv tau - 60% ink alpha - Graphite
#615d59— Cov ntawv tseem ceeb muaj lub suab sov so - xim av daj, uas sib haum xeeb nrog keeb kwm yav dhau sov so.
Kev sau ntawv
txij li 12 mus rau 96px · 10 kauj ruam
- NotionInter — hloov: Inter · cov qauv qhia 400, 500, 600, 700 · Tus ntawv sans-serif tseem ceeb yog tus qauv geometric humanist nrog cov nuances me me, siv ntawm qhov loj 400 rau cov ntawv hauv lub cev, 500 rau kev navigation / user interface, thiab 600-700 rau cov ntawv sau. Cov ntawv teev lus siv cov ntawv tsis zoo ntawm cov ntawv loj dua (-4.6px ntawm 96px, -2px ntawm 72px), uas ua rau lub npe zoo li me me thiab ntseeg siab dua, es tsis yog airy.
- Lyon Text — hloov: Source Serif Pro · cov qauv qhia 400 · Cov ntawv sau ua ntawv kho kom zoo nkauj, uas yog siv rau txhua ntu ntawm cov ntawv tseem ceeb thiab cov lus qhia ntawm ntu, tsuas yog siv me ntsis xwb (plaub zaug) los muab qhov hnyav ntawm cov ntawv sau, zoo ib yam li cov lus hais hauv cov ntawv xov xwm. Nws ua haujlwm ua lub suab hais lus tsis yog ib qho kev sib luag.
Lub sijhawm thiab daim ntawv
| Lub Hom Phiaj | Lub ntsiab lus |
|---|---|
| Qhov Ceev | nruab nrab |
| Kauj ruam yooj yim | 8px |
| Lub vojvoog ntawm lub pob | 8px |
| Lub vojvoog ntawm daim npav | 12px |
| Duab ntxoov ntxoo | tsis muaj ciam teb es tsis yog duab ntxoov ntxoo |
| Nruab nrab ntawm cov ntu | 80px |
| Qhov dav ntawm nplooj ntawv | 1440px |
AI yuav tsim koj lub vev xaib hauv hom ntawv Notion thiab sau nws
- Sau cov khoom thiab cov ntawv tshaj tawm los ntawm qhov txuas - Instagram, TikTok, Facebook.
- Hloov cov ntsiab lus ntawm koj lub xaib qub - tsuas yog qhia qhov chaw nyob xwb.
- Tsim qauv niaj hnub ntawm lub cav zoo tshaj plaws: React ( Next.js) nrog rau kev ua haujlwm ntawm lub server thiab kev ua kom zoo dua SEO tawm ntawm lub thawv.
- Kev ua kom zoo dua SEO tag nrho rau cov txiaj ntsig tshawb nrhiav thiab cov lus pom zoo ntawm neural network.
Cov qauv zoo sib xws
- ElevenLabs — Ib tsab ntawv sau txog duab hauv xim dawb sov so nrog cov ntawv xov xwm me me. Ib phau ntawv sau ua qauv Bauhaus—daim ntawv xim qe qe, kua dub, thiab ib daim xim ntshav thiab txiv kab ntxwv rau kev tso saib cov khoom.
- Awesomic — Cov ntawv xov xwm zinc mesh nrog cov cim kab lus txiv kab ntxwv uas zoo li confetti
- Monad — phau ntawv xov xwm txog kev kho mob ntawm daim ntawv parchment sov
- Dub — Link lub vaj huam sib luag tswj hwm daim ntawv nplej matte
- Seline Analytics — Ib lub rooj tshuaj xyuas ntsiag to ntawm daim ntawv sov
- Anthropic — Ib phau ntawv sau txog kev tshawb fawb txog cov ntaub vellum sov so—cov nplaim dawb mos mos, cov ntawv sau ua serifed, thiab ib qho av nplaum uas tsuas tshwm sim thaum xav tau kev nqis tes ua xwb.
- Calendly — Xim xiav tsaus nti rau ntawm marble txias
- Augen Pro — Kua cov xim dawb muaj xim xiav uas tsis hnyav, kho mob, thiab hluav taws xob ua lub ntsiab lus tseem ceeb hauv qhov chaw monochrome.
- Antimetal — Ib zaj dab neeg sau txog kev sau xov xwm ntawm daim ntawv dawb - ib tag kis sawv ntxov ntsiag to ntawm phau ntawv xov xwm tshawb fawb, qhov twg kev tswj hwm qhia txog kev ntseeg siab thiab cov ntawv serifs ua qhov hnyav.
- Perk — Txiv qaub ntsuab hluav taws xob rau ntawm daim ntawv parchment sov
- Ditto — Ib lub chaw ua haujlwm uas muaj hnub ci ntsa iab los tsim cov qauv paj ntoo qus. Cov nplaim paj dawb sov so, xim daj ci ntsa iab, cov kua xim xiav xiav tob tob, cov xim organic tawg paj tom qab daim duab.
- Officevibe — Ib phau ntawv xov xwm sau txog kev tswj hwm HR uas siv daim ntawv xim dawb sov so. Xav txog ib tsab ntawv sau txog kev tswj hwm HR, uas tau nthuav tawm ua ib yam khoom - ib daim ntawv sau ua ntawv cursive serif uas hais lus ntsiag to los ntawm lub interface xiav niaj hnub.