Notion

'n Warm papiernotaboek in die middagson

Notion se koppelvlak lyk soos 'n geliefde papiernotaboek in helder daglig: 'n warm, romerige doek (#f6f5f4) wat tasbaar eerder as steriel voel, ruim sans-serif tipografie wat redaksionele gewig aan die produkteks verleen, en kleur wat as yl leestekens gebruik word - perskekleurige "pille" beklemtoon werkwoorde, 'n enkele blou anker die hoofaksie, en 'n roterende reeks aksentkleure (koraal, amber, lug, middernag) kleur die kaartagtergronde soos plakkers. Kaarte word op 'n doek gerangskik met dun rande en hoeke - geen skaduwees, geen chroom nie - soos die gelynde gedeeltes van 'n Moleskine-notaboek. Animasie is speels en veerkragtig, met gladde oorgange teen 200ms en veerkragtige karakteranimasies wat lewe aan die koppelvlak gee sonder om dekoratief te wees.

Gesentreerd, die maksimum breedte is beperk tot ongeveer 1440px. Die hoofelement is 'n gesentreerde stapel: 'n ry simbole → 'n groot twee-reël opskrif met 'n ingebedde gekleurde pil → 'n subopskrif → 'n ry met twee oproep-tot-aksie-knoppies → 'n groot produk-UI-model. Onder die hoofelement wissel afdelings tussen roosters van wit kaarte en volkleur aksentpanele. Die logo-muur is 'n gesentreerde enkelry-rooster van vennootlogo's in grysskaal. Die kenmerkblokke gebruik 'n twee-kolom-uitleg (teks aan die linkerkant, gekleurde paneel aan die regterkant), wat van links na regs tussen afdelings afwissel. Die "Vra jou assistente op aanvraag"-afdeling gebruik 'n 2x2-kaartrooster, waar die boonste kaart die volle breedte opneem, en die onderste ry in twee gelyke kolomme verdeel is. Die geute tussen afdelings is ruim (~80px), wat 'n kalm vertikale ritme skep. Die navigasie is 'n vaste 64px hoë boonste balk met gesentreerde navigasie-elemente en regs-belynde aksieknoppies.

Illustrasies is van die allergrootste belang, sonder foto's. Die visuele taal is gebou op plat, geïllustreerde simbole (afgeronde rande in 2px gekleurde sirkels), abstrakte dekoratiewe elemente (handgetekende kronkels, glitter, pyle, blomvorms), en modelle van die produk se gebruikerskoppelvlak. Die simbole verskyn in die hoofvenster as 'n horisontale ry van sewe avatars en is oor die bladsy versprei as speelse leestekens. Produkskermskote is die enigste "regte" visuele elemente: hulle wys die werklike Notion-koppelvlak (Kanban-borde, dokumentaansigte, KI-agentpanele) met 'n volledige stel elemente en regte data. Die produkmodelle in die hoofvenster is groot, gesentreerd en werp 'n enkele skaduwee wat dit van die doek skei. Daar is geen leefstylfoto's, geen voorraadbeelde, geen abstrakte 3D-weergawes nie.

Suiwer SaaS Minimalisme Redaksioneel

https://notion.so

Palet

Handelsmerk

Notion Blue #0075de — Die hoofelement wat die oproep-tot-aksie (CTA)-knoppie vul, 'n aksent in die aktiewe navigasie, gevulde aksieknoppies is die enigste kleurskema in 'n byna monochroom stelsel wat versadig genoeg is om as 'n skakelaar beskou te word.

Neutraal

Paper Warmth #f6f5f4 — Die bladsydoek, hoofvensteragtergrond en afdelingsagtergrond is almal warm, effens beige kleure wat die stelsel 'n tasbare, analoog gevoel gee.
Pure White #ffffff — Kaartoppervlaktes, verhoogde panele, logo-agtergrond, kontrasterende teks op donker kaarte.
Ink Black #000000 — Hoofteks, navigasieskakels, opskrifte - word met verskillende deursigtigheid (100%, 95%, 90%, 60%, 40%, 20%) gebruik om hiërargie te bou sonder om nuwe kleure by te voeg.
Charcoal #111111 — 'n Donker teksopsie vir daardie UI-areas waar suiwer swart te hard sou lyk.
Stone #757575 — Sekondêre navigasieteks, gedempte hulpteks, gedeaktiveerde knoppie-etikette - 60% ink alfa
Graphite #615d59 — Die hoofteks het 'n warm toon - bruinerig grys, wat harmoniseer met die warm agtergrond.

Tipografie

van 12 tot 96px · 10 stappe

NotionInter — vervanging: Inter · buitelyne 400, 500, 600, 700 · Die hoof sans-serif-lettertipe is 'n geometriese humanis met subtiele nuanses, wat gebruik word in groottes 400 vir liggaamsteks, 500 vir navigasie/gebruikerskoppelvlak, en 600-700 vir opskrifte. Die lettertipeskaal gebruik aggressiewe negatiewe letterspasiëring in groter groottes (-4.6px teen 96px, -2px teen 72px), wat die opskrif meer kompak en selfversekerd laat voel, eerder as lugtig.
Lyon Text — vervanging: Source Serif Pro · buitelyne 400 · Die redaksionele serif-lettertipe, gereserveer vir individuele afdelings van die hoofteks en afdelingsinleidings, word spaarsamig (vier keer) gebruik om die lettertipe literêre gewig te gee, soortgelyk aan 'n aanhaling in 'n tydskrifuitleg. Dit funksioneer as 'n sistemiese aksent eerder as 'n parallelle hiërargie.

Intervalle en vorm

Doel	Betekenis
Digtheid	gemiddelde
Basiese stap	8px
Knoppieradius	8px
Kaartradius	12px
Skaduwees	geen grense in plaas van skaduwees
Tussen afdelings	80px
Bladsybreedte	1440px

KI sal jou webwerf in Notion -styl bou en dit vul

Vul met produkte en plasings via die skakel - Instagram, TikTok, Facebook.
Dra inhoud van jou ou webwerf oor – spesifiseer net die adres.
Moderne ontwerp op die beste enjin: React ( Next.js) met bedienerweergawe en SEO-optimalisering reg uit die boks.
Volledig outomatiese SEO-optimering vir soekresultate en neurale netwerkaanbevelings.

Skep 'n webwerf in hierdie styl

Soortgelyke style

ElevenLabs — 'n Foto-essay in warm roomkleure met subtiele opskrifte. 'n Bauhaus-styl notaboek—eierdopkleurige papier, swart ink en 'n enkele pers en oranje aksent vir produkuitstalling.
Awesomic — Redaksionele sinkgaas met oranje leestekens wat aan konfetti herinner
Monad — redaksionele tegniese tydskrif op warm perkament
Dub — Link se mat ryspapier-beheerpaneel
Seline Analytics — 'n Stil analitiese tafel op warm papier
Anthropic — 'n Wetenskaplike veldjoernaal op warm vellum—kalm ivoorkleurige oppervlaktes, gesiferde redaksionele opskrifte en 'n enkele klei-aksent wat slegs verskyn wanneer aksie nodig is.
Calendly — Donkerblou ink op koue marmer
Augen Pro — Apple se wit aanbieding bevat 'n kliniese, gewiglose, elektriese blou as die enigste aksent in 'n monochroom ruimte.
Antimetal — 'n Redaksionele kroniek op roomkleurige papier—'n stil oggend by 'n wetenskaplike tydskrif, waar terughoudendheid selfvertroue oordra en serifs die swaar werk doen.
Perk — Elektriese lemmetjie op warm perkamentpapier
Ditto — 'n Sonverligte werkswinkel wat veldblommonsters skep. Warm roomkleurige oppervlaktes, 'n heldergeel basiskleur, diep vlootblou ink, organiese kleurvorms wat agter die stuk blom.
Officevibe — 'n Redaksionele tydskrif op warm roomkleurige papier. Stel jou 'n deurdagte opstel oor menslike hulpbronbestuur voor, aangebied as 'n produk—'n kursief-serif-lettertipe wat deur 'n moderne blou koppelvlak fluister.