Notion

Топла папирна свеска на подневном сунцу

Нотионов интерфејс изгледа као омиљена папирна свеска усред бела дана: топло, кремасто платно (#f6f5f4) које се осећа тактилно, а не стерилно, издашна бессерифна типографија даје уредничку тежину тексту производа, а боја се користи као ретка интерпункција — бресквасте „пилуле“ истичу глаголе, једна плава боја учвршћује главну радњу, а ротирајући низ акцентних нијанси (корална, ћилибарна, небо, поноћ) боји позадине картица попут налепница. Картице су распоређене на платну са танким ивицама и угловима — без сенки, без хрома — попут линијских делова Молескин свеске. Анимација је разиграна и еластична, са глатким прелазима на 200 мс и еластичним анимацијама ликова које уносе живот у интерфејс, а да притом нису декоративне.

Центрирано, максимална ширина је ограничена на приближно 1440 пиксела. Главни елемент је центрирани стек: ред симбола → велики дворедни наслов са уграђеном обојеном пилулом → поднаслов → ред са два дугмета за позив на акцију → велики макет корисничког интерфејса производа. Испод главног елемента, одељци се смењују између мрежа белих картица и акцентних панела у пуној боји. Зид са логотипом је центрирана мрежа са једним редом логотипа партнера у сивим тоновима. Блокови функција користе распоред са две колоне (текст лево, обојени панел десно), наизменично слева надесно између одељака. Одељак „Питајте своје асистенте по потреби“ користи мрежу картица 2x2, где горња картица заузима пуну ширину, а доњи ред је подељен на две једнаке колоне. Размаци између одељака су великодушни (~80 пиксела), стварајући мирни вертикални ритам. Навигација је фиксна горња трака висока 64 пиксела са центрираним елементима за навигацију и дугмадима за акцију поравнатим десно.

Илустрације су најважније, без фотографија. Визуелни језик је изграђен на равним, илустрованим симболима (заобљене ивице у круговима у боји од 2 пиксела), апстрактним декоративним елементима (ручно цртане вијугаве цртеже, шљокице, стрелице, облици цветова) и моделима корисничког интерфејса производа. Симболи се појављују у главном прозору као хоризонтални ред од седам аватара и раштркани су по страници као разиграна интерпункција. Снимци екрана производа су једини „прави“ визуелни елементи: они приказују стварни Notion интерфејс (Канбан табле, прикази докумената, панели AI агента) са комплетним скупом елемената и стварних података. Модел производа у главном прозору је велики, центриран и баца једну сенку која га одваја од платна. Нема фотографија животног стила, нема стокових слика, нема апстрактних 3Д рендера.

Чисти SaaS Минимализам Уредништво

https://notion.so

Палета

Brend

Notion Blue #0075de — Главни елемент који попуњава дугме за позив на акцију (CTA), акценат у активној навигацији, попуњена дугмад за акцију су једина шема боја у скоро монохроматском систему која је довољно засићена да се перципира као прекидач.

Неутрално

Paper Warmth #f6f5f4 — Платно странице, позадина главног прозора и позадина одељка су топлих, благо беж боја које систему дају тактилни, аналогни осећај.
Pure White #ffffff — Површине картица, подигнути панели, позадина логотипа, контрастни текст на тамним картицама.
Ink Black #000000 — Главни текст, навигациони линкови, наслови - користе се са различитом транспарентношћу (100%, 95%, 90%, 60%, 40%, 20%) за изградњу хијерархије без додавања нових боја.
Charcoal #111111 — Опција тамног текста за она подручја корисничког интерфејса где би чисто црна боја изгледала превише оштро.
Stone #757575 — Текст секундарне навигације, текст помоћи са искљученим звуком, ознаке дугмади које су онемогућене - 60% алфа мастила
Graphite #615d59 — Главни текст има топао тон - смеђе-сиву, што се хармонизује са топлом позадином.

Типографија

од 12 до 96 пиксела · 10 корака

NotionInter — замена: Inter · обриси 400, 500, 600, 700 · Главни фонт без серифа је геометријски хуманистички са суптилним нијансама, који се користи у величинама 400 за текст, 500 за навигацију/кориснички интерфејс и 600-700 за наслове. Скала фонта користи агресивни негативни размак између слова при већим величинама (-4,6px на 96px, -2px на 72px), што чини да наслов делује компактније и самоувереније, а не прозрачније.
Lyon Text — замена: Source Serif Pro · обриси 400 · Уреднички серифни фонт, резервисан за појединачне одељке главног текста и уводе одељака, користи се штедљиво (четири пута) како би се фонту дала књижевна тежина, слично цитату у распореду часописа. Функционише као системски акценат, а не као паралелна хијерархија.

Интервали и форма

Сврха	Значење
Густина	просек
Основни корак	8px
Радијус дугмета	8px
Радијус картице	12px
Сенке	не - ивице уместо сенки
Између одељака	80px
Ширина странице	1440px

Вештачка интелигенција ће изградити ваш веб сајт у Notion стилу и попунити га

Попуните производима и објавама преко линка - Instagram, TikTok, Facebook.
Пребаците садржај са вашег старог сајта — само наведите адресу.
Модерни дизајн на најбољем енџину: React ( Next.js) са рендеровањем на серверу и SEO оптимизацијом одмах по уградњи.
Потпуно аутоматизована SEO оптимизација за резултате претраге и препоруке неуронских мрежа.

Направите веб страницу у овом стилу

Слични стилови

ElevenLabs — Фото есеј у топлим крем тоновима са суптилним насловима. Свеска у стилу Баухауса — папир боје љуске јајета, црно мастило и један љубичасти и наранџасти акценат за приказивање производа.
Awesomic — Уредничка цинкова мрежа са наранџастим интерпункцијским знаковима који подсећају на конфете
Monad — уреднички технички часопис на топлом пергаменту
Dub — Линкова контролна табла од мат пиринчаног папира
Seline Analytics — Тихи аналитички сто на топлом папиру
Anthropic — Научни часопис о топлом пергаменту — мирне површине боје слоноваче, насечени уреднички наслови и један глинени акценат који се појављује само када је потребна акција.
Calendly — Тамноплаво мастило на хладном мермеру
Augen Pro — Еплова бела презентација садржи клиничку, бестежинску, електрично плаву боју као једини акценат у монохроматском простору.
Antimetal — Уредничка хроника на кремастом папиру – тихо јутро у научном часопису, где уздржаност преноси самопоуздање, а серифи обављају тешки посао
Perk — Електрични лимет на топлом пергамент папиру
Ditto — Сунцем обасјана радионица у којој се стварају узорци дивљег цвећа. Топле кремасте површине, јарко жута основна боја, дубоко тамноплаве боје, органски облици боја који цветају иза дела.
Officevibe — Уреднички часопис на топлом кремастом папиру. Замислите промишљен есеј о управљању људским ресурсима, представљен као производ - курзивни серифни фонт који шапуће кроз модерни плави интерфејс.