Notion
En varm papirnotatbok i middagssolen
Notions grensesnitt ser ut som en elsket papirnotatbok i fullt dagslys: et varmt, kremet lerret (#f6f5f4) som føles taktilt snarere enn sterilt, generøs sans-serif-typografi som gir redaksjonell tyngde til produktteksten, og farger brukt som sparsom tegnsetting – ferskenfargede «piller» fremhever verb, en enkelt blåfarge forankrer hovedhandlingen, og en roterende rekke aksentfarger (korall, rav, himmel, midnatt) farger kortbakgrunnene som klistremerker. Kortene er arrangert på et lerret med tynne kanter og hjørner – ingen skygger, ingen krom – som de linjerte delene av en Moleskine-notatbok. Animasjonen er leken og vårlig, med jevne overganger på 200 ms og vårlige karakteranimasjoner som gir liv til grensesnittet uten å være dekorative.
Sentrert er den maksimale bredden begrenset til omtrent 1440 piksler. Hovedelementet er en sentrert stabel: en rad med symboler → en stor overskrift med to linjer og en innebygd farget pille → en underoverskrift → en rad med to handlingsfremmende knapper → en stor produktgrensesnittmockup. Under hovedelementet veksler seksjoner mellom rutenett med hvite kort og aksentpaneler i fullfarge. Logoveggen er et sentrert rutenett med én rad med partnerlogoer i gråtoner. Funksjonsblokkene bruker et tokolonneoppsett (tekst til venstre, farget panel til høyre), som veksler fra venstre til høyre mellom seksjonene. «Spør assistentene dine på forespørsel»-delen bruker et 2x2-kortrutenett, der det øverste kortet tar opp full bredde, og den nederste raden er delt inn i to like kolonner. Innfellingene mellom seksjonene er generøse (~80 piksler), noe som skaper en rolig vertikal rytme. Navigasjonen er en fast 64 piksler høy topplinje med sentrerte navigasjonselementer og høyrejusterte handlingsknapper.
Illustrasjoner er avgjørende, uten bilder. Det visuelle språket er bygget på flate, illustrerte symboler (avrundede kanter i 2px fargede sirkler), abstrakte dekorative elementer (håndtegnede kruseduller, glitter, piler, blomsterformer) og mockups av produktets brukergrensesnitt. Symbolene vises i hovedvinduet som en horisontal rad med syv avatarer og er spredt over siden som leken tegnsetting. Produktskjermbilder er de eneste "ekte" visuelle elementene: de viser det faktiske Notion-grensesnittet (Kanban-tavler, dokumentvisninger, AI-agentpaneler) med et komplett sett med elementer og reelle data. Produktmockupen i hovedvinduet er stor, sentrert og kaster en enkelt skygge som skiller den fra lerretet. Det er ingen livsstilsbilder, ingen arkivbilder, ingen abstrakte 3D-gjengivelser.
Palett
Merke
- Notion Blue
#0075de— Hovedelementet som fyller opp handlingsfremmende knapper (CTA), en aksent i den aktive navigasjonen, er fylte handlingsknapper det eneste fargeskjemaet i et nesten monokromt system som er mettet nok til å oppfattes som en bryter.
Nøytral
- Paper Warmth
#f6f5f4— Sidelerretet, bakgrunnen i hovedvinduet og seksjonsbakgrunnen har alle varme, litt beige farger som gir systemet en taktil, analog følelse. - Pure White
#ffffff— Kortoverflater, hevede paneler, logobakgrunn, kontrasterende tekst på mørke kort. - Ink Black
#000000— Hovedtekst, navigasjonslenker, overskrifter – brukes med ulik gjennomsiktighet (100 %, 95 %, 90 %, 60 %, 40 %, 20 %) for å bygge hierarki uten å legge til nye farger. - Charcoal
#111111— Et alternativ for mørk tekst for de områdene i brukergrensesnittet der ren svart ville sett for hard ut. - Stone
#757575— Sekundær navigasjonstekst, dempet hjelpetekst, deaktiverte knappetiketter – 60 % blekkalfabetisk - Graphite
#615d59— Hovedteksten har en varm tone – brungrå, som harmonerer med den varme bakgrunnen.
Typografi
fra 12 til 96 piksler · 10 trinn
- NotionInter — erstatning: Inter · omriss 400, 500, 600, 700 · Hovedfonten sans-serif er en geometrisk humanistisk skrift med subtile nyanser, brukt i størrelse 400 for brødtekst, 500 for navigasjon/brukergrensesnitt og 600–700 for overskrifter. Skriftstørrelsen bruker aggressiv negativ bokstavavstand i større størrelser (-4,6 piksler ved 96 piksler, -2 piksler ved 72 piksler), noe som gjør at overskriften føles mer kompakt og selvsikker, snarere enn luftig.
- Lyon Text — erstatning: Source Serif Pro · omriss 400 · Den redaksjonelle serif-skrifttypen, reservert for individuelle deler av hovedteksten og innledningene til seksjonene, brukes sparsomt (fire ganger) for å gi skrifttypen litterær tyngde, på samme måte som et sitat i et magasinlayout. Den fungerer som en systemisk aksent snarere enn et parallelt hierarki.
Intervaller og form
| Hensikt | Betydning |
|---|---|
| Tetthet | gjennomsnittlig |
| Grunnleggende trinn | 8px |
| Knapperadius | 8px |
| Kortradius | 12px |
| Skygger | ingen grenser i stedet for skygger |
| Mellom seksjoner | 80px |
| Sidebredde | 1440px |
AI vil bygge nettstedet ditt i Notion -stil og fylle det
- Fyll på med produkter og innlegg via lenken - Instagram, TikTok, Facebook.
- Overfør innhold fra det gamle nettstedet ditt – bare oppgi adressen.
- Moderne design på den beste søkemotoren: React ( Next.js) med serverrendering og SEO-optimalisering rett ut av boksen.
- Helautomatisk SEO-optimalisering for søkeresultater og anbefalinger fra nevrale nettverk.
Lignende stiler
- ElevenLabs — Et fotoessay i varme kremfarger med diskré overskrifter. En notatbok i Bauhaus-stil – eggeskallfarget papir, svart blekk og en enkelt lilla og oransje aksent for produktfremvisning.
- Awesomic — Redaksjonelt sinknett med oransje tegnsettingstegn som minner om konfetti
- Monad — redaksjonell teknisk tidsskrift på varmt pergament
- Dub — Links kontrollpanel for matt rispapir
- Seline Analytics — Et stille analytisk bord på varmt papir
- Anthropic — Et vitenskapelig felttidsskrift på varmt vellum – rolige elfenbensfargede overflater, seriferte redaksjonelle overskrifter og en enkelt leireaksent som bare dukker opp når handling er nødvendig.
- Calendly — Mørkeblått blekk på kald marmor
- Augen Pro — Apples hvite presentasjon har en klinisk, vektløs, elektrisk blåfarge som eneste aksent i et monokromt rom.
- Antimetal — En redaksjonell krønike på kremfarget papir – en stille morgen i et vitenskapelig tidsskrift, hvor tilbakeholdenhet formidler selvtillit og seriffer gjør det tunge arbeidet
- Perk — Elektrisk lime på varmt bakepapir
- Ditto — Et solfylt verksted som lager prøver av villblomster. Varme kremfargede overflater, en livlig gul grunnfarge, dyp marineblå blekk, organiske fargeformer som blomstrer bak verket.
- Officevibe — Et redaksjonelt magasin på varmt kremfarget papir. Se for deg et tankevekkende essay om HR-ledelse, presentert som et produkt – en kursiv serif-skrift som hvisker gjennom et moderne blått grensesnitt.