Notion
In waarm papieren notebook yn 'e middeis sinne
De ynterface fan Notion liket op in leaf papieren notebook yn it brede deiljocht: in waarm, romich doek (#f6f5f4) dat taktyl oanfielt ynstee fan steryl, royale sans-serif typografy dy't redaksjoneel gewicht jout oan 'e produkttekst, en kleur dy't brûkt wurdt as sparse ynterpunksje - perzikkleurige "pillen" markearje tiidwurden, in inkele blauwe anker de haadaksje, en in rotearjende array fan aksintkleuren (koraal, amber, loft, middernacht) kleurje de eftergrûnen fan 'e kaart lykas stickers. Kaarten binne op in doek mei tinne rânen en hoeken - gjin skaden, gjin chrome - lykas de lined seksjes fan in Moleskine notebook. Animaasje is spielerich en springerich, mei glêde oergongen op 200ms en springerige karakteranimaasjes dy't de ynterface ta libben bringe sûnder dekoratyf te wêzen.
Sintrearre is de maksimale breedte beheind ta sawat 1440px. It haadelemint is in sintrearre stapel: in rige symboalen → in grutte koptekst mei twa rigels mei in ynbêde kleurde pil → in subkoptekst → in rige mei twa call-to-action-knoppen → in grutte produkt UI-mockup. Under it haadelemint wikselje seksjes ôf tusken rasters fan wite kaarten en aksintpanielen yn folsleine kleur. De logo-muorre is in sintrearre raster mei ien rige fan partnerlogo's yn griisskaal. De funksjeblokken brûke in yndieling mei twa kolommen (tekst oan de linkerkant, kleurd paniel oan de rjochterkant), ôfwikseljend fan lofts nei rjochts tusken seksjes. De seksje "Freegje jo assistinten op oanfraach" brûkt in 2x2 kaartraster, wêrby't de boppeste kaart de folsleine breedte ynnimt, en de ûnderste rige is ferdield yn twa gelikense kolommen. De gutters tusken seksjes binne royaal (~80px), wêrtroch in rêstich fertikaal ritme ûntstiet. De navigaasje is in fêste boppeste balke fan 64px heech mei sintrearre navigaasje-eleminten en rjochts-ôfstimde aksjeknoppen.
Yllustraasjes binne fan it grutste belang, sûnder foto's. De fisuele taal is boud op platte, yllustrearre symboalen (rûne rânen yn 2px kleurde sirkels), abstrakte dekorative eleminten (mei de hân tekene kronkels, glitter, pylken, blomfoarmen), en mockups fan 'e brûkersynterface fan it produkt. De symboalen ferskine yn it haadfinster as in horizontale rige fan sân avatars en binne ferspraat oer de pagina as boartlike ynterpunksje. Produkt-screenshots binne de ienige "echte" fisuele eleminten: se litte de werklike Notion-ynterface sjen (Kanban-boerden, dokumintwerjeften, AI-agintpanielen) mei in folsleine set eleminten en echte gegevens. De produktmockup yn it haadfinster is grut, sintraal en smyt in inkele skaad dy't it skiedt fan it doek. Der binne gjin libbensstylfoto's, gjin stockôfbyldings, gjin abstrakte 3D-renders.
Palet
Merk
- Notion Blue
#0075de— It haadelemint dat de call-to-action (CTA) knop follet, in aksint yn 'e aktive navigaasje, folde aksjeknoppen binne it ienige kleurskema yn in hast monochroom systeem dat verzadigd genôch is om as in skeakel waarnommen te wurden.
Neutraal
- Paper Warmth
#f6f5f4— It sidedoek, de eftergrûn fan it haadfinster en de eftergrûn fan it seksje binne allegear waarme, wat beige kleuren dy't it systeem in taktile, analoge gefoel jouwe. - Pure White
#ffffff— Kaartoerflakken, ferhege panielen, logo-eftergrûn, kontrastearjende tekst op donkere kaarten. - Ink Black
#000000— Haadtekst, navigaasjekeppelings, kopteksten - brûkt mei ferskillende transparânsje (100%, 95%, 90%, 60%, 40%, 20%) om hiërargy te bouwen sûnder nije kleuren ta te foegjen. - Charcoal
#111111— In opsje foar donkere tekst foar dy UI-gebieten dêr't suver swart te hurd útsjen soe. - Stone
#757575— Sekundêre navigaasjetekst, gedempte helptekst, útskeakele knoplabels - 60% inkt alfa - Graphite
#615d59— De haadtekst hat in waarme toan - brúnich griis, dy't harmonisearret mei de waarme eftergrûn.
Typografy
fan 12 oant 96px · 10 stappen
- NotionInter — ferfanging: Inter · sketsen 400, 500, 600, 700 · It wichtichste sans-serif-lettertype is in geometrysk humanistysk mei subtile nuânses, brûkt mei grutte 400 foar lichemstekst, 500 foar navigaasje/brûkersynterface, en 600-700 foar kopteksten. De lettertypeskaal brûkt agressive negative letterôfstân by gruttere grutte (-4.6px by 96px, -2px by 72px), wêrtroch't de koptekst kompakter en selsbewuster oanfielt, ynstee fan luchtich.
- Lyon Text — ferfanging: Source Serif Pro · sketsen 400 · It redaksjonele serif-lettertype, reservearre foar yndividuele seksjes fan 'e haadtekst en ynliedingen fan seksjes, wurdt sparjend brûkt (fjouwer kear) om it lettertype literêr gewicht te jaan, fergelykber mei in sitaat yn in tydskriftlayout. It funksjonearret as in systemysk aksint ynstee fan in parallelle hiërargy.
Yntervallen en foarm
| Doel | Betsjutting |
|---|---|
| Dichtheid | trochsneed |
| Basisstap | 8px |
| Knopradius | 8px |
| Kaartradius | 12px |
| Skaden | gjin grinzen ynstee fan skaden |
| Tusken seksjes | 80px |
| Sidebreedte | 1440px |
AI sil jo webside bouwe yn Notion -styl en it folje
- Folje oan mei produkten en berjochten fia de link - Instagram, TikTok, Facebook.
- Oerdrage ynhâld fan jo âlde side - spesifisearje gewoan it adres.
- Modern ûntwerp op 'e bêste motor: React ( Next.js) mei serverrendering en SEO-optimalisaasje direkt út 'e doaze.
- Folslein automatisearre SEO-optimalisaasje foar sykresultaten en oanbefellings foar neurale netwurken.
Ferlykbere stilen
- ElevenLabs — In foto-essay yn waarme crèmekleurige toanen mei subtile koppen. In notebook yn Bauhaus-styl - aai-skulpkleurich papier, swarte inket, en in inkele pearse en oranje aksint foar produktwerjefte.
- Awesomic — Redaksjoneel sinkgaas mei oranje leestekens dy't tinken dogge oan konfetti
- Monad — redaksjoneel technysk tydskrift op waarm perkament
- Dub — Link's matte ryspapier kontrôlepaniel
- Seline Analytics — In rêstige analytyske tafel op waarm papier
- Anthropic — In wittenskiplik fjildtydskrift op waarm vellum - rêstige ivoaren oerflakken, serifisearre redaksjonele koppen, en in ienich klaaiaksint dat allinich ferskynt as aksje nedich is.
- Calendly — Donkerblauwe inket op kâld moarmer
- Augen Pro — De wite presintaasje fan Apple hat in klinysk, gewichtleas, elektrysk blau as it ienige aksint yn in monochrome romte.
- Antimetal — In redaksjonele kronyk op crèmekleurich papier - in rêstige moarn yn in wittenskiplik tydskrift, dêr't beheining fertrouwen útstraalt en serifs it swiere wurk dogge
- Perk — Elektryske limoen op waarm perkamentpapier
- Ditto — In sinneferljochte workshop dy't foarbylden fan wylde blommen makket. Waarme crèmekleurige oerflakken, in libbene giele basiskleur, djip marineblauwe inkten, organyske kleurfoarmen dy't efter it stik bloeie.
- Officevibe — In redaksjoneel tydskrift op waarm crèmekleurich papier. Stel jo in neitocht essay foar oer HR-behear, presintearre as in produkt - in kursive serif-lettertype dat flústeret troch in moderne blauwe ynterface.