Notion

Топла хартиена тетратка на пладневното сонце

Интерфејсот на Notion изгледа како сакана хартиена тетратка на сред бел ден: топло, кремасто платно (#f6f5f4) кое е тактилно, а не стерилно, дарежлива sans-serif типографија која му дава уредничка тежина на текстот на производот, а бојата што се користи како ретка интерпункција - праскавите „апчиња“ ги истакнуваат глаголите, една сина боја ја закотвува главната акција, а ротирачки низ од акцентни нијанси (корална, килибарна, небо, полноќ) ги обојуваат позадините на картичките како налепници. Картичките се распоредени на платно со тенки граници и агли - без сенки, без хром - како линиите на Moleskine тетратка. Анимацијата е разиграна и еластична, со мазни транзиции од 200ms и еластични анимации на ликовите кои внесуваат живот во интерфејсот без да бидат декоративни.

Центрирано, максималната ширина е ограничена на приближно 1440px. Главниот елемент е центриран стек: ред симболи → голем наслов од два реда со вградена апче во боја → поднаслов → ред со две копчиња за повик за акција → голем макета на кориснички интерфејс на производот. Под главниот елемент, деловите се менуваат помеѓу мрежи од бели картички и акцентни панели во боја. Ѕидот со логото е центрирана мрежа од еден ред од логоа на партнери во сива скала. Блоковите со функции користат распоред од две колони (текст лево, панел во боја десно), наизменично од лево кон десно помеѓу деловите. Делот „Прашајте ги вашите асистенти на барање“ користи мрежа од картички 2x2, каде што горната картичка ја зафаќа целата ширина, а долниот ред е поделен на две еднакви колони. Олуците помеѓу деловите се големи (~80px), создавајќи мирен вертикален ритам. Навигацијата е фиксна горна лента висока 64px со центрирани елементи за навигација и копчиња за акција порамнети десно.

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

Чист SaaS Минимализам Уреднички

https://notion.so

Палета

Бренд

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 · Главниот sans-serif фонт е геометриски хуманистички со суптилни нијанси, кој се користи во големини 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 — Уредничко списание на топла хартија во крем боја. Замислете промислен есеј за управување со човечки ресурси, претставен како производ - курзивен сериф фонт што шепоти низ модерен син интерфејс.