Notion
Isang mainit na kuwaderno na papel sa ilalim ng araw ng tanghali
Ang interface ng Notion ay parang isang minamahal na notebook na papel sa liwanag ng araw: isang mainit at kremang canvas (#f6f5f4) na parang hinahawakan sa halip na baog, masaganang sans-serif na tipograpiya na nagbibigay ng editoryal na bigat sa kopya ng produkto, at kulay na ginamit bilang kalat-kalat na bantas—ang peach "pills" ay nagha-highlight ng mga pandiwa, isang asul ang nag-aangkla sa pangunahing aksyon, at isang umiikot na hanay ng mga accent hues (coral, amber, sky, midnight) ang nagkukulay sa mga background ng card na parang mga sticker. Ang mga card ay nakaayos sa isang canvas na may manipis na mga border at sulok—walang mga anino, walang chrome—tulad ng mga may linyang seksyon ng isang Moleskine notebook. Ang animation ay mapaglaro at masigla, na may maayos na mga transition sa 200ms at masiglang mga animation ng karakter na nagbibigay-buhay sa interface nang hindi nagiging dekorasyon.
Nakasentro, ang pinakamataas na lapad ay limitado sa humigit-kumulang 1440px. Ang pangunahing elemento ay isang nakasentrong stack: isang hanay ng mga simbolo → isang malaking dalawang-linya na headline na may naka-embed na colored pill → isang subheading → isang hanay na may dalawang call-to-action button → isang malaking product UI mockup. Sa ibaba ng pangunahing elemento, ang mga seksyon ay nagpapalitan sa pagitan ng mga grid ng mga puting card at mga full-color accent panel. Ang logo wall ay isang nakasentrong single-row grid ng mga partner logo sa grayscale. Ang mga feature block ay gumagamit ng two-column layout (teksto sa kaliwa, colored panel sa kanan), na nagpapalitan mula kaliwa pakanan sa pagitan ng mga seksyon. Ang seksyong "Tanungin ang iyong mga assistant on demand" ay gumagamit ng 2x2 card grid, kung saan ang pinakamataas na card ay sumasakop sa buong lapad, at ang ibabang hanay ay nahahati sa dalawang pantay na hanay. Ang mga gutter sa pagitan ng mga seksyon ay malawak (~80px), na lumilikha ng isang kalmadong patayong ritmo. Ang nabigasyon ay isang nakapirming top bar na 64px ang taas na may mga nakasentrong navigation element at mga action button na nakahanay sa kanan.
Napakahalaga ng mga ilustrasyon, walang mga larawan. Ang visual na wika ay binuo sa mga patag at may mga ilustrasyong simbolo (mga bilugan na gilid sa 2px na kulay na bilog), mga abstract na pandekorasyon na elemento (mga hand-drawn squiggle, glitter, mga arrow, mga hugis ng bulaklak), at mga mockup ng user interface ng produkto. Ang mga simbolo ay lumilitaw sa pangunahing window bilang isang pahalang na hilera ng pitong avatar at nakakalat sa buong pahina bilang mapaglarong bantas. Ang mga screenshot ng produkto ang tanging "totoong" visual na elemento: ipinapakita nila ang aktwal na Notion interface (mga Kanban board, mga document view, mga AI agent panel) na may kumpletong hanay ng mga elemento at totoong data. Ang mockup ng produkto sa pangunahing window ay malaki, nasa gitna, at nagbubuga ng isang anino na naghihiwalay dito mula sa canvas. Walang mga larawan ng lifestyle, walang mga stock na imahe, walang abstract na 3D render.
Paleta
Tatak
- Notion Blue
#0075de— Ang pangunahing elementong pumupuno sa call-to-action (CTA) button, isang accent sa aktibong nabigasyon, ang mga napunong action button ang tanging scheme ng kulay sa isang halos monochrome system na sapat na saturated upang makita bilang isang switch.
Neutral
- Paper Warmth
#f6f5f4— Ang page canvas, background ng pangunahing window, at background ng seksyon ay pawang mainit, bahagyang beige na mga kulay na nagbibigay sa sistema ng pandamdam at analog na pakiramdam. - Pure White
#ffffff— Mga ibabaw ng card, nakataas na mga panel, background ng logo, magkakaibang teksto sa madilim na card. - Ink Black
#000000— Pangunahing teksto, mga link sa nabigasyon, mga heading - ginagamit nang may iba't ibang transparency (100%, 95%, 90%, 60%, 40%, 20%) upang bumuo ng hirarkiya nang hindi nagdaragdag ng mga bagong kulay. - Charcoal
#111111— Isang opsyon para sa madilim na teksto para sa mga bahagi ng UI kung saan ang purong itim ay magmumukhang masyadong magaspang. - Stone
#757575— Pangalawang teksto ng nabigasyon, naka-mute na teksto ng pantulong, hindi pinagana ang mga label ng buton - 60% ink alpha - Graphite
#615d59— Ang pangunahing teksto ay may mainit na tono - kayumangging kulay abo, na naaayon sa mainit na background.
Tipograpiya
mula 12 hanggang 96px · 10 hakbang
- NotionInter — kapalit: Inter · mga balangkas 400, 500, 600, 700 · Ang pangunahing sans-serif na font ay isang geometric humanist na may mga banayad na nuances, na ginagamit sa mga sukat na 400 para sa body text, 500 para sa navigation/user interface, at 600-700 para sa mga heading. Ang font scale ay gumagamit ng agresibong negative letter spacing sa mas malalaking sukat (-4.6px sa 96px, -2px sa 72px), na nagpaparamdam sa heading na mas siksik at may kumpiyansa, sa halip na maluwag.
- Lyon Text — kapalit: Source Serif Pro · mga balangkas 400 · Ang editorial serif font, na nakalaan para sa mga indibidwal na seksyon ng pangunahing teksto at mga panimula ng seksyon, ay ginagamit nang matipid (apat na beses) upang mabigyan ng pampanitikang bigat ang typeface, katulad ng isang sipi sa layout ng isang magasin. Ito ay gumaganap bilang isang sistematikong tuldik sa halip na isang parallel na hirarkiya.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | karaniwan |
| Pangunahing hakbang | 8px |
| Radius ng buton | 8px |
| Radius ng card | 12px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 80px |
| Lapad ng pahina | 1440px |
Gagawa ang AI ng website mo sa estilong Notion at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- ElevenLabs — Isang photo essay sa maayang kulay krema na may banayad na mga headline. Isang notebook na istilong Bauhaus—papel na kulay itlog, itim na tinta, at isang lila at orange na accent para sa display ng produkto.
- Awesomic — Editoryal na zinc mesh na may orange na bantas na nakapagpapaalala ng confetti
- Monad — teknikal na dyornal ng editoryal tungkol sa mainit na pergamino
- Dub — Control panel ng Link na gawa sa matte rice paper
- Seline Analytics — Isang tahimik na analytical table sa mainit na papel
- Anthropic — Isang siyentipikong field journal sa mainit na vellum—mga kalmadong ibabaw na garing, mga serif na heading editoryal, at isang natatanging accent na luwad na lumilitaw lamang kapag kinakailangan ng aksyon.
- Calendly — Madilim na asul na tinta sa malamig na marmol
- Augen Pro — Ang puting presentasyon ng Apple ay nagtatampok ng klinikal, magaan, at de-kuryenteng asul bilang tanging accent sa isang monochrome na espasyo.
- Antimetal — Isang kronikong editoryal sa kremang papel—isang tahimik na umaga sa isang siyentipikong dyornal, kung saan ang pagtitimpi ay naghahatid ng kumpiyansa at ang mga serif ang siyang nagpapabigat
- Perk — Electric lime sa mainit na parchment paper
- Ditto — Isang workshop na naliliwanagan ng araw na lumilikha ng mga sample ng wildflower. Mainit na kremang ibabaw, matingkad na dilaw na kulay, malalim na asul na tinta, mga organikong kulay na namumukadkad sa likod ng obra.
- Officevibe — Isang magasin na editoryal sa mainit at kulay kremang papel. Isipin ang isang maalalahaning sanaysay tungkol sa pamamahala ng HR, na inilalahad bilang isang produkto—isang cursive serif font na bumubulong sa isang modernong asul na interface.