Notion
Ciepły papierowy notatnik w południowym słońcu
Interfejs Notion w świetle dziennym przypomina ukochany papierowy notatnik: ciepłe, kremowe płótno (#f6f5f4), które wydaje się raczej namacalne niż sterylne, bogata typografia bezszeryfowa dodaje redakcyjnej wagi opisowi produktu, a kolor służy jako oszczędna interpunkcja – brzoskwiniowe „pigułki” podkreślają czasowniki, pojedynczy niebieski akcentuje główną akcję, a obracająca się gama akcentów (koralowy, bursztynowy, błękitny, nocny) barwi tła kart niczym naklejki. Karty są ułożone na płótnie z cienkimi obramowaniami i narożnikami – bez cieni i chromu – niczym liniowane sekcje notesu Moleskine. Animacja jest radosna i sprężysta, z płynnymi przejściami w odstępie 200 ms i sprężystymi animacjami postaci, które ożywiają interfejs, nie będąc jednocześnie dekoracyjnymi.
Wyśrodkowana, maksymalna szerokość jest ograniczona do około 1440 px. Głównym elementem jest wyśrodkowany stos: rząd symboli → duży, dwuwierszowy nagłówek z osadzoną kolorową pigułką → podtytuł → rząd z dwoma przyciskami wezwania do działania → duży makiet interfejsu użytkownika produktu. Poniżej głównego elementu znajdują się sekcje, naprzemiennie z siatkami białych kart i pełnokolorowymi panelami akcentowymi. Ściana logo to wyśrodkowana, jednorzędowa siatka logo partnerów w skali szarości. Bloki funkcyjne mają układ dwukolumnowy (tekst po lewej, kolorowy panel po prawej), naprzemiennie od lewej do prawej między sekcjami. Sekcja „Zapytaj asystentów na żądanie” wykorzystuje siatkę kart 2x2, gdzie górna karta zajmuje całą szerokość, a dolny rząd jest podzielony na dwie równe kolumny. Przerwy między sekcjami są szerokie (~80 px), tworząc spokojny, pionowy rytm. Nawigacja to stały, górny pasek o wysokości 64 px z wyśrodkowanymi elementami nawigacyjnymi i przyciskami akcji wyrównanymi do prawej.
Ilustracje są najważniejsze, bez zdjęć. Język wizualny opiera się na płaskich, ilustrowanych symbolach (zaokrąglone krawędzie w kolorowych kółkach o wielkości 2 pikseli), abstrakcyjnych elementach dekoracyjnych (ręcznie rysowane zawijasy, brokat, strzałki, kształty kwiatów) oraz makietach interfejsu użytkownika produktu. Symbole pojawiają się w oknie głównym jako poziomy rząd siedmiu awatarów i są rozrzucone po stronie jako zabawne znaki interpunkcyjne. Zrzuty ekranu produktu to jedyne „prawdziwe” elementy wizualne: pokazują one rzeczywisty interfejs Notion (tablice Kanban, widoki dokumentów, panele agentów AI) z pełnym zestawem elementów i rzeczywistymi danymi. Makieta produktu w oknie głównym jest duża, wyśrodkowana i rzuca pojedynczy cień oddzielający ją od płótna. Nie ma zdjęć lifestylowych, zdjęć stockowych ani abstrakcyjnych renderów 3D.
Paleta
Marka
- Notion Blue
#0075de— Główny element wypełniający przycisk wezwania do działania (CTA), akcent w aktywnej nawigacji, wypełnione przyciski akcji to jedyne schematy kolorów w niemal monochromatycznym systemie, które są na tyle nasycone, by można je było postrzegać jako przełącznik.
Neutralny
- Paper Warmth
#f6f5f4— Płótno strony, tło okna głównego i tło sekcji są utrzymane w ciepłych, lekko beżowych kolorach, które nadają systemowi namacalny, analogowy charakter. - Pure White
#ffffff— Powierzchnie kart, wypukłe panele, tło z logo, kontrastowy tekst na ciemnych kartach. - Ink Black
#000000— Tekst główny, linki nawigacyjne, nagłówki - używane z różną przezroczystością (100%, 95%, 90%, 60%, 40%, 20%) w celu budowania hierarchii bez dodawania nowych kolorów. - Charcoal
#111111— Opcja ciemnego tekstu dla tych obszarów interfejsu użytkownika, w których czysta czerń wyglądałaby zbyt ostro. - Stone
#757575— Tekst nawigacji pomocniczej, wyciszony tekst pomocniczy, wyłączone etykiety przycisków – 60% alfa tuszu - Graphite
#615d59— Tekst główny ma ciepłą tonację - brązowo-szarą, która harmonizuje z ciepłym tłem.
Typografia
od 12 do 96px · 10 kroków
- NotionInter — wymiana: Inter · wytyczne 400, 500, 600, 700 · Główny krój pisma bezszeryfowego to geometryczny humanista z subtelnymi niuansami, używany w rozmiarach 400 w tekście głównym, 500 w nawigacji/interfejsie użytkownika i 600-700 w nagłówkach. Skala czcionki wykorzystuje agresywne ujemne odstępy między literami w większych rozmiarach (-4,6 px przy 96 px, -2 px przy 72 px), co sprawia, że nagłówek wydaje się bardziej zwarty i pewny siebie, a nie zwiewny.
- Lyon Text — wymiana: Source Serif Pro · wytyczne 400 · Czcionka szeryfowa, zarezerwowana dla poszczególnych sekcji tekstu głównego i wstępów do sekcji, jest używana oszczędnie (cztery razy), aby nadać krojowi literacki ciężar, podobny do cytatu w układzie czasopisma. Funkcjonuje ona jako akcent systemowy, a nie równoległa hierarchia.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przeciętny |
| Podstawowy krok | 8px |
| Promień przycisku | 8px |
| Promień karty | 12px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 80px |
| Szerokość strony | 1440px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Notion i wypełni ją
- Uzupełnij produktami i postami za pomocą linku - Instagram, TikTok, Facebook.
- Przenieś zawartość ze starej witryny — wystarczy podać adres.
- Nowoczesny design na najlepszym silniku: React ( Next.js) z renderowaniem serwerowym i optymalizacją SEO od razu po wyjęciu z pudełka.
- W pełni zautomatyzowana optymalizacja SEO dla wyników wyszukiwania i rekomendacje sieci neuronowych.
Podobne style
- ElevenLabs — Fotoesej w ciepłych, kremowych tonach z subtelnymi nagłówkami. Notatnik w stylu Bauhaus – papier w kolorze skorupki jajka, czarny tusz i pojedynczy fioletowo-pomarańczowy akcent do ekspozycji produktu.
- Awesomic — Siatka cynkowa redakcyjna z pomarańczowymi znakami interpunkcyjnymi przypominającymi konfetti
- Monad — czasopismo techniczne redakcyjne na ciepłym pergaminie
- Dub — Panel sterowania z matowego papieru ryżowego firmy Link
- Seline Analytics — Cichy analityczny stół na ciepłym papierze
- Anthropic — Naukowy dziennik terenowy na ciepłym pergaminie — spokojne, kości słoniowe powierzchnie, szeryfowe nagłówki redakcyjne i pojedynczy gliniany akcent, który pojawia się tylko wtedy, gdy zachodzi potrzeba działania.
- Calendly — Ciemnoniebieski tusz na zimnym marmurze
- Augen Pro — Biała prezentacja Apple charakteryzuje się klinicznym, lekkim, elektryzującym błękitem jako jedynym akcentem w monochromatycznej przestrzeni.
- Antimetal — Kronika redakcyjna na kremowym papierze – spokojny poranek w czasopiśmie naukowym, gdzie powściągliwość wyraża pewność siebie, a szeryfy wykonują ciężką pracę
- Perk — Elektryczna limonka na ciepłym papierze pergaminowym
- Ditto — Rozświetlony słońcem warsztat, w którym powstają próbki dzikich kwiatów. Ciepłe, kremowe powierzchnie, żywa żółta baza, głęboki granatowy kolor, organiczne formy kolorystyczne rozkwitające za dziełem.
- Officevibe — Magazyn redakcyjny na ciepłym, kremowym papierze. Wyobraź sobie przemyślany esej o zarządzaniu zasobami ludzkimi, zaprezentowany jako produkt – kursywny krój pisma szeryfowego, szepczący przez nowoczesny, niebieski interfejs.