Notion
Een warm papieren notitieboekje in de middagzon.
De interface van Notion ziet eruit als een geliefd papieren notitieboekje in het volle daglicht: een warm, crèmekleurig canvas (#f6f5f4) dat prettig aanvoelt in plaats van steriel, een royale schreefloze typografie die de productteksten een redactionele uitstraling geeft, en kleur die spaarzaam wordt gebruikt als interpunctie – perzikkleurige 'pillen' benadrukken werkwoorden, een enkele blauwe kleur markeert de hoofdactie, en een wisselende reeks accentkleuren (koraal, amber, hemelsblauw, middernachtblauw) kleuren de achtergronden van de kaarten als stickers. De kaarten zijn gerangschikt op een canvas met dunne randen en hoeken – geen schaduwen, geen chroom – zoals de gelinieerde gedeelten van een Moleskine-notitieboekje. De animatie is speels en veerkrachtig, met vloeiende overgangen van 200 ms en levendige karakteranimaties die de interface tot leven brengen zonder decoratief te zijn.
De maximale breedte is gecentreerd en beperkt tot ongeveer 1440px. Het hoofdelement is een gecentreerde stapel: een rij symbolen → een grote kop van twee regels met een ingesloten gekleurde pil → een subkop → een rij met twee call-to-action-knoppen → een grote mockup van de product-UI. Onder het hoofdelement wisselen secties af tussen rasters van witte kaarten en full-color accentpanelen. De logo-wall is een gecentreerd raster van één rij met partnerlogo's in grijstinten. De feature-blokken gebruiken een lay-out met twee kolommen (tekst links, gekleurd paneel rechts), waarbij de secties van links naar rechts afwisselen. De sectie "Vraag uw assistenten op aanvraag" gebruikt een raster van 2x2 kaarten, waarbij de bovenste kaart de volledige breedte inneemt en de onderste rij is verdeeld in twee gelijke kolommen. De tussenruimte tussen de secties is ruim (~80px), wat zorgt voor een rustig verticaal ritme. De navigatie bestaat uit een vaste bovenbalk van 64px hoog met gecentreerde navigatie-elementen en rechts uitgelijnde actieknoppen.
Illustraties staan centraal, er zijn geen foto's. De visuele taal is opgebouwd uit platte, geïllustreerde symbolen (afgeronde randen in gekleurde cirkels van 2px), abstracte decoratieve elementen (handgetekende krabbels, glitter, pijlen, bloemvormen) en mockups van de gebruikersinterface van het product. De symbolen verschijnen in het hoofdvenster als een horizontale rij van zeven avatars en zijn over de pagina verspreid als speelse interpunctie. Productscreenshots zijn de enige "echte" visuele elementen: ze tonen de daadwerkelijke Notion-interface (Kanban-borden, documentweergaven, AI-agentpanelen) met een volledige set elementen en echte gegevens. De productmockup in het hoofdvenster is groot, gecentreerd en werpt een enkele schaduw die hem van het canvas scheidt. Er zijn geen lifestylefoto's, geen stockfoto's en geen abstracte 3D-renders.
Palet
Merk
- Notion Blue
#0075de— Het belangrijkste element dat de call-to-action (CTA)-knop vult, een accent in de actieve navigatie, gevulde actieknoppen zijn het enige kleurschema in een bijna monochroom systeem dat verzadigd genoeg is om als een schakelaar te worden waargenomen.
Neutrale
- Paper Warmth
#f6f5f4— Het paginacanvas, de achtergrond van het hoofdvenster en de achtergrond van de secties zijn allemaal uitgevoerd in warme, lichtbeige tinten die het systeem een tastbaar, analoog gevoel geven. - Pure White
#ffffff— Kaartoppervlakken, reliëfpanelen, logo-achtergrond, contrasterende tekst op donkere kaarten. - Ink Black
#000000— Hoofdtekst, navigatielinks en koppen - gebruikt met verschillende transparanties (100%, 95%, 90%, 60%, 40%, 20%) om een hiërarchie op te bouwen zonder nieuwe kleuren toe te voegen. - Charcoal
#111111— Een optie voor donkere tekst voor die UI-onderdelen waar puur zwart te hard zou overkomen. - Stone
#757575— Secundaire navigatietekst, gedempte helptekst, uitgeschakelde knoplabels - 60% inktalfa - Graphite
#615d59— De hoofdtekst heeft een warme tint - bruingrijs - die harmonieert met de warme achtergrond.
Typografie
van 12 tot 96px · 10 stappen
- NotionInter — vervanging: Inter · overzichten 400, 500, 600, 700 · Het belangrijkste schreefloze lettertype is een geometrisch humanistisch lettertype met subtiele nuances, gebruikt in groottes 400 voor de hoofdtekst, 500 voor navigatie/gebruikersinterface en 600-700 voor koppen. De lettergrootte maakt gebruik van een agressieve negatieve spatiëring bij grotere formaten (-4,6px bij 96px, -2px bij 72px), waardoor de koptekst compacter en zelfverzekerder oogt, in plaats van luchtig.
- Lyon Text — vervanging: Source Serif Pro · overzichten 400 · Het redactionele schreeflettertype, dat is voorbehouden aan afzonderlijke secties van de hoofdtekst en sectie-introducties, wordt spaarzaam (vier keer) gebruikt om het lettertype literaire allure te geven, vergelijkbaar met een citaat in een tijdschriftlay-out. Het functioneert als een systematisch accent in plaats van een parallelle hiërarchie.
Intervallen en vorm
| Doel | Betekenis |
|---|---|
| Dikte | gemiddeld |
| Basisstap | 8px |
| Knopradius | 8px |
| Kaartradius | 12px |
| Schaduwen | geen randen in plaats van schaduwen |
| Tussen secties | 80px |
| Paginabreedte | 1440px |
AI bouwt je website in de stijl Notion en vult deze in.
- Vul het account aan met producten en berichten via de link - Instagram, TikTok, Facebook.
- Neem de inhoud van je oude website over; geef gewoon het adres op.
- Modern design op de beste engine: React ( Next.js) met server-side rendering en SEO-optimalisatie direct uit de doos.
- Volledig geautomatiseerde SEO-optimalisatie voor zoekresultaten en aanbevelingen op basis van neurale netwerken.
Vergelijkbare stijlen
- ElevenLabs — Een fotoreportage in warme crèmekleuren met subtiele titels. Een notitieboek in Bauhaus-stijl – gebroken wit papier, zwarte inkt en een enkel paars en oranje accent voor productpresentatie.
- Awesomic — Redactioneel zinkgaas met oranje accenten die aan confetti doen denken
- Monad — redactioneel technisch tijdschrift op warm perkament
- Dub — Link's matte rijstpapier bedieningspaneel
- Seline Analytics — Een rustige, analytische tabel op warm papier.
- Anthropic — Een wetenschappelijk veldnotitieboek op warm perkamentpapier – rustige ivoorkleurige oppervlakken, redactionele koppen in schreeflettertype en een enkel klei-accent dat alleen verschijnt wanneer actie vereist is.
- Calendly — Donkerblauwe inkt op koud marmer
- Augen Pro — De witte presentatie van Apple kenmerkt zich door een klinisch, gewichtloos, elektrisch blauw als enig accent in een monochrome omgeving.
- Antimetal — Een redactioneel verslag op crèmekleurig papier – een rustige ochtend bij een wetenschappelijk tijdschrift, waar ingetogenheid vertrouwen uitstraalt en schreefletters het zware werk doen.
- Perk — Elektrisch kalk op warm perkamentpapier
- Ditto — Een zonovergoten atelier waar wilde bloemen worden geschilderd. Warme crèmekleurige oppervlakken, een levendige gele basiskleur, diep donkerblauwe inkt, organische kleurvormen die achter het werk tot bloei komen.
- Officevibe — Een redactioneel tijdschrift op warm crèmekleurig papier. Stel je een doordacht essay over HR-management voor, gepresenteerd als een product – een sierlijk schreeflettertype dat zachtjes door een moderne blauwe interface fluistert.