Notion
Usa ka mainit nga notebook nga papel sa udto
Ang interface sa Notion morag usa ka gimahal nga notebook nga papel sa hayag nga adlaw: usa ka mainiton, krema nga canvas (#f6f5f4) nga mobati nga mahikap imbes nga sterile, manggihatagon nga sans-serif typography nga naghatag og gibug-aton sa editoryal sa kopya sa produkto, ug kolor nga gigamit isip sparse punctuation—ang peach "pills" nag-highlight sa mga verb, usa ka asul ang nag-angkla sa pangunang aksyon, ug usa ka nagtuyok nga han-ay sa mga accent hues (coral, amber, sky, midnight) nagkolor sa mga background sa card sama sa mga sticker. Ang mga card gihan-ay sa usa ka canvas nga adunay nipis nga mga border ug mga kanto—walay mga anino, walay chrome—sama sa mga linya nga seksyon sa usa ka Moleskine notebook. Ang animation makalingaw ug springy, nga adunay hapsay nga mga transisyon sa 200ms ug springy nga mga animation sa karakter nga naghatag kinabuhi sa interface nga dili pangdekorasyon.
Kon nakasentro, ang pinakataas nga gilapdon limitado sa gibana-bana nga 1440px. Ang pangunang elemento usa ka nakasentro nga stack: usa ka laray sa mga simbolo → usa ka dako nga duha ka linya nga headline nga adunay naka-embed nga colored pill → usa ka subheading → usa ka laray nga adunay duha ka call-to-action button → usa ka dako nga product UI mockup. Sa ubos sa pangunang elemento, ang mga seksyon nagpuli-puli tali sa mga grid sa puti nga mga kard ug full-color accent panel. Ang logo wall usa ka nakasentro nga single-row grid sa mga partner logo sa grayscale. Ang mga feature block naggamit og two-column layout (teksto sa wala, colored panel sa tuo), nga nagpuli-puli gikan sa wala ngadto sa tuo tali sa mga seksyon. Ang seksyon nga "Pangutan-a ang imong mga assistant on demand" naggamit og 2x2 card grid, diin ang ibabaw nga kard nag-okupar sa tibuok gilapdon, ug ang ubos nga laray gibahin sa duha ka managsama nga kolum. Ang mga gutter tali sa mga seksyon lapad (~80px), nga nagmugna og usa ka kalmado nga bertikal nga ritmo. Ang nabigasyon usa ka pirmi nga 64px nga taas nga top bar nga adunay nakasentro nga mga elemento sa nabigasyon ug mga action button nga naka-align sa tuo.
Ang mga ilustrasyon mao ang labing importante, walay mga litrato. Ang biswal nga pinulongan gitukod sa patag, giilustrar nga mga simbolo (lingin nga mga ngilit sa 2px nga kolor nga mga lingin), abstract nga mga elemento sa dekorasyon (mga squiggle nga gidrowing sa kamot, glitter, mga pana, mga porma sa bulak), ug mga mockup sa user interface sa produkto. Ang mga simbolo makita sa pangunang bintana isip usa ka pinahigda nga laray sa pito ka mga avatar ug nagkatag sa tibuok panid isip makalingaw nga mga bantas. Ang mga screenshot sa produkto mao lamang ang "tinuod" nga mga elemento sa biswal: gipakita nila ang aktuwal nga Notion interface (Kanban boards, document views, AI agent panels) nga adunay kompleto nga hugpong sa mga elemento ug tinuod nga datos. Ang mockup sa produkto sa pangunang bintana dako, nakasentro, ug naghatag ug usa ka anino nga nagbulag niini gikan sa canvas. Walay mga litrato sa estilo sa kinabuhi, walay stock nga mga imahe, walay abstract nga 3D renders.
Paleta
Brand
- Notion Blue
#0075de— Ang pangunang elemento nga nagpuno sa call-to-action (CTA) button, usa ka accent sa aktibong nabigasyon, ang napuno nga mga action button mao lamang ang color scheme sa usa ka hapit monochrome system nga saturated nga igo aron makita nga usa ka switch.
Neutral
- Paper Warmth
#f6f5f4— Ang page canvas, background sa main window, ug background sa section pulos mainiton, medyo beige nga mga kolor nga naghatag sa sistema og tactile, analog nga pamati. - Pure White
#ffffff— Mga nawong sa kard, gipataas nga mga panel, background sa logo, nagkalahi nga teksto sa itom nga mga kard. - Ink Black
#000000— Pangunang teksto, mga sumpay sa nabigasyon, mga ulohan - gigamit nga adunay lainlaing transparency (100%, 95%, 90%, 60%, 40%, 20%) aron makahimo og hirarkiya nga wala magdugang og bag-ong mga kolor. - Charcoal
#111111— Usa ka itom nga opsyon sa teksto para sa mga UI area diin ang purong itom tan-awon nga lisod sabton. - Stone
#757575— Teksto sa ikaduhang nabigasyon, gihilom nga teksto sa katabang, gi-disable nga mga label sa buton - 60% ink alpha - Graphite
#615d59— Ang pangunang teksto adunay mainit nga tono - brownish grey, nga nahiuyon sa mainit nga background.
Tipograpiya
gikan sa 12 ngadto sa 96px · 10 ka lakang
- NotionInter — kapuli: Inter · mga balangkas 400, 500, 600, 700 · Ang pangunang sans-serif nga font usa ka geometric humanist nga adunay gamay nga mga nuances, gigamit sa gidak-on nga 400 para sa body text, 500 para sa navigation/user interface, ug 600-700 para sa mga heading. Ang font scale naggamit ug agresibo nga negative letter spacing sa mas dagkong mga gidak-on (-4.6px sa 96px, -2px sa 72px), nga naghimo sa heading nga mas compact ug masaligon, imbes nga mas gaan.
- Lyon Text — kapuli: Source Serif Pro · mga balangkas 400 · Ang editorial serif font, nga gitagana alang sa indibidwal nga mga seksyon sa pangunang teksto ug mga pasiuna sa seksyon, gigamit nga panagsa ra (upat ka beses) aron mahatagan ang typeface og gibug-aton sa panitikan, susama sa usa ka kinutlo sa layout sa magasin. Kini naglihok isip usa ka sistematikong accent imbes nga usa ka parallel hierarchy.
Mga interval ug porma
| Katuyoan | Kahulugan |
|---|---|
| Densidad | aberids |
| Batakang lakang | 8px |
| Radius sa butones | 8px |
| Radius sa kard | 12px |
| Mga anino | walay - mga utlanan imbes nga mga anino |
| Taliwala sa mga seksyon | 80px |
| Lapad sa panid | 1440px |
Ang AI motukod sa imong website sa estilo sa Notion ug mopuno niini
- Pun-a og mga produkto ug mga post pinaagi sa link - Instagram, TikTok, Facebook.
- Ibalhin ang sulod gikan sa imong daang site—ipiho lang ang adres.
- Modernong disenyo sa pinakamaayong makina: React ( Next.js) nga adunay server rendering ug SEO optimization nga andam na gamiton.
- Bug-os nga awtomatik nga pag-optimize sa SEO para sa mga resulta sa pagpangita ug mga rekomendasyon sa neural network.
Parehas nga mga estilo
- ElevenLabs — Usa ka photo essay sa init nga krema nga mga kolor nga adunay malumo nga mga ulohan sa balita. Usa ka notebook nga istilo sa Bauhaus—papel nga kolor sama sa kabhang sa itlog, itom nga tinta, ug usa ka purpura ug kahel nga accent para sa display sa produkto.
- Awesomic — Editoryal nga zinc mesh nga adunay orange nga mga marka sa bantas nga nagpahinumdom sa confetti
- Monad — teknikal nga dyornal sa editoryal bahin sa mainit nga pergamino
- Dub — Panel sa pagkontrol sa matte rice paper sa Link
- Seline Analytics — Usa ka hilom nga analytical table sa init nga papel
- Anthropic — Usa ka siyentipikong field journal sa init nga vellum—kalma nga garing nga mga nawong, serifed nga mga ulohan sa editoryal, ug usa ka accent nga lapok nga makita lamang kung kinahanglan ang aksyon.
- Calendly — Itom nga asul nga tinta sa bugnaw nga marmol
- Augen Pro — Ang puti nga presentasyon sa Apple adunay klinikal, gaan, electric blue isip bugtong aksento sa usa ka monochrome nga espasyo.
- Antimetal — Usa ka kronika sa editoryal sa kremang papel—usa ka hilom nga buntag sa usa ka siyentipikong dyurnal, diin ang pagpugong nagpahayag sa pagsalig ug ang mga serif mao ang nagbuhat sa bug-at nga buluhaton
- Perk — Electric lime sa init nga parchment paper
- Ditto — Usa ka workshop nga gisidlakan sa adlaw nga naghimo og mga sample sa ihalas nga mga bulak. Mainit nga krema nga mga nawong, usa ka hayag nga dalag nga kolor sa base, lawom nga asul nga mga tinta, mga organikong kolor nga namulak sa luyo sa obra.
- Officevibe — Usa ka magasin nga editoryal sa init nga krema nga papel. Handurawa ang usa ka mahunahunaon nga sanaysay bahin sa pagdumala sa HR, nga gipresentar isip usa ka produkto—usa ka cursive serif font nga naghunghong pinaagi sa usa ka moderno nga asul nga interface.