Notion
En varm pappersbok i middagssolen
Notions gränssnitt ser ut som en älskad pappersanteckningsbok i fullt dagsljus: en varm, krämig duk (#f6f5f4) som känns taktil snarare än steril, generös sans-serif-typografi som ger redaktionell tyngd åt produkttexten, och färg som används som sparsam interpunktion – persikofärgade "piller" markerar verb, en enda blå färg förankrar huvudhandlingen, och en roterande uppsättning accentnyanser (korall, bärnsten, himmel, midnatt) färgar kortbakgrunderna som klistermärken. Korten är arrangerade på en duk med tunna kanter och hörn – inga skuggor, ingen krom – som de linjerade delarna av en Moleskine-anteckningsbok. Animationen är lekfull och fjädrande, med mjuka övergångar på 200 ms och fjädrande karaktärsanimationer som ger liv åt gränssnittet utan att vara dekorativa.
Centrerad är den maximala bredden begränsad till cirka 1440 pixlar. Huvudelementet är en centrerad stapel: en rad med symboler → en stor tvåradig rubrik med ett inbäddat färgat piller → en underrubrik → en rad med två uppmaningsknappar → en stor mockup för produktgränssnittet. Under huvudelementet växlar sektionerna mellan rutnät med vita kort och accentpaneler i fullfärg. Logotypväggen är ett centrerat enradigt rutnät med partnerlogotyper i gråskala. Funktionsblocken använder en layout med två kolumner (text till vänster, färgad panel till höger), som växlar från vänster till höger mellan sektionerna. Avsnittet "Fråga dina assistenter på begäran" använder ett 2x2-kortrutnät, där det översta kortet tar upp hela bredden och den nedre raden är uppdelad i två lika stora kolumner. Mellanrummen mellan sektionerna är generösa (~80 pixlar), vilket skapar en lugn vertikal rytm. Navigeringen är en fast 64 pixlar hög övre stapel med centrerade navigeringselement och högerjusterade åtgärdsknappar.
Illustrationer är av största vikt, utan foton. Det visuella språket bygger på platta, illustrerade symboler (rundade kanter i 2px färgade cirklar), abstrakta dekorativa element (handritade krusiduller, glitter, pilar, blomformer) och mockups av produktens användargränssnitt. Symbolerna visas i huvudfönstret som en horisontell rad med sju avatarer och är utspridda över sidan som lekfull interpunktion. Produktskärmdumpar är de enda "riktiga" visuella elementen: de visar det faktiska Notion-gränssnittet (Kanban-tavlor, dokumentvyer, AI-agentpaneler) med en komplett uppsättning element och verklig data. Produktmockupen i huvudfönstret är stor, centrerad och kastar en enda skugga som separerar den från arbetsytan. Det finns inga livsstilsfoton, inga stockbilder, inga abstrakta 3D-renderingar.
Palett
Stämpla
- Notion Blue
#0075de— Huvudelementet som fyller ut call-to-action-knappen (CTA), en accent i den aktiva navigeringen, fyllda åtgärdsknappar är det enda färgschemat i ett nästan monokromt system som är tillräckligt mättat för att uppfattas som en brytare.
Neutral
- Paper Warmth
#f6f5f4— Sidkanten, huvudfönstrets bakgrund och sektionsbakgrunden har alla varma, lätt beige färger som ger systemet en taktil, analog känsla. - Pure White
#ffffff— Kortytor, upphöjda paneler, logotypbakgrund, kontrasterande text på mörka kort. - Ink Black
#000000— Huvudtext, navigeringslänkar, rubriker – används med olika transparens (100 %, 95 %, 90 %, 60 %, 40 %, 20 %) för att bygga hierarki utan att lägga till nya färger. - Charcoal
#111111— Ett alternativ för mörk text för de områden i användargränssnittet där ren svarthet skulle se för skarp ut. - Stone
#757575— Sekundär navigationstext, dämpad hjälptext, inaktiverade knappetiketter - 60 % bläckalfabetisk text - Graphite
#615d59— Huvudtexten har en varm ton – brungrå, vilket harmoniserar med den varma bakgrunden.
Typografi
från 12 till 96px · 10 steg
- NotionInter — ersättning: Inter · konturer 400, 500, 600, 700 · Det huvudsakliga sans-serif-typsnittet är ett geometriskt humanistiskt typsnitt med subtila nyanser, som används i storlekarna 400 för brödtext, 500 för navigering/användargränssnitt och 600–700 för rubriker. Typsnittsskalan använder aggressivt negativt bokstavsavstånd vid större storlekar (-4,6px vid 96px, -2px vid 72px), vilket gör att rubriken känns mer kompakt och självsäker, snarare än luftig.
- Lyon Text — ersättning: Source Serif Pro · konturer 400 · Det redaktionella serif-typsnittet, reserverat för enskilda avsnitt i huvudtexten och avsnittsinledningar, används sparsamt (fyra gånger) för att ge typsnittet litterär tyngd, ungefär som ett citat i en tidskriftslayout. Det fungerar som en systematisk accent snarare än en parallell hierarki.
Intervaller och form
| Ändamål | Menande |
|---|---|
| Densitet | genomsnitt |
| Grundläggande steg | 8px |
| Knappradie | 8px |
| Kortradie | 12px |
| Skuggor | inga gränser istället för skuggor |
| Mellan sektioner | 80px |
| Sidbredd | 1440px |
AI kommer att bygga din webbplats i Notion -stil och fylla den
- Fyll på med produkter och inlägg via länken - Instagram, TikTok, Facebook.
- Överför innehåll från din gamla webbplats – ange bara adressen.
- Modern design på den bästa sökmotorn: React ( Next.js) med serverrendering och SEO-optimering direkt ur lådan.
- Helautomatisk SEO-optimering för sökresultat och rekommendationer för neurala nätverk.
Liknande stilar
- ElevenLabs — En fotoessä i varma krämfärgade toner med diskreta rubriker. En anteckningsbok i Bauhaus-stil – äggskalfärgat papper, svart bläck och en enda lila och orange accentfärg för produktpresentation.
- Awesomic — Redaktionellt zinknät med orange skiljetecken som påminner om konfetti
- Monad — redaktionell teknisk tidskrift på varmt pergament
- Dub — Links kontrollpanel för matt rispapper
- Seline Analytics — Ett tyst analysbord på varmt papper
- Anthropic — En vetenskaplig fälttidskrift på varmt vellum – lugna elfenbensfärgade ytor, serifferade redaktionella rubriker och en enda leraccent som bara dyker upp när handling behövs.
- Calendly — Mörkblått bläck på kall marmor
- Augen Pro — Apples vita presentation har en klinisk, viktlös, elektrisk blå nyans som enda accent i ett monokromt utrymme.
- Antimetal — En redaktionell krönika på krämfärgat papper – en lugn morgon i en vetenskaplig tidskrift, där återhållsamhet förmedlar självförtroende och seriffer gör det tunga arbetet.
- Perk — Elektrisk lime på varmt bakplåtspapper
- Ditto — En solbelyst workshop som skapar prover av vildblommor. Varma krämfärgade ytor, en livfull gul basfärg, djupt marinblått tryckfärg, organiska färgformer som blommar bakom verket.
- Officevibe — En redaktionell tidskrift på varmt krämfärgat papper. Föreställ dig en tankeväckande essä om HR-ledning, presenterad som en produkt – ett kursivt serif-typsnitt som viskar genom ett modernt blått gränssnitt.