Notion
Teplý papierový zápisník na poludňajšom slnku
Rozhranie Notion vyzerá ako obľúbený papierový zošit za bieleho dňa: teplé, krémové plátno (#f6f5f4), ktoré je skôr hmatateľné ako sterilné, veľkorysá bezpätková typografia dodáva textu produktu redakčnú váhu a farba použitá ako riedka interpunkcia – broskyňové „pilulky“ zvýrazňujú slovesá, jedna modrá ukotvuje hlavnú akciu a rotujúce pole akcentových odtieňov (koralová, jantárová, obloha, polnoc) farbí pozadie kariet ako nálepky. Karty sú usporiadané na plátne s tenkými okrajmi a rohmi – bez tieňov, bez chrómu – ako linajkované časti zošita Moleskine. Animácia je hravá a pružná, s plynulými prechodmi pri 200 ms a pružnými animáciami postáv, ktoré vdýchnu rozhraniu život bez toho, aby boli dekoratívne.
Pri centrovaní je maximálna šírka obmedzená na približne 1440px. Hlavným prvkom je centrovaný zásobník: riadok symbolov → veľký dvojriadkový nadpis s vloženou farebnou tabletkou → podnadpis → riadok s dvoma tlačidlami s výzvou na akciu → veľká maketa používateľského rozhrania produktu. Pod hlavným prvkom sa sekcie striedajú medzi mriežkami bielych kariet a plnofarebnými akcentovými panelmi. Stena s logom je centrovaná jednoriadková mriežka s logami partnerov v odtieňoch sivej. Bloky funkcií používajú dvojstĺpcové rozloženie (text vľavo, farebný panel vpravo), ktoré sa striedajú zľava doprava medzi sekciami. Sekcia „Opýtajte sa svojich asistentov na požiadanie“ používa mriežku kariet 2x2, kde horná karta zaberá celú šírku a spodný riadok je rozdelený na dva rovnaké stĺpce. Odstupy medzi sekciami sú veľkorysé (~80px), čo vytvára pokojný vertikálny rytmus. Navigácia je fixný horný panel vysoký 64px s centrovanými navigačnými prvkami a akčnými tlačidlami zarovnanými vpravo.
Ilustrácie sú prvoradé, žiadne fotografie. Vizuálny jazyk je postavený na plochých, ilustrovaných symboloch (zaoblené hrany v 2px farebných kruhoch), abstraktných dekoratívnych prvkoch (ručne kreslené vlnovky, trblietky, šípky, kvetinové tvary) a maketách používateľského rozhrania produktu. Symboly sa zobrazujú v hlavnom okne ako horizontálny rad siedmich avatarov a sú roztrúsené po stránke ako hravá interpunkcia. Snímky obrazovky produktu sú jedinými „skutočnými“ vizuálnymi prvkami: zobrazujú skutočné rozhranie Notion (Kanban tabule, zobrazenia dokumentov, panely agentov AI) s kompletnou sadou prvkov a skutočných údajov. Maketa produktu v hlavnom okne je veľká, vycentrovaná a vrhá jediný tieň, ktorý ju oddeľuje od plátna. Nie sú tam žiadne fotografie životného štýlu, žiadne obrázky z fotobanky ani abstraktné 3D rendery.
Paleta
Značka
- Notion Blue
#0075de— Hlavným prvkom vypĺňajúcim tlačidlo s výzvou na akciu (CTA), akcent v aktívnej navigácii, sú vyplnené akčné tlačidlá jedinou farebnou schémou v takmer monochromatickom systéme, ktorá je dostatočne sýta na to, aby bola vnímaná ako prepínač.
Neutrálny
- Paper Warmth
#f6f5f4— Plátno stránky, pozadie hlavného okna a pozadie sekcie sú v teplých, mierne béžových farbách, ktoré systému dodávajú hmatový, analógový pocit. - Pure White
#ffffff— Povrchy kariet, vyvýšené panely, logo pozadia, kontrastný text na tmavých kartách. - Ink Black
#000000— Hlavný text, navigačné odkazy, nadpisy – používajú sa s rôznou priehľadnosťou (100 %, 95 %, 90 %, 60 %, 40 %, 20 %) na vytvorenie hierarchie bez pridania nových farieb. - Charcoal
#111111— Možnosť tmavého textu pre tie oblasti používateľského rozhrania, kde by čisto čierna vyzerala príliš drsne. - Stone
#757575— Text sekundárnej navigácie, stlmený pomocný text, vypnuté popisky tlačidiel – 60 % alfa farebného priestoru - Graphite
#615d59— Hlavný text má teplý tón - hnedosivý, ktorý ladí s teplým pozadím.
Typografia
od 12 do 96px · 10 krokov
- NotionInter — náhrada: Inter · obrysy 400, 500, 600, 700 · Hlavné bezpätkové písmo je geometrický humanistický s jemnými nuansami, používaný vo veľkostiach 400 pre text, 500 pre navigáciu/používateľské rozhranie a 600-700 pre nadpisy. Mierka písma používa agresívne negatívne rozstupy písmen pri väčších veľkostiach (-4,6px pri 96px, -2px pri 72px), vďaka čomu nadpis pôsobí kompaktnejšie a sebavedomejšie než vzdušne.
- Lyon Text — náhrada: Source Serif Pro · obrysy 400 · Redakčné pätkové písmo, vyhradené pre jednotlivé časti hlavného textu a úvody častí, sa používa striedmo (štyrikrát), aby sa písmu dodala literárna váha, podobná citátu v časopiseckej šablóne. Funguje skôr ako systémový prízvuk než ako paralelná hierarchia.
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | priemerný |
| Základný krok | 8px |
| Polomer tlačidla | 8px |
| Polomer karty | 12px |
| Tiene | nie - okraje namiesto tieňov |
| Medzi sekciami | 80px |
| Šírka stránky | 1440px |
Umelá inteligencia vytvorí vašu webovú stránku v štýle Notion a naplní ju
- Doplňte produktmi a príspevkami cez odkaz - Instagram, TikTok, Facebook.
- Preneste obsah zo svojej starej stránky – stačí zadať adresu.
- Moderný dizajn na najlepšom engine: React ( Next.js) s vykresľovaním servera a SEO optimalizáciou hneď po vybalení.
- Plne automatizovaná SEO optimalizácia pre výsledky vyhľadávania a odporúčania neurónových sietí.
Podobné štýly
- ElevenLabs — Fotoesej v teplých krémových tónoch s jemnými nadpismi. Zápisník v štýle Bauhaus – papier farby vaječnej škrupiny, čierny atrament a jeden fialovo-oranžový akcent na vystavenie produktov.
- Awesomic — Redakčná zinková sieťovina s oranžovými interpunkčnými znamienkami pripomínajúcimi konfety
- Monad — redakčný technický časopis na teplom pergamene
- Dub — Ovládací panel z matného ryžového papiera Link
- Seline Analytics — Tichý analytický stôl na teplom papieri
- Anthropic — Vedecký časopis z oblasti teplého pergamenu – pokojné slonovinové povrchy, pätkové úvodné nadpisy a jediný hlinený prízvuk, ktorý sa objavuje iba vtedy, keď je potrebná akcia.
- Calendly — Tmavomodrý atrament na studenom mramore
- Augen Pro — Biela prezentácia spoločnosti Apple sa vyznačuje klinickou, beztiažovou, elektrickou modrou ako jediným akcentom v monochromatickom priestore.
- Antimetal — Redakčná kronika na krémovom papieri – tiché ráno vo vedeckom časopise, kde zdržanlivosť vyjadruje sebavedomie a pätkové písmo robí ťažkú prácu.
- Perk — Elektrické vápno na teplom pergamenovom papieri
- Ditto — Slnečná dielňa, kde sa tvoria vzorky divých kvetov. Teplé krémové povrchy, žiarivá žltá základná farba, sýto tmavomodré atramenty, organické farebné formy kvitnúce za dielom.
- Officevibe — Redakčný časopis na teplom krémovom papieri. Predstavte si premyslenú esej o riadení ľudských zdrojov, prezentovanú ako produkt – kurzívne pätkové písmo šepkajúce cez moderné modré rozhranie.