Notion
Teplý papírový zápisník v polední slunci
Rozhraní Notion vypadá jako oblíbený papírový zápisník za bílého dne: teplé, krémové plátno (#f6f5f4), které je spíše hmatové než sterilní, velkorysá bezpatková typografie dodává textu produktu redakční váhu a barvy použité jako řídká interpunkce – broskvové „pilulky“ zvýrazňují slovesa, jedna modrá ukotvuje hlavní děj a rotující řada akcentových odstínů (korálová, jantarová, nebeská, půlnoční) barví pozadí karet jako samolepky. Karty jsou uspořádány na plátně s tenkými okraji a rohy – žádné stíny, žádný chrom – jako linkované části zápisníku Moleskine. Animace je hravá a pružná, s plynulými přechody po 200 ms a pružnými animacemi postav, které vdechují rozhraní život, aniž by byly dekorativní.
Při umístění na střed je maximální šířka omezena na přibližně 1440 pixelů. Hlavním prvkem je centrovaný zásobník: řada symbolů → velký dvouřádkový nadpis s vloženou barevnou tabletkou → podnadpis → řádek se dvěma tlačítky s výzvou k akci → velký maketa uživatelského rozhraní produktu. Pod hlavním prvkem se sekce střídají mezi mřížkami bílých karet a plnobarevnými akcentovými panely. Stěna s logy je centrovaná jednořádková mřížka s logy partnerů ve stupních šedi. Bloky funkcí používají dvousloupcové rozvržení (text vlevo, barevný panel vpravo), které se střídají mezi sekcemi zleva doprava. Sekce „Zeptejte se svých asistentů na vyžádání“ používá mřížku karet 2x2, kde horní karta zabírá celou šířku a spodní řádek je rozdělen na dva stejné sloupce. Mezery mezi sekcemi jsou velkorysé (~80 pixelů), což vytváří klidný vertikální rytmus. Navigace je tvořena pevnou horní lištou o výšce 64 pixelů s centrovanými navigačními prvky a akčními tlačítky zarovnanými vpravo.
Ilustrace jsou prvořadé, žádné fotografie. Vizuální jazyk je postaven na plochých, ilustrovaných symbolech (zaoblené hrany v barevných kruzích o velikosti 2px), abstraktních dekorativních prvcích (ručně kreslené vlnovky, třpytky, šipky, květinové tvary) a maketách uživatelského rozhraní produktu. Symboly se v hlavním okně zobrazují jako vodorovná řada sedmi avatarů a jsou roztroušeny po stránce jako hravá interpunkce. Snímky obrazovky produktu jsou jedinými „skutečnými“ vizuálními prvky: ukazují skutečné rozhraní Notion (Kanban desky, zobrazení dokumentů, panely AI agentů) s kompletní sadou prvků a skutečných dat. Maketa produktu v hlavním okně je velká, vycentrovaná a vrhá jediný stín, který ji odděluje od plátna. Nejsou zde žádné fotografie životního stylu, žádné obrázky z fotobanky ani abstraktní 3D rendery.
Paleta
Značka
- Notion Blue
#0075de— Hlavním prvkem vyplňujícím tlačítko s výzvou k akci (CTA), akcent v aktivní navigaci, jsou vyplněná akční tlačítka jediným barevným schématem v téměř monochromatickém systému, které je dostatečně syté, aby bylo vnímáno jako přepínač.
Neutrální
- Paper Warmth
#f6f5f4— Plátno stránky, pozadí hlavního okna a pozadí sekce jsou v teplých, lehce béžových barvách, které systému dodávají hmatový, analogový pocit. - Pure White
#ffffff— Povrchy karet, vyvýšené panely, logo na pozadí, kontrastní text na tmavých kartách. - Ink Black
#000000— Hlavní text, navigační odkazy, nadpisy – používají se s různou průhledností (100 %, 95 %, 90 %, 60 %, 40 %, 20 %) pro vytvoření hierarchie bez přidání nových barev. - Charcoal
#111111— Možnost tmavého textu pro ty oblasti uživatelského rozhraní, kde by čistě černá vypadala příliš drsně. - Stone
#757575— Text sekundární navigace, ztlumený pomocný text, deaktivované popisky tlačítek – 60% inkoustová alfa - Graphite
#615d59— Hlavní text má teplý tón - hnědošedý, který ladí s teplým pozadím.
Typografie
od 12 do 96 pixelů · 10 kroků
- NotionInter — nahrazení: Inter · obrysy 400, 500, 600, 700 · Hlavní bezpatkové písmo je geometrický humanistický s jemnými nuancemi, používaný ve velikostech 400 pro text, 500 pro navigaci/uživatelské rozhraní a 600–700 pro nadpisy. Měřítko písma používá agresivní negativní mezery mezi písmeny u větších velikostí (-4,6px při 96px, -2px při 72px), díky čemuž nadpis působí kompaktněji a sebevědoměji, spíše než vzdušně.
- Lyon Text — nahrazení: Source Serif Pro · obrysy 400 · Redakční patkové písmo, vyhrazené pro jednotlivé části hlavního textu a úvody částí, je použito střídmě (čtyřikrát), aby písmo mělo literární váhu, podobně jako citát v časopiseckém sazebníku. Funguje spíše jako systémový akcent než paralelní hierarchie.
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | průměrný |
| Základní krok | 8px |
| Poloměr tlačítka | 8px |
| Poloměr karty | 12px |
| Stíny | ne - okraje místo stínů |
| Mezi sekcemi | 80px |
| Šířka stránky | 1440px |
Umělá inteligence vám vytvoří web ve stylu Notion a naplní ho
- Doplňujte produkty a příspěvky přes odkaz - Instagram, TikTok, Facebook.
- Přeneste obsah ze starého webu – stačí zadat adresu.
- Moderní design na nejlepším enginu: React ( Next.js) s renderováním na serveru a SEO optimalizací ihned po vybalení.
- Plně automatizovaná SEO optimalizace pro výsledky vyhledávání a doporučení neuronových sítí.
Podobné styly
- ElevenLabs — Fotoesej v teplých krémových tónech s decentními nadpisy. Zápisník ve stylu Bauhausu – papír barvy vaječné skořápky, černý inkoust a jeden fialovooranžový akcent pro vystavení produktů.
- Awesomic — Redakční zinková síťovina s oranžovými interpunkčními znaménky připomínajícími konfety
- Monad — redakční technický časopis na teplém pergamenu
- Dub — Ovládací panel Link z matného rýžového papíru
- Seline Analytics — Tichý analytický stůl na teplém papíře
- Anthropic — Vědecký časopis z oblasti teplého pergamenu – klidné slonovinové povrchy, patkové úvodní nadpisy a jediný hliněný akcent, který se objevuje pouze tehdy, když je potřeba něco udělat.
- Calendly — Tmavě modrý inkoust na studeném mramoru
- Augen Pro — Bílá prezentace společnosti Apple se vyznačuje klinickou, beztížnou, elektrickou modrou barvou jako jediným akcentem v monochromatickém prostoru.
- Antimetal — Redakční kronika na krémovém papíře – klidné dopoledne ve vědeckém časopise, kde zdrženlivost vyjadřuje sebevědomí a patky odvádějí těžkou práci.
- Perk — Elektrické vápno na teplém pergamenovém papíru
- Ditto — Sluncem zalitá dílna, kde se vytvářejí vzorky divokých květin. Teplé krémové povrchy, zářivá žlutá základní barva, tmavě tmavě modré inkousty, organické barevné formy rozkvétající za dílem.
- Officevibe — Redakční časopis na teplém krémovém papíře. Představte si promyšlenou esej o řízení lidských zdrojů, prezentovanou jako produkt – kurzivní patkové písmo šeptající skrz moderní modré rozhraní.