Notion
Yon kaye papye cho nan solèy midi a
Entèfas Notion an sanble ak yon kaye papye byen renmen an plen lajounen: yon twal cho, krèm (#f6f5f4) ki santi l taktil olye ke esteril, yon tipografi sans-serif jenere ki bay pwa editoryal nan kopi pwodwi a, ak koulè yo itilize kòm ponktiyasyon ra—"grenn" pèch mete aksan sou vèb yo, yon sèl ble ankre aksyon prensipal la, epi yon seri koulè aksan wotasyon (koray, anm, syèl, minwi) kolore background kat yo tankou avek fich. Kat yo ranje sou yon twal ak fwontyè ak kwen mens—pa gen lonbray, pa gen chrome—tankou seksyon ki gen liy nan yon kaye Moleskine. Animasyon an amizan e elastik, ak tranzisyon lis nan 200ms ak animasyon karaktè elastik ki bay koòdone a lavi san yo pa dekoratif.
Santre, lajè maksimòm lan limite a apeprè 1440px. Eleman prensipal la se yon pil santre: yon ranje senbòl → yon gwo tit de liy ak yon grenn koulè entegre → yon soutit → yon ranje ak de bouton apèl-a-aksyon → yon gwo maket koòdone itilizatè pwodwi. Anba eleman prensipal la, seksyon yo altène ant griy kat blan ak panno aksan tout koulè. Miray logo a se yon griy yon sèl ranje santre ak logo patnè an echèl gri. Blòk karakteristik yo itilize yon layout de kolòn (tèks sou bò gòch la, panno koulè sou bò dwat la), altène goch a dwat ant seksyon yo. Seksyon "Mande asistan ou yo sou demann" lan itilize yon griy kat 2x2, kote kat anwo a pran tout lajè a, epi ranje anba a divize an de kolòn egal. Ti espas ki genyen ant seksyon yo jenere (~80px), sa ki kreye yon ritm vètikal kalm. Navigasyon an se yon ba anwo fiks 64px wotè ak eleman navigasyon santre ak bouton aksyon aliyen adwat.
Ilistrasyon yo enpòtan anpil, san foto. Langaj vizyèl la bati sou senbòl plat ak ilistrasyon (kwen awondi nan sèk koulè 2px), eleman dekoratif abstrè (zwi ki fèt alamen, payèt, flèch, fòm flè), ak maket koòdone itilizatè pwodwi a. Senbòl yo parèt nan fenèt prensipal la kòm yon ranje orizontal sèt avatar epi yo gaye toupatou sou paj la kòm ponktiyasyon amizan. Ekran pwodwi yo se sèl eleman vizyèl "reyèl" yo: yo montre koòdone Notion aktyèl la (tablo Kanban, vi dokiman, panèl ajan IA) ak yon seri konplè eleman ak done reyèl. Makèt pwodwi a nan fenèt prensipal la gwo, santre, epi li jete yon sèl lonbray ki separe l ak twal la. Pa gen foto mòd vi, pa gen imaj stock, pa gen rann 3D abstrè.
Palèt
Mak
- Notion Blue
#0075de— Eleman prensipal ki ranpli bouton apèl-a-aksyon (CTA) a, yon aksan nan navigasyon aktif la, bouton aksyon ranpli yo se sèl konbinezon koulè nan yon sistèm prèske monokrom ki ase satire pou yo ka wè li kòm yon switch.
Netral
- Paper Warmth
#f6f5f4— Kanva paj la, background fenèt prensipal la, ak background seksyon an tout se koulè cho, yon ti jan bèj ki bay sistèm nan yon sansasyon taktil, analòg. - Pure White
#ffffff— Sifas kat, panno an relief, background logo, tèks kontraste sou kat nwa yo. - Ink Black
#000000— Tèks prensipal, lyen navigasyon, tit - yo itilize avèk diferan transparans (100%, 95%, 90%, 60%, 40%, 20%) pou konstwi yon yerachi san ajoute nouvo koulè. - Charcoal
#111111— Yon opsyon tèks nwa pou zòn koòdone itilizatè kote nwa pi ta sanble twò di. - Stone
#757575— Tèks navigasyon segondè, tèks asistans ki pa klè, etikèt bouton ki enfim - 60% lank alfa - Graphite
#615d59— Tèks prensipal la gen yon ton cho - gri mawon, ki ann amoni ak background cho a.
Tipografi
soti nan 12 pou rive nan 96px · 10 etap
- NotionInter — ranplasman: Inter · plan 400, 500, 600, 700 · Font prensipal sans-serif la se yon imanis jewometrik ak ti sibtil nuans, yo itilize li nan gwosè 400 pou kò tèks la, 500 pou navigasyon/koòdone itilizatè a, ak 600-700 pou tit yo. Echèl font lan itilize yon espasman lèt negatif agresif nan pi gwo gwosè yo (-4.6px nan 96px, -2px nan 72px), sa ki fè tit la parèt pi kontra enfòmèl ant epi pi asire, olye ke li lejè.
- Lyon Text — ranplasman: Source Serif Pro · plan 400 · Polis serif editoryal la, ki rezève pou seksyon endividyèl nan tèks prensipal la ak entwodiksyon seksyon yo, yo itilize l ak modération (kat fwa) pou bay karaktè a yon pwa literè, menm jan ak yon sitasyon nan yon layout magazin. Li fonksyone kòm yon aksan sistemik olye de yon yerachi paralèl.
Entèval ak fòm
| Objektif | Siyifikasyon |
|---|---|
| Dansite | mwayèn |
| Etap debaz | 8px |
| Reyon bouton | 8px |
| Reyon kat | 12px |
| Lonbray | pa gen fwontyè olye de lonbraj |
| Ant seksyon yo | 80px |
| Lajè paj la | 1440px |
IA ap bati sit entènèt ou a nan style Notion epi ranpli li.
- Ranpli ak pwodwi ak piblikasyon atravè lyen an - Instagram, TikTok, Facebook.
- Transfere kontni ki soti nan ansyen sit ou a—jis presize adrès la.
- Design modèn sou pi bon motè a: React ( Next.js) ak rann sèvè ak optimize SEO pare pou itilize.
- Optimizasyon SEO konplètman otomatik pou rezilta rechèch ak rekòmandasyon rezo newòn.
Stil ki sanble
- ElevenLabs — Yon redaksyon foto nan ton krèm cho ak tit sibtil. Yon kaye style Bauhaus—papye koulè kokiy ze, lank nwa, ak yon sèl aksan mov ak zoranj pou montre pwodwi a.
- Awesomic — May zenk editoryal ak mak ponktiyasyon zoranj ki fè moun panse ak konfeti
- Monad — jounal teknik editoryal sou parchemin cho
- Dub — Panèl kontwòl papye diri mat Link la
- Seline Analytics — Yon tab analiz trankil sou papye cho
- Anthropic — Yon jounal syantifik sou velòm cho—sifas ivwa kalm, tit editoryal ak serife, ak yon sèl aksan ajil ki parèt sèlman lè gen yon aksyon ki nesesè.
- Calendly — Lank ble fonse sou mab frèt
- Augen Pro — Prezantasyon blan Apple la prezante yon ble elektrik, klinik, lejè kòm sèl aksan nan yon espas monokrom.
- Antimetal — Yon kwonik editoryal sou papye krèm—yon maten trankil nan yon jounal syantifik, kote kontrent transmèt konfyans epi serif yo fè travay di a.
- Perk — Lacho elektrik sou papye parchemin cho
- Ditto — Yon atelye anba solèy k ap kreye echantiyon flè sovaj. Sifas krèm cho, yon koulè baz jòn vibran, lank ble maren fonse, fòm koulè òganik k ap fleri dèyè pyès la.
- Officevibe — Yon magazin editoryal sou papye koulè krèm cho. Imajine yon redaksyon byen reflechi sou jesyon resous imèn, prezante kòm yon pwodwi—yon polis serif kousif k ap chuichui nan yon koòdone ble modèn.