Notion
Топъл хартиен тефтер под обедното слънце
Интерфейсът на Notion изглежда като любим хартиен тефтер посред бял ден: топло, кремаво платно (#f6f5f4), което е по-скоро тактилно, отколкото стерилно, щедрата безсерифна типография придава редакционна тежест на продуктовия текст, а цветовете, използвани като оскъдна пунктуация - прасковени "хапчета" подчертават глаголите, едно синьо закрепва основното действие, а въртящ се набор от акцентни нюанси (корал, кехлибар, небе, полунощ) оцветяват фоновете на картите като стикери. Картите са подредени върху платно с тънки рамки и ъгли - без сенки, без хром - като линираните секции на тефтер Moleskine. Анимацията е игрива и еластична, с плавни преходи на 200ms и еластични анимации на героите, които вдъхват живот на интерфейса, без да са декоративни.
Центрирано, максималната ширина е ограничена до приблизително 1440px. Основният елемент е централно разположен стек: ред символи → голямо двуредово заглавие с вградено цветно хапче → подзаглавие → ред с два бутона за подканване към действие → голям макет на потребителския интерфейс на продукта. Под основния елемент секциите се редуват между решетки от бели карти и пълноцветни акцентни панели. Стената с логата е центрирана едноредова решетка от лога на партньори в сива скала. Функционалните блокове използват оформление с две колони (текст отляво, цветен панел отдясно), редуващи се отляво надясно между секциите. Секцията „Попитайте асистентите си при поискване“ използва решетка от карти 2x2, където горната карта заема пълната ширина, а долният ред е разделен на две равни колони. Разстоянията между секциите са големи (~80px), създавайки спокоен вертикален ритъм. Навигацията е фиксирана горна лента с височина 64px с центрирани навигационни елементи и подравнени вдясно бутони за действие.
Илюстрациите са от първостепенно значение, без снимки. Визуалният език е изграден върху плоски, илюстрирани символи (заоблени ръбове в цветни кръгове с размер 2px), абстрактни декоративни елементи (ръчно рисувани драскулки, брокат, стрелки, цветни форми) и макети на потребителския интерфейс на продукта. Символите се появяват в главния прозорец като хоризонтален ред от седем аватара и са разпръснати по страницата като игрива пунктуация. Снимките на екрана на продукта са единствените „реални“ визуални елементи: те показват действителния интерфейс на Notion (Kanban дъски, изгледи на документи, панели на AI агенти) с пълен набор от елементи и реални данни. Макетът на продукта в главния прозорец е голям, центриран и хвърля една сянка, отделяйки го от платното. Няма снимки на лайфстайл, няма стокови изображения, няма абстрактни 3D рендери.
Палитра
Марка
- 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 до 96px · 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 — Контролен панел с матова оризова хартия на Link
- Seline Analytics — Тиха аналитична маса върху топла хартия
- Anthropic — Научно списание за топъл пергамент - спокойни повърхности с цвят на слонова кост, заглавия със серифирани редакционни знаци и един-единствен глинен акцент, който се появява само когато е необходимо действие.
- Calendly — Тъмносиньо мастило върху студен мрамор
- Augen Pro — Бялата презентация на Apple се отличава с клинично, безтегловно, електрическо синьо като единствен акцент в монохромно пространство.
- Antimetal — Редакционна хроника на кремава хартия – тиха сутрин в научно списание, където сдържаността внушава увереност, а серифите вършат тежката работа.
- Perk — Електрическа лайм върху топла пергаментова хартия
- Ditto — Слънчева работилница, в която се създават мостри от диви цветя. Топли кремави повърхности, ярък жълт основен цвят, наситено тъмносини мастила, органични цветови форми, разцъфтяващи зад произведението.
- Officevibe — Редакционно списание на топла кремава хартия. Представете си замислено есе за управлението на човешките ресурси, представено като продукт - курсивен шрифт със серифни букви, шепнещ през модерен син интерфейс.