Notion
Lämmin paperinen muistikirja keskipäivän auringossa
Notionin käyttöliittymä näyttää rakastetulta paperimuistikirjalta kirkkaassa päivänvalossa: lämmin, kermanvärinen kangas (#f6f5f4), joka tuntuu pikemminkin käsin kosketeltavalta kuin steriililtä, runsas sans-serif-typografia antaa tuotetekstille toimituksellista painoarvoa, ja niukkana välimerkkinä käytetty väri – persikanväriset "pillerit" korostavat verbejä, yksi sininen ankkuroi päätoiminnon ja vaihtuva valikoima korostusvärejä (koralli, meripihka, taivas, keskiyö) värittää korttien taustoja kuin tarroja. Kortit on aseteltu kankaalle, jossa on ohuet reunat ja kulmat – ei varjoja, ei kromia – kuten Moleskine-muistikirjan viivoitetut osiot. Animaatio on leikkisää ja joustavaa, ja siinä on sulavat siirtymät 200 ms:n välein ja joustavat hahmoanimaatiot, jotka tuovat eloa käyttöliittymään olematta koristeellisia.
Keskitettynä enimmäisleveys on rajoitettu noin 1440 pikseliin. Pääelementti on keskitetty pino: rivi symboleja → suuri kaksirivinen otsikko, johon on upotettu värillinen pilleri → alaotsikko → rivi, jossa on kaksi toimintakehotuspainiketta → suuri tuote-käyttöliittymän malli. Pääelementin alapuolella osiot vuorottelevat valkoisten korttien ruudukoiden ja täysväristen tehostepaneelien välillä. Logoseinä on keskitetty yksirivinen ruudukko, jossa on harmaasävyisiä kumppaneiden logoja. Ominaisuuslohkot käyttävät kaksisarakkeista asettelua (teksti vasemmalla, värillinen paneeli oikealla), ja osiot vuorottelevat vasemmalta oikealle. "Kysy avustajiltasi pyynnöstä" -osiossa käytetään 2x2-korttiruudukkoa, jossa ylin kortti vie koko leveyden ja alin rivi on jaettu kahteen yhtä suureen sarakkeeseen. Osioiden väliset sisävälit ovat reilut (~80 pikseliä), mikä luo rauhallisen pystysuuntaisen rytmin. Navigointi on kiinteä 64 pikselin korkea yläpalkki, jossa on keskitetyt navigointielementit ja oikealle tasatut toimintopainikkeet.
Kuvitukset ovat ensiarvoisen tärkeitä, eikä valokuvia ole lainkaan. Visuaalinen kieli rakentuu tasaisille, kuvitetuille symboleille (pyöristetyt reunat kahden pikselin värillisissä ympyröissä), abstrakteille koriste-elementeille (käsin piirretyt viivat, kimallus, nuolet, kukkakuviot) ja tuotteen käyttöliittymän mallikuville. Symbolit näkyvät pääikkunassa seitsemän avatarin vaakasuorana rivinä ja ne on hajallaan sivulla leikkisinä välimerkkeinä. Tuotekuvakaappaukset ovat ainoat "oikeat" visuaaliset elementit: ne näyttävät varsinaisen Notion-käyttöliittymän (Kanban-taulut, dokumenttinäkymät, tekoälyagenttien paneelit) täydellä elementtivalikoimalla ja oikeilla tiedoilla. Pääikkunan tuotemalli on suuri, keskitetty ja heittää yhden varjon erottaen sen piirtoalueesta. Ei ole lifestyle-kuvia, ei kuvapankkikuvia tai abstrakteja 3D-renderöintejä.
Paletti
Merkki
- Notion Blue
#0075de— Toimintakehotuspainikkeen (CTA) pääelementti, aktiivisen navigoinnin aksentti, täytetyt toimintopainikkeet ovat lähes yksivärisen järjestelmän ainoa värimaailma, joka on riittävän kylläinen, jotta se voidaan havaita kytkimenä.
Neutraali
- Paper Warmth
#f6f5f4— Sivun pohja, pääikkunan tausta ja osion tausta ovat kaikki lämpimiä, hieman beigenvärisiä, jotka antavat järjestelmälle tuntuvan ja analogisen tunnelman. - Pure White
#ffffff— Korttipinnat, kohokuvioidut paneelit, logotausta, kontrastivärinen teksti tummilla korteilla. - Ink Black
#000000— Pääteksti, navigointilinkit, otsikot – käytetään eri läpinäkyvyysasteilla (100 %, 95 %, 90 %, 60 %, 40 %, 20 %) hierarkian rakentamiseksi lisäämättä uusia värejä. - Charcoal
#111111— Tumma tekstivaihtoehto niille käyttöliittymän alueille, joilla puhdas musta näyttäisi liian karulta. - Stone
#757575— Toissijainen navigointiteksti, mykistetty aputeksti, käytöstä poistetut painikkeiden otsikot - 60 % mustealfa - Graphite
#615d59— Päätekstissä on lämmin sävy – ruskehtavan harmaa – joka sopii yhteen lämpimän taustan kanssa.
Typografia
12:sta 96 pikseliin · 10 askelta
- NotionInter — korvaava: Inter · ääriviivat 400, 500, 600, 700 · Pääfontti on geometrinen humanistinen, hienovaraisilla vivahteilla varustettu fontti, jota käytetään koossa 400 leipätekstissä, 500 navigoinnissa/käyttöliittymässä ja 600–700 otsikoissa. Fonttiasteikko käyttää aggressiivista negatiivista kirjainvälistystä suuremmissa kokoluokissa (-4,6 pikseliä 96 pikselin koossa, -2 pikseliä 72 pikselin koossa), mikä tekee otsikosta kompaktimman ja itsevarmemman eikä ilmavan.
- Lyon Text — korvaava: Source Serif Pro · ääriviivat 400 · Päätekstin yksittäisille osioille ja osioiden johdannoille varattua toimituksellista serif-fonttia käytetään säästeliäästi (neljä kertaa) antamaan kirjasintyypille kirjallista painoarvoa, samalla tavalla kuin aikakauslehden lainauksella. Se toimii systeemisenä aksenttina eikä rinnakkaisena hierarkiana.
Intervallit ja muoto
| Tarkoitus | Merkitys |
|---|---|
| Tiheys | keskimäärin |
| Perusvaihe | 8px |
| Painikkeen säde | 8px |
| Kortin säde | 12px |
| Varjot | ei - reunoja varjojen sijaan |
| Osioiden välillä | 80px |
| Sivun leveys | 1440px |
Tekoäly rakentaa verkkosivustosi Notion -tyyliin ja täyttää sen
- Täytä tuotteilla ja julkaisuilla linkin kautta - Instagram, TikTok, Facebook.
- Siirrä sisältöä vanhalta sivustoltasi – määritä vain osoite.
- Moderni design parhaalla hakukonemoottorilla: React ( Next.js) palvelinrenderöinnillä ja SEO-optimoinnilla suoraan paketista.
- Täysin automatisoitu hakukoneoptimointi hakutuloksille ja neuroverkkosuosituksille.
Samankaltaisia tyylejä
- ElevenLabs — Lämpimin kermanvärisin sävyin kirjoitettu valokuvaessee hienovaraisilla otsikoilla. Bauhaus-tyylinen muistikirja – kananmunankuorenväristä paperia, mustaa mustetta ja yksi violetti-oranssi tehoste tuote-esittelyä varten.
- Awesomic — Toimituksellinen sinkkiverkko, jossa on oransseja konfettimaisisia välimerkkejä
- Monad — toimituksellinen tekninen aikakauslehti lämpimällä pergamentilla
- Dub — Linkin mattapintainen riisipaperista valmistettu ohjauspaneeli
- Seline Analytics — Hiljainen analyyttinen pöytä lämpimällä paperilla
- Anthropic — Tieteellinen kenttälehti lämpimällä pergamentilla – rauhallisilla norsunluunvärisillä pinnoilla, serifioiduilla otsikoilla ja yhdellä savesta tehdyllä aksentilla, joka ilmestyy vain silloin, kun toimintaa tarvitaan.
- Calendly — Tummansininen muste kylmällä marmorilla
- Augen Pro — Applen valkoisessa esitystavassa on kliininen, painoton, sähkönsininen ainoana aksenttina yksivärisessä tilassa.
- Antimetal — Pääkirjoituskronikka kermanvärisellä paperilla – hiljainen aamu tieteellisessä aikakauslehdessä, jossa hillitty tyyli välittää itsevarmuutta ja serifit tekevät raskaan työn.
- Perk — Sähkölime lämpimällä pergamenttipaperilla
- Ditto — Auringon valaisema työpaja, jossa luodaan luonnonkukkien näytteitä. Lämpimän kermanväriset pinnat, eloisan keltainen pohjaväri, syvän tummansiniset musteet, orgaaniset värimuodot kukkivat teoksen takana.
- Officevibe — Lämpimän kermanvärisellä paperilla painettu toimituksellinen aikakauslehti. Kuvittele harkittu essee henkilöstöhallinnosta, joka esitetään tuotteena – kursiivilla ja serif-fontilla kuiskaten modernin sinisen käyttöliittymän läpi.