Notion
En varm papirnotesbog i middagssolen
Notions brugerflade ligner en elsket papirnotesbog i fuldt dagslys: et varmt, cremet lærred (#f6f5f4), der føles taktilt snarere end sterilt, generøs sans-serif typografi, der giver redaktionel tyngde til produktteksten, og farver brugt som sparsom tegnsætning - ferskenfarvede "piller" fremhæver verber, en enkelt blå forankrer hovedhandlingen, og et roterende udvalg af accentfarver (koral, rav, himmel, midnat) farver kortbaggrundene som klistermærker. Kortene er arrangeret på et lærred med tynde kanter og hjørner - ingen skygger, ingen krom - ligesom de linjerede sektioner i en Moleskine notesbog. Animationen er legende og spændstig med glatte overgange på 200 ms og spændstige karakteranimationer, der bringer liv til brugerfladen uden at være dekorative.
Centreret er den maksimale bredde begrænset til cirka 1440px. Hovedelementet er en centreret stak: en række symboler → en stor overskrift med to linjer og en indlejret farvet pille → en underoverskrift → en række med to call-to-action-knapper → en stor produkt-UI-mockup. Under hovedelementet skifter sektionerne mellem gitre af hvide kort og accentpaneler i fuld farve. Logovæggen er et centreret gitter med én række af partnerlogoer i gråtoner. Funktionsblokkene bruger et layout med to kolonner (tekst til venstre, farvet panel til højre), der skifter fra venstre mod højre mellem sektionerne. Sektionen "Spørg dine assistenter efter behov" bruger et 2x2-kortgitter, hvor det øverste kort optager den fulde bredde, og den nederste række er opdelt i to lige store kolonner. Mellemrummene mellem sektionerne er generøse (~80px), hvilket skaber en rolig lodret rytme. Navigationen er en fast 64px høj topbjælke med centrerede navigationselementer og højrejusterede handlingsknapper.
Illustrationer er altafgørende, uden fotos. Det visuelle sprog er bygget på flade, illustrerede symboler (afrundede kanter i 2px farvede cirkler), abstrakte dekorative elementer (håndtegnede kruseduller, glitter, pile, blomsterformer) og mockups af produktets brugergrænseflade. Symbolerne vises i hovedvinduet som en vandret række af syv avatarer og er spredt ud over siden som legende tegnsætning. Produktskærmbilleder er de eneste "rigtige" visuelle elementer: de viser den faktiske Notion-grænseflade (Kanban-tavler, dokumentvisninger, AI-agentpaneler) med et komplet sæt elementer og reelle data. Produktmockup'en i hovedvinduet er stor, centreret og kaster en enkelt skygge, der adskiller den fra lærredet. Der er ingen livsstilsfotos, ingen stockbilleder, ingen abstrakte 3D-gengivelser.
Palet
Mærke
- Notion Blue
#0075de— Hovedelementet, der udfylder call-to-action (CTA)-knappen, en accent i den aktive navigation, udfyldte handlingsknapper er det eneste farveskema i et næsten monokromt system, der er mættet nok til at blive opfattet som en switch.
Neutral
- Paper Warmth
#f6f5f4— Sidelærredet, hovedvinduets baggrund og sektionens baggrund er alle i varme, let beige farver, der giver systemet en taktil, analog fornemmelse. - Pure White
#ffffff— Kortoverflader, hævede paneler, logobaggrund, kontrasterende tekst på mørke kort. - Ink Black
#000000— Hovedtekst, navigationslinks, overskrifter - bruges med forskellig gennemsigtighed (100%, 95%, 90%, 60%, 40%, 20%) for at opbygge hierarki uden at tilføje nye farver. - Charcoal
#111111— En mørk tekstmulighed til de områder i brugergrænsefladen, hvor ren sort ville se for skarp ud. - Stone
#757575— Sekundær navigationstekst, dæmpet hjælpetekst, deaktiverede knapetiketter - 60% håndskriftalfabe - Graphite
#615d59— Hovedteksten har en varm tone - brunlig grå, som harmonerer med den varme baggrund.
Typografi
fra 12 til 96px · 10 trin
- NotionInter — udskiftning: Inter · konturer 400, 500, 600, 700 · Den primære sans-serif-skrifttype er en geometrisk humanistisk skrifttype med subtile nuancer, der bruges i størrelserne 400 til brødtekst, 500 til navigation/brugergrænseflade og 600-700 til overskrifter. Skriftstørrelsen bruger aggressiv negativ bogstavafstand i større størrelser (-4,6px ved 96px, -2px ved 72px), hvilket får overskriften til at føles mere kompakt og selvsikker snarere end luftig.
- Lyon Text — udskiftning: Source Serif Pro · konturer 400 · Den redaktionelle serif-skrifttype, der er reserveret til individuelle afsnit af hovedteksten og afsnittene, bruges sparsomt (fire gange) for at give skrifttypen litterær vægt, svarende til et citat i et magasinlayout. Den fungerer som en systemisk accent snarere end et parallelt hierarki.
Intervaller og form
| Formål | Mening |
|---|---|
| Tæthed | gennemsnit |
| Grundlæggende trin | 8px |
| Knapradius | 8px |
| Kortradius | 12px |
| Skygger | ingen grænser i stedet for skygger |
| Mellem sektioner | 80px |
| Sidebredde | 1440px |
AI vil bygge din hjemmeside i Notion -stil og udfylde den
- Fyld med produkter og opslag via linket - Instagram, TikTok, Facebook.
- Overfør indhold fra dit gamle websted – angiv blot adressen.
- Moderne design på den bedste søgemotor: React ( Next.js) med serverrendering og SEO-optimering lige fra starten.
- Fuldautomatiseret SEO-optimering til søgeresultater og anbefalinger til neurale netværk.
Lignende stilarter
- ElevenLabs — Et fotoessay i varme cremefarvede toner med diskrete overskrifter. En notesbog i Bauhaus-stil – æggeskalsfarvet papir, sort blæk og en enkelt lilla og orange accent til produktpræsentation.
- Awesomic — Redaktionelt zinknet med orange tegnsætningstegn, der minder om konfetti
- Monad — redaktionelt teknisk tidsskrift på varmt pergament
- Dub — Links kontrolpanel med mat rispapir
- Seline Analytics — Et stille analysebord på varmt papir
- Anthropic — Et videnskabeligt felttidsskrift på varmt pergament – rolige elfenbensfarvede overflader, seriferede redaktionelle overskrifter og en enkelt leraccent, der kun vises, når handling er nødvendig.
- Calendly — Mørkeblå blæk på kold marmor
- Augen Pro — Apples hvide præsentation har en klinisk, vægtløs, elektrisk blå farve som den eneste accent i et monokromt rum.
- Antimetal — En redaktionel krønike på cremefarvet papir – en stille morgen i et videnskabeligt tidsskrift, hvor tilbageholdenhed udstråler selvtillid, og seriffer klarer det hårde arbejde.
- Perk — Elektrisk lime på varmt pergamentpapir
- Ditto — Et solbelyst værksted, der skaber prøver af vilde blomster. Varme cremefarvede overflader, en levende gul bundfarve, dyb marineblå blæk, organiske farveformer, der blomstrer bag værket.
- Officevibe — Et redaktionelt magasin på varmt cremefarvet papir. Forestil dig et tankevækkende essay om HR-ledelse, præsenteret som et produkt – en kursiv serif-skrifttype, der hvisker gennem en moderne blå brugerflade.