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ä
- Mollie — Kashmir-tiski, tumma kirjanpito. Jätä mustan tekstin ympärille runsaasti tyhjää tilaa toimitukselliselle suunnittelulle ja vahvista sitten tuotteisiin liittyviä seikkoja lämpimillä kermavaahdoilla, espressonruskeilla sävyillä ja taktiilisilla kuvilla oikeista maksutavoista.
- Kagi — Erillinen lukusali. Luo avoin valkoinen tila rohkean grafiittitekstin ympärille käyttämällä hienovaraisia violetteja aksentteja ja lämpimiä pastellivärisiä pintoja rikkomaan rauhaa.
- Milanote — Milanote on luova studio. Luo toimituksellisia galleriatyylisiä sivuja käyttämällä kelluvia visuaalisia tauluja: tummia kehystettyjä seiniä, valkoista näyttötilaa ja kuvakaappauksia, jotka näyttävät oikeilta esineiltä pehmeällä syvyydellä.
- Co2 — Ilmastoatlas talvivalossa. Luo sivuja ilmakuvamaisen dokumenttimaiseman kaltaisesti, jossa serif-otsikot, kategoriakoodatut tiedot ja jäiset kuvat korostavat leveitä valkoisia reunoja.
- GitButler — Turkoosi tekstin lopussa. Yhdistelmä voimakaskontrastisia serif-otsikoita hienovaraisilla teknisillä ruudukoilla, lämpimillä grafiittipinnoilla ja hillityllä turkoosilla aksentilla.
- 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