Notion
Varma papera kajero en la tagmeza suno
La interfaco de Notion aspektas kiel amata papera kajero en plena taglumo: varma, kremkolora kanvaso (#f6f5f4) kiu sentas palpebla anstataŭ sterila, malavara sanserifa tipografio donanta redakcian pezon al la produkta teksto, kaj koloro uzata kiel malabunda interpunkcio - persikkoloraj "piloloj" elstarigas verbojn, ununura bluo ankras la ĉefan agon, kaj rotacianta aro de akcentaj nuancoj (koralo, sukceno, ĉielo, noktomezo) kolorigas la kartajn fonojn kiel glumarkojn. Kartoj estas aranĝitaj sur kanvaso kun maldikaj randoj kaj anguloj - neniuj ombroj, neniu kromo - kiel la liniitaj sekcioj de Moleskine-kajero. Animacio estas ludema kaj elasta, kun glataj transiroj je 200ms kaj elastaj rolulaj animacioj kiuj vivigas la interfacon sen esti ornamaj.
Centrita, la maksimuma larĝo estas limigita al proksimume 1440 rastrumeroj. La ĉefa elemento estas centrita stako: vico da simboloj → granda du-linia titolo kun enigita kolora pilolo → subtitolo → vico kun du butonoj por alvoko al ago → granda modelo de la produkta uzantinterfaco. Sub la ĉefa elemento, sekcioj alternas inter kradoj de blankaj kartoj kaj plenkoloraj akcentaj paneloj. La logo-muro estas centrita unu-vica krado de partneraj logotipoj en griza skalo. La trajtaj blokoj uzas du-kolumnan aranĝon (teksto maldekstre, kolora panelo dekstre), alternante de maldekstre dekstren inter sekcioj. La sekcio "Demandu viajn asistantojn laŭpete" uzas 2x2-kartan kradon, kie la supra karto okupas la plenan larĝon, kaj la malsupra vico estas dividita en du egalajn kolumnojn. La dekanaloj inter sekcioj estas malavaraj (~80 rastrumeroj), kreante trankvilan vertikalan ritmon. La navigado estas fiksa 64 rastrumera alta supra stango kun centritaj navigaciaj elementoj kaj dekstre vicigitaj agobutonoj.
Ilustraĵoj estas plej gravaj, sen fotoj. La vida lingvo estas konstruita sur plataj, ilustritaj simboloj (rondaj randoj en 2-rastrumeraj koloraj cirkloj), abstraktaj ornamaj elementoj (mane desegnitaj skribaĉoj, briletaĵo, sagoj, florformoj), kaj modeloj de la uzanto-interfaco de la produkto. La simboloj aperas en la ĉefa fenestro kiel horizontala vico de sep avataroj kaj estas disĵetitaj tra la paĝo kiel ludema interpunkcio. Produktaj ekranfotoj estas la solaj "realaj" vidaj elementoj: ili montras la faktan Notion-interfacon (Kanban-tabuloj, dokumentaj vidoj, paneloj de AI-agentoj) kun plena aro de elementoj kaj realaj datumoj. La produkta modelo en la ĉefa fenestro estas granda, centrita, kaj ĵetas unuopan ombron apartigantan ĝin de la kanvaso. Ne estas vivstilaj fotoj, neniuj bildoj, neniuj abstraktaj 3D-bildigoj.
Paletro
Marko
- Notion Blue
#0075de— La ĉefa elemento pleniganta la butonon por alvoko al ago (AGO), akcento en la aktiva navigado, plenaj agbutonoj estas la sola kolorskemo en preskaŭ monokroma sistemo, kiu estas sufiĉe saturita por esti perceptita kiel ŝaltilo.
Neŭtrala
- Paper Warmth
#f6f5f4— La paĝkanvaso, la ĉefa fenestrofono, kaj la sekcia fono estas ĉiuj varmaj, iomete flavgrizaj koloroj, kiuj donas al la sistemo palpan, analogan senton. - Pure White
#ffffff— Kartsurfacoj, ŝvelintaj paneloj, emblema fono, kontrasta teksto sur malhelaj kartoj. - Ink Black
#000000— Ĉefa teksto, navigaciaj ligiloj, titoloj - uzataj kun malsamaj travideblecoj (100%, 95%, 90%, 60%, 40%, 20%) por konstrui hierarkion sen aldoni novajn kolorojn. - Charcoal
#111111— Malhela teksta opcio por tiuj uzantinterfacaj areoj kie pura nigra aspektus tro akra. - Stone
#757575— Dua navigada teksto, silentigita helpa teksto, malŝaltitaj butonaj etikedoj - 60% inka alfao - Graphite
#615d59— La ĉefa teksto havas varman tonon - brungrizan, kiu harmonias kun la varma fono.
Tipografio
de 12 ĝis 96 rastrumeroj · 10 paŝoj
- NotionInter — anstataŭaĵo: Inter · konturoj 400, 500, 600, 700 · La ĉefa sanserifa tiparo estas geometria humanisma kun subtilaj nuancoj, uzata je grandecoj 400 por la ĉefteksto, 500 por navigado/uzantinterfaco, kaj 600-700 por titoloj. La tipara skalo uzas agreseman negativan literinterspacon je pli grandaj grandecoj (-4.6px je 96px, -2px je 72px), kio igas la titolon ŝajni pli kompakta kaj memfida, anstataŭ aera.
- Lyon Text — anstataŭaĵo: Source Serif Pro · konturoj 400 · La redakcia serifa tiparo, rezervita por individuaj sekcioj de la ĉefa teksto kaj sekciaj enkondukoj, estas uzata ŝpareme (kvar fojojn) por doni al la tiparo literaturan pezon, simile al citaĵo en revua aranĝo. Ĝi funkcias kiel sistema akcento prefere ol paralela hierarkio.
Intervaloj kaj formo
| Celo | Signifo |
|---|---|
| Denseco | averaĝa |
| Baza paŝo | 8px |
| Butona radiuso | 8px |
| Karto-radiuso | 12px |
| Ombroj | ne - limoj anstataŭ ombroj |
| Inter sekcioj | 80px |
| Paĝlarĝo | 1440px |
AI konstruos vian retejon laŭ la stilo de Notion kaj plenigos ĝin
- Plenigu per produktoj kaj afiŝoj per la ligilo - Instagram, TikTok, Facebook.
- Transdonu enhavon de via malnova retejo — nur specifu la adreson.
- Moderna dezajno sur la plej bona motoro: React ( Next.js) kun servila bildigo kaj SEO-optimigo tuj uzeblaj.
- Plene aŭtomatigita SEO-optimigo por serĉrezultoj kaj rekomendoj pri neŭralaj retoj.
Similaj stiloj
- ElevenLabs — Fotoeseo en varmaj kremkoloraj tonoj kun subtilaj titoloj. Notlibro en la stilo de Bauhaus — ovoŝelkolora papero, nigra inko, kaj ununura viola kaj oranĝa akcento por montri la produkton.
- Awesomic — Redakcia zinka reto kun oranĝaj interpunkciaj signoj rememorigaj pri konfetoj
- Monad — redakcia teknika revuo sur varma pergameno
- Dub — La kontrolpanelo de Link, la senbrila rizpapero
- Seline Analytics — Trankvila analiza tablo sur varma papero
- Anthropic — Scienca kampa revuo sur varma pergamentpapero — trankvilaj eburaj surfacoj, serifaj ĉefartikoltitoloj, kaj ununura argila akcento kiu aperas nur kiam agado estas necesa.
- Calendly — Malhelblua inko sur malvarma marmoro
- Augen Pro — La blanka prezento de Apple havas klinikan, senpezan, elektran bluon kiel la solan akĉenton en monokroma spaco.
- Antimetal — Redakcia kroniko sur kremkolora papero — trankvila mateno ĉe scienca revuo, kie sinregado transdonas fidon kaj serifoj faras la pezan laboron
- Perk — Elektra kalko sur varma pergamentpapero
- Ditto — Sunlumita laborejo kreante specimenojn de sovaĝfloroj. Varmaj kremkoloraj surfacoj, vigla flava bazkoloro, profundaj marbluaj inkoj, organikaj kolorformoj florantaj malantaŭ la peco.
- Officevibe — Redakcia revuo sur varma kremkolora papero. Imagu pripenseman eseon pri dungitaro-administrado, prezentitan kiel produkton — kursiva serifa tiparo flustranta tra moderna blua interfaco.