Notion
Ein warmes Notizbuch aus Papier in der Mittagssonne
Notions Benutzeroberfläche wirkt wie ein geliebtes Notizbuch im hellen Tageslicht: ein warmer, cremiger Hintergrund (#f6f5f4), der sich angenehm anfühlt, nicht steril wirkt; eine großzügige serifenlose Typografie, die den Produkttexten Gewicht verleiht; und Farben, die sparsam als Satzzeichen eingesetzt werden – pfirsichfarbene „Pillen“ heben Verben hervor, ein einzelnes Blau verankert die Hauptaktion, und eine wechselnde Auswahl an Akzentfarben (Koralle, Bernstein, Himmelblau, Mitternachtsblau) färbt die Kartenhintergründe wie Aufkleber. Die Karten sind auf einer Fläche mit dünnen Rändern und Ecken angeordnet – ohne Schatten, ohne Chrom – ähnlich den linierten Abschnitten eines Moleskine-Notizbuchs. Die Animationen sind verspielt und dynamisch, mit sanften Übergängen in 200 ms und federnden Charakteranimationen, die die Benutzeroberfläche lebendig gestalten, ohne aufdringlich zu wirken.
Die maximale Breite ist zentriert auf ca. 1440 Pixel begrenzt. Das Hauptelement besteht aus einem zentrierten Stapel: einer Symbolreihe → einer großen, zweizeiligen Überschrift mit eingebetteter farbiger Pille → einer Unterüberschrift → einer Reihe mit zwei Call-to-Action-Buttons → einem großen Produkt-UI-Mockup. Unterhalb des Hauptelements wechseln sich Abschnitte mit Rastern aus weißen Karten und farbigen Akzentfeldern ab. Die Logowand ist ein zentriertes, einzeiliges Raster mit Partnerlogos in Graustufen. Die Feature-Blöcke verwenden ein zweispaltiges Layout (Text links, farbiges Feld rechts), wobei die Spaltenanzahl zwischen den Abschnitten wechselt. Der Abschnitt „Fragen Sie Ihre Assistenten bei Bedarf“ verwendet ein 2x2-Kartenraster, wobei die oberste Karte die gesamte Breite einnimmt und die untere Reihe in zwei gleich große Spalten unterteilt ist. Die Abstände zwischen den Abschnitten sind großzügig (ca. 80 Pixel) und erzeugen einen ruhigen vertikalen Rhythmus. Die Navigation besteht aus einer festen, 64 Pixel hohen oberen Leiste mit zentrierten Navigationselementen und rechtsbündigen Aktionsbuttons.
Illustrationen stehen im Vordergrund, Fotos werden nicht verwendet. Die Bildsprache basiert auf flachen, illustrierten Symbolen (abgerundete, farbige Kreise mit 2 Pixeln Durchmesser), abstrakten Dekorationselementen (handgezeichnete Schnörkel, Glitzer, Pfeile, Blumenformen) und Mockups der Benutzeroberfläche. Die Symbole erscheinen im Hauptfenster als horizontale Reihe von sieben Avataren und sind als spielerische Akzente über die Seite verteilt. Produkt-Screenshots sind die einzigen „echten“ visuellen Elemente: Sie zeigen die tatsächliche Notion-Oberfläche (Kanban-Boards, Dokumentenansichten, KI-Agenten-Panels) mit allen Elementen und realen Daten. Das Produkt-Mockup im Hauptfenster ist groß, zentriert und wirft einen einzelnen Schatten, der es vom Hintergrund abgrenzt. Es gibt keine Lifestyle-Fotos, keine Stockfotos und keine abstrakten 3D-Renderings.
Palette
Marke
- Notion Blue
#0075de— Das Hauptelement, das den Call-to-Action-Button (CTA) ausfüllt, ein Akzent in der aktiven Navigation, gefüllte Aktionsbuttons sind das einzige Farbschema in einem nahezu monochromen System, das gesättigt genug ist, um als Schalter wahrgenommen zu werden.
Neutral
- Paper Warmth
#f6f5f4— Die Seitenoberfläche, der Hintergrund des Hauptfensters und der Abschnittshintergrund sind allesamt in warmen, leicht beigen Farben gehalten, die dem System ein haptisches, analoges Gefühl verleihen. - Pure White
#ffffff— Kartenoberflächen, erhabene Felder, Logohintergrund, kontrastierender Text auf dunklen Karten. - Ink Black
#000000— Haupttext, Navigationslinks, Überschriften - werden mit unterschiedlicher Transparenz (100 %, 95 %, 90 %, 60 %, 40 %, 20 %) verwendet, um eine Hierarchie aufzubauen, ohne neue Farben hinzuzufügen. - Charcoal
#111111— Eine dunkle Textoption für jene UI-Bereiche, in denen reines Schwarz zu grell wirken würde. - Stone
#757575— Sekundärer Navigationstext, ausgeblendeter Hilfetext, deaktivierte Schaltflächenbeschriftungen – 60 % Tintenalphabet - Graphite
#615d59— Der Haupttext hat einen warmen, bräunlich-grauen Ton, der mit dem warmen Hintergrund harmoniert.
Typografie
von 12 auf 96 Pixel · 10 Schritte
- NotionInter — Ersatz: Inter · Umrisse 400, 500, 600, 700 · Die Hauptschrift ist eine serifenlose, geometrisch-humanistische Schriftart mit subtilen Nuancen. Sie wird in den Größen 400 für den Fließtext, 500 für Navigation/Benutzeroberfläche und 600–700 für Überschriften verwendet. Die Schriftgröße zeichnet sich durch einen ausgeprägten negativen Buchstabenabstand bei größeren Größen aus (-4,6 px bei 96 px, -2 px bei 72 px), wodurch die Überschrift kompakter und selbstbewusster wirkt, anstatt luftig.
- Lyon Text — Ersatz: Source Serif Pro · Umrisse 400 · Die für einzelne Abschnitte des Haupttextes und dessen Einleitungen reservierte redaktionelle Serifenschrift wird sparsam (viermal) eingesetzt, um der Schriftart literarisches Gewicht zu verleihen, ähnlich einem Zitat in einem Magazinlayout. Sie fungiert eher als systematischer Akzent denn als Teil einer parallelen Hierarchie.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | Durchschnitt |
| Grundlegender Schritt | 8px |
| Radius der Schaltfläche | 8px |
| Kartenradius | 12px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 80px |
| Seitenbreite | 1440px |
KI erstellt Ihre Website im Notion -Stil und füllt sie aus.
- Teile deine Produkte und Beiträge über den Link – Instagram, TikTok, Facebook.
- Übertragen Sie Inhalte von Ihrer alten Website – geben Sie einfach die Adresse an.
- Modernes Design auf der besten Plattform: React ( Next.js) mit serverseitigem Rendering und SEO-Optimierung direkt nach der Installation.
- Vollautomatisierte SEO-Optimierung für Suchergebnisse und Empfehlungen durch neuronale Netze.
Ähnliche Stile
- ElevenLabs — Eine Fotostrecke in warmen Cremetönen mit dezenten Überschriften. Ein Notizbuch im Bauhaus-Stil – eierschalenfarbenes Papier, schwarze Tinte und ein einzelner violetter und orangefarbener Akzent zur Produktpräsentation.
- Awesomic — Redaktionelles Zinkgewebe mit orangefarbenen Satzzeichen, die an Konfetti erinnern
- Monad — redaktionelles Fachjournal auf warmem Pergament
- Dub — Link's mattes Reispapier-Bedienfeld
- Seline Analytics — Ein ruhiger analytischer Tisch auf warmem Papier
- Anthropic — Ein wissenschaftliches Feldtagebuch auf warmem Pergament – ruhige elfenbeinfarbene Oberflächen, serifenbesetzte Überschriften und ein einzelner Akzent in Lehmfarbe, der nur dann erscheint, wenn Handlungsbedarf besteht.
- Calendly — Dunkelblaue Tinte auf kaltem Marmor
- Augen Pro — Apples weiße Präsentation zeichnet sich durch ein klinisch-schwereloses, elektrisches Blau als einzigen Akzent in einem monochromen Raum aus.
- Antimetal — Ein redaktioneller Bericht auf cremefarbenem Papier – ein ruhiger Morgen in einer wissenschaftlichen Zeitschrift, wo Zurückhaltung Selbstvertrauen vermittelt und Serifen die Hauptarbeit leisten.
- Perk — Elektrisches Limettengrün auf warmem Pergamentpapier
- Ditto — Eine sonnendurchflutete Werkstatt, in der Wildblumenmuster entstehen. Warme cremefarbene Oberflächen, ein leuchtendes Gelb als Grundfarbe, tiefblaue Tinten, organische Farbformen, die hinter dem Werk erblühen.
- Officevibe — Ein redaktionelles Magazin auf warmem, cremefarbenem Papier. Stellen Sie sich einen tiefgründigen Essay über Personalmanagement vor, präsentiert wie ein Produkt – eine geschwungene Serifenschrift, die durch eine moderne blaue Benutzeroberfläche flüstert.