Notion
E waarme Pabeiernotizbuch an der Mëttesonn
D'Interface vun Notion gesäit aus wéi en beléiften Notizbuch aus Pabeier am hellen Dag: eng waarm, cremeg Leinwand (#f6f5f4), déi sech éischter taktil wéi steril ufillt, eng generéis Sans-Serif-Typographie, déi dem Produkttext redaktionellt Gewiicht gëtt, a Faarwen, déi als spuersam Interpunktioun benotzt ginn - pêchefaarweg "Pëllen" markéieren d'Verben, e puer Blo-Faarwen verankeren d'Haaptaktioun, an eng rotéierend Palette vun Akzenttéin (Korall, Amber, Himmel, Mëtternuecht) faarwen den Hannergrënn vun de Kaarten wéi Stickeren. D'Kaarte sinn op enger Leinwand mat dënnen Ränner an Ecker arrangéiert - keng Schied, kee Chrom - wéi déi linear Sektiounen vun engem Moleskine Notizbuch. D'Animatioun ass spilleresch a sprëtzeg, mat fléissenden Iwwergäng bei 200ms a sprëtzegen Charakteranimatiounen, déi dem Interface Liewen erwecken ouni dekorativ ze sinn.
Zentréiert ass déi maximal Breet op ongeféier 1440px limitéiert. Den Haaptelement ass e zentréierte Stapel: eng Rei vu Symboler → eng grouss zwee-zeileg Iwwerschrëft mat enger agebauter faarweger Pille → eng Ënneriwwerschrëft → eng Rei mat zwee Call-to-Action-Knäppercher → e grousse Produkt-UI-Mockup. Ënnert dem Haaptelement wiesselen d'Sektiounen tëscht Gitter vu wäisse Kaarten a vollfaarwege Akzentpanelen. D'Logowand ass e zentréiert eenreiegt Gitter vu Partnerlogoen a Grostufen. D'Featureblocken benotzen en Layout mat zwou Kolonnen (Text lénks, faarweg Panel riets), woubäi tëscht de Sektiounen vu lénks no riets ofwiesselnd wiesselt. D'Sektioun "Frot Är Assistenten op Ufro" benotzt e 2x2 Kaarte-Raster, wou déi iewescht Kaart déi ganz Breet anhëlt, an déi ënnescht Rei an zwou gläichméisseg Kolonnen opgedeelt ass. D'Linnen tëscht de Sektioune si generéis (~80px), wat e rouege vertikale Rhythmus erstellt. D'Navigatioun ass eng fix 64px héich iewescht Leescht mat zentréierten Navigatiounselementer a riets ausgeriichten Aktiounsknäppercher.
Illustratioune si virun allem do, ouni Fotoen. Déi visuell Sprooch baséiert op flaache, illustréierte Symboler (gerundete Kanten a faarwege Kreesser vun 2px), abstrakte dekorativen Elementer (handgezeechent Kräizercher, Glitter, Pfeiler, Blummeformen) a Mockups vun der Benotzerinterface vum Produkt. D'Symboler erschéngen am Haaptfenster als horizontal Rei vu siwen Avataren a sinn als spilleresch Interpunktioun iwwer d'Säit verstreet. Produkt-Screenshots sinn déi eenzeg "richteg" visuell Elementer: si weisen déi aktuell Notion-Interface (Kanban-Tafelen, Dokumentenansichten, KI-Agenten-Paneele) mat engem komplette Set vun Elementer an realen Daten. De Produktmockup am Haaptfenster ass grouss, zentréiert a werft en eenzege Schiet, deen en vum Leinwand trennt. Et gi keng Lifestyle-Fotoen, keng Stockbiller, keng abstrakt 3D-Renderungen.
Palette
Mark
- Notion Blue
#0075de— Als Haaptelement fëllt den Call-to-Action (CTA)-Knäppchen en Akzent an der aktiver Navigatioun, ausgefëllte Aktiounsknäppercher sinn déi eenzeg Faarfkombinatioun an engem bal monochrome System, déi gesättigt genuch ass, fir als Schalter ugesi ze ginn.
Neutral
- Paper Warmth
#f6f5f4— D'Säite-Leinwand, den Hannergrond vum Haaptfenster an den Hannergrond vum Sektioun sinn all waarm, liicht beige Faarwen, déi dem System e taktilt, analogt Gefill ginn. - Pure White
#ffffff— Kaarteflächen, erhiewte Paneele, Logo-Hannergrond, Kontrasttext op donkelen Kaarten. - Ink Black
#000000— Haapttext, Navigatiounslinken, Iwwerschrëften - gi mat ënnerschiddlecher Transparenz (100%, 95%, 90%, 60%, 40%, 20%) benotzt fir eng Hierarchie opzebauen ouni nei Faarwen derbäizesetzen. - Charcoal
#111111— Eng Optioun fir donkelen Text fir déi UI-Beräicher, wou reng Schwaarz ze haart ausgesäit. - Stone
#757575— Sekundären Navigatiounstext, gedämpften Hëllefstext, deaktivéiert Knäppchenetiketten - 60% Tënt Alpha - Graphite
#615d59— Den Haapttext huet en waarmen Toun - bronggro, deen mam waarmen Hannergrond harmonéiert.
Typographie
vun 12 bis 96px · 10 Schrëtt
- NotionInter — Ersatz: Inter · Konturen 400, 500, 600, 700 · Déi haapt Sans-Serif-Schrëft ass eng geometresch humanistesch Schrëft mat subtile Nuancen, déi a Gréissten 400 fir den Haapttext, 500 fir d'Navigatioun/Benotzerinterface an 600-700 fir Iwwerschrëften benotzt gëtt. D'Schrëftskala benotzt aggressiv negativ Buschtawenofstänn a gréissere Gréissten (-4,6px bei 96px, -2px bei 72px), wouduerch d'Iwwerschrëft méi kompakt a selbstbewosst ausgesäit, anstatt liicht.
- Lyon Text — Ersatz: Source Serif Pro · Konturen 400 · Déi redaktionell Serif-Schrëft, déi fir eenzel Abschnitter vum Haapttext an d'Aféierunge vum Abschnitt reservéiert ass, gëtt spuersam (véiermol) benotzt, fir der Schrëft e literatescht Gewiicht ze ginn, ähnlech wéi en Zitat an engem Zäitschrëftenlayout. Si funktionéiert éischter als systemeschen Akzent wéi als parallel Hierarchie.
Intervaller a Form
| Zweck | Bedeitung |
|---|---|
| Dicht | duerchschnëttlech |
| Basis Schrëtt | 8px |
| Knäppchenradius | 8px |
| Kaarteradius | 12px |
| Schied | keng Grenzen amplaz vu Schied |
| Tëscht de Sektiounen | 80px |
| Säitebreet | 1440px |
KI baut Är Websäit am Stil vun Notion op a fëllt se aus
- Fëllt mat Produkter a Posts iwwer de Link aus - Instagram, TikTok, Facebook.
- Inhalt vun Ärer aler Säit transferéieren - gitt einfach d'Adress un.
- Modernen Design op der beschter Engine: React ( Next.js) mat Serverrendering an SEO Optimiséierung direkt aus der Këscht.
- Vollautomatesch SEO-Optimiséierung fir Sichresultater an Empfehlungen fir neuronal Netzwierker.
Ähnlech Stiler
- ElevenLabs — E Fotoessay a waarme Crèmetéin mat subtile Schlagzeilen. En Notizbuch am Bauhaus-Stil - Eeërschuelfaarwegt Pabeier, schwaarz Tënt an een eenzege violette an orange Akzent fir d'Produktpresentatioun.
- Awesomic — Redaktiounszinknetz mat orange Punktuatiounszeechen, déi u Konfetti erënneren
- Monad — redaktionell technesch Zäitschrëft op waarmem Pergament
- Dub — Link säi Kontrollpanel aus matte Räispabeier
- Seline Analytics — Eng roueg analytesch Tabelle op waarmem Pabeier
- Anthropic — Eng wëssenschaftlech Feldzäitschrëft op waarmem Pergament - roueg elfenbeinfaarweg Uewerflächen, schifereg Editorial-Iwwerschrëften an een eenzegen Tounakzent, deen nëmmen erschéngt, wann Handlung néideg ass.
- Calendly — Donkelblo Tënt op kalem Marmer
- Augen Pro — Apple seng wäiss Presentatioun weist e klineschen, gewichtslose, elektresche Blo als eenzegen Akzent an engem monochrome Raum.
- Antimetal — Eng redaktionell Chronik op cremefaarwegem Pabeier - e rouege Moien an enger wëssenschaftlecher Zäitschrëft, wou Zréckhaltung Selbstvertrauen ausstraalt a Serifen déi schwéier Aarbecht maachen.
- Perk — Elektresch Kalk op waarmem Bakpabeier
- Ditto — E sonnebeliichte Workshop fir d'Erstelle vu Wildblummenprouwen. Waarm Crème-Uewerflächen, eng lieweg giel Basisfaarf, déif marineblo Tënten, organesch Faarfformen, déi hannert dem Stéck bléien.
- Officevibe — Eng redaktionell Zäitschrëft op waarmem crèmefaarwege Pabeier. Stellt Iech en nodenklechen Essay iwwer HR-Management vir, deen als Produkt presentéiert gëtt - eng Schrëft mat Serif, déi duerch eng modern blo Interface flüstert.