Notion
Topla papirnata bilježnica na podnevnom suncu
Notionovo sučelje izgleda poput omiljene papirnate bilježnice usred bijela dana: toplo, kremasto platno (#f6f5f4) koje se osjeća taktilno, a ne sterilno, velikodušna sans-serif tipografija daje uredničku težinu tekstu proizvoda i boja korištena kao rijetka interpunkcija - breskvaste "pilule" ističu glagole, jedna plava usidrava glavnu radnju, a rotirajući niz naglasnih nijansi (koraljna, jantarna, nebo, ponoć) boji pozadine kartica poput naljepnica. Karte su raspoređene na platnu s tankim rubovima i kutovima - bez sjena, bez kroma - poput liniranih dijelova Moleskine bilježnice. Animacija je razigrana i proljetna, s glatkim prijelazima na 200 ms i proljetnim animacijama likova koje unose život u sučelje bez da su dekorativne.
Centrirano, maksimalna širina ograničena je na približno 1440px. Glavni element je centrirani stog: red simbola → veliki dvoredni naslov s ugrađenom tabletom u boji → podnaslov → red s dva gumba za poziv na akciju → veliki model korisničkog sučelja proizvoda. Ispod glavnog elementa, odjeljci se izmjenjuju između mreža bijelih kartica i naglašenih panela u punoj boji. Zid s logotipom je centrirana mreža s jednim redom logotipa partnera u sivoj nijansi. Blokovi značajki koriste raspored s dva stupca (tekst s lijeve strane, panel u boji s desne strane), naizmjenično s lijeva na desno između odjeljaka. Odjeljak "Pitajte svoje asistente na zahtjev" koristi mrežu kartica 2x2, gdje gornja kartica zauzima punu širinu, a donji red je podijeljen u dva jednaka stupca. Ogranci između odjeljaka su izdašni (~80px), stvarajući miran vertikalni ritam. Navigacija je fiksna gornja traka visoka 64px s centriranim navigacijskim elementima i gumbima za akcije poravnatim desno.
Ilustracije su najvažnije, bez fotografija. Vizualni jezik izgrađen je na ravnim, ilustriranim simbolima (zaobljeni rubovi u krugovima u boji od 2px), apstraktnim dekorativnim elementima (ručno crtane vijugave linije, šljokice, strelice, oblici cvijeća) i maketama korisničkog sučelja proizvoda. Simboli se pojavljuju u glavnom prozoru kao horizontalni red od sedam avatara i razasuti su po stranici kao razigrana interpunkcija. Snimke zaslona proizvoda jedini su "pravi" vizualni elementi: prikazuju stvarno Notion sučelje (Kanban ploče, prikazi dokumenata, ploče AI agenata) s punim skupom elemenata i stvarnih podataka. Maketa proizvoda u glavnom prozoru je velika, centrirana i baca jednu sjenu koja ga odvaja od platna. Nema fotografija životnog stila, nema stock slika, nema apstraktnih 3D rendera.
Paleta
Robna marka
- Notion Blue
#0075de— Glavni element koji ispunjava gumb s pozivom na akciju (CTA), naglasak u aktivnoj navigaciji, ispunjeni gumbi za akciju jedina su shema boja u gotovo monokromatskom sustavu koja je dovoljno zasićena da se percipira kao prekidač.
Neutralno
- Paper Warmth
#f6f5f4— Platno stranice, pozadina glavnog prozora i pozadina odjeljka su toplih, blago bež boja koje sustavu daju taktilni, analogni osjećaj. - Pure White
#ffffff— Površine kartica, podignuti paneli, logotip u pozadini, kontrastni tekst na tamnim karticama. - Ink Black
#000000— Glavni tekst, navigacijske poveznice, naslovi - koriste se s različitom transparentnošću (100%, 95%, 90%, 60%, 40%, 20%) za izgradnju hijerarhije bez dodavanja novih boja. - Charcoal
#111111— Opcija tamnog teksta za ona područja korisničkog sučelja gdje bi čista crna boja izgledala preoštro. - Stone
#757575— Tekst sekundarne navigacije, tekst pomoći s isključenim zvukom, onemogućene oznake gumba - 60% alfa tinte - Graphite
#615d59— Glavni tekst ima topli ton - smeđe-sivu, koja se usklađuje s toplom pozadinom.
Tipografija
od 12 do 96px · 10 koraka
- NotionInter — zamjena: Inter · obrisi 400, 500, 600, 700 · Glavni sans-serif font je geometrijski humanistički sa suptilnim nijansama, korišten u veličinama 400 za glavni tekst, 500 za navigaciju/korisničko sučelje i 600-700 za naslove. Skala fonta koristi agresivni negativni razmak između slova pri većim veličinama (-4,6px na 96px, -2px na 72px), što naslov čini kompaktnijim i samouvjerenijim, a ne prozračnim.
- Lyon Text — zamjena: Source Serif Pro · obrisi 400 · Urednički serifni font, rezerviran za pojedinačne odjeljke glavnog teksta i uvode odjeljaka, koristi se rijetko (četiri puta) kako bi se fontu dala književna težina, slično citatu u časopisnom prijelomu. Funkcionira kao sistemski naglasak, a ne kao paralelna hijerarhija.
Intervali i forma
| Svrha | Značenje |
|---|---|
| Gustoća | prosjek |
| Osnovni korak | 8px |
| Radijus gumba | 8px |
| Radijus kartice | 12px |
| Sjene | ne - obrubi umjesto sjena |
| Između odjeljaka | 80px |
| Širina stranice | 1440px |
Umjetna inteligencija će izraditi vašu web stranicu u Notion stilu i ispuniti je
- Popunite proizvodima i objavama putem poveznice - Instagram, TikTok, Facebook.
- Prenesite sadržaj sa svoje stare web-lokacije - samo navedite adresu.
- Moderan dizajn na najboljem engineu: React ( Next.js) s renderiranjem na serveru i SEO optimizacijom odmah po instalaciji.
- Potpuno automatizirana SEO optimizacija za rezultate pretraživanja i preporuke neuronskih mreža.
Slični stilovi
- ElevenLabs — Foto esej u toplim krem tonovima s decentnim naslovima. Bilježnica u stilu Bauhausa - papir boje ljuske jajeta, crna tinta i jedan ljubičasti i narančasti naglasak za izlaganje proizvoda.
- Awesomic — Urednička cinkova mreža s narančastim interpunkcijskim znakovima koji podsjećaju na konfete
- Monad — urednički tehnički časopis na toplom pergamentu
- Dub — Linkova upravljačka ploča od mat rižinog papira
- Seline Analytics — Tihi analitički stol na toplom papiru
- Anthropic — Znanstveni terenski časopis o toplom pergamentu - mirne površine boje slonovače, serifirani urednički naslovi i jedan glineni naglasak koji se pojavljuje samo kada je potrebna akcija.
- Calendly — Tamnoplava tinta na hladnom mramoru
- Augen Pro — Appleova bijela prezentacija sadrži kliničku, bestežinu, električno plavu boju kao jedini naglasak u monokromatskom prostoru.
- Antimetal — Uvodnik na krem papiru - mirno jutro u znanstvenom časopisu, gdje suzdržanost prenosi samopouzdanje, a serifi obavljaju teški posao
- Perk — Električna limeta na toplom papiru za pečenje
- Ditto — Suncem obasjana radionica u kojoj se izrađuju uzorci divljeg cvijeća. Tople kremaste površine, živahna žuta osnovna boja, tamnoplave tinte, organski oblici boja koji cvjetaju iza djela.
- Officevibe — Uvodnik časopisa na toplom krem papiru. Zamislite promišljen esej o upravljanju ljudskim resursima, predstavljen kao proizvod - kurzivni serifni font koji šapuće kroz moderno plavo sučelje.