Notion
Buku cathetan kertas sing anget ing srengenge awan
Antarmuka Notion katon kaya buku cathetan kertas sing disenengi ing wayah awan bolong: kanvas sing anget lan lembut (#f6f5f4) sing krasa gampang disentuh tinimbang steril, tipografi sans-serif sing akeh menehi bobot editorial kanggo salinan produk, lan warna sing digunakake minangka tandha wacan sing jarang—"pil" peach nyorot kriya, biru siji jangkar tumindak utama, lan susunan warna aksen sing muter (karang, kuning, langit, tengah wengi) menehi warna latar mburi kertu kaya stiker. Kertu disusun ing kanvas kanthi wates lan pojok sing tipis—ora ana bayangan, ora ana krom—kaya bagean notebook Moleskine sing dilapisi. Animasi nyenengake lan kenyal, kanthi transisi sing lancar ing 200ms lan animasi karakter kenyal sing nguripake antarmuka tanpa dadi dekoratif.
Ing tengah, jembar maksimal diwatesi kira-kira 1440px. Unsur utama yaiku tumpukan ing tengah: deretan simbol → judhul rong baris gedhe kanthi pil warna sing dipasang → subjudul → baris kanthi rong tombol ajakan tumindak → mockup UI produk gedhe. Ing ngisor unsur utama, bagean-bagean ganti-ganti antarane kisi-kisi kertu putih lan panel aksen warna lengkap. Tembok logo minangka kisi-kisi baris siji sing ana ing tengah saka logo mitra kanthi skala abu-abu. Blok fitur nggunakake tata letak rong kolom (teks ing sisih kiwa, panel warna ing sisih tengen), ganti-ganti saka kiwa menyang tengen antarane bagean. Bagean "Takon asisten sampeyan nalika dijaluk" nggunakake kisi-kisi kertu 2x2, ing ngendi kertu ndhuwur njupuk jembar lengkap, lan baris ngisor dipérang dadi rong kolom sing padha. Talang antarane bagean jembar (~80px), nggawe irama vertikal sing tenang. Navigasi minangka bilah ndhuwur sing tetep dhuwuré 64px kanthi unsur navigasi ing tengah lan tombol aksi sing sejajar tengen.
Ilustrasi iku penting banget, tanpa foto. Basa visual digawe saka simbol sing rata lan diilustrasikan (pinggiran bunder ing bunderan warna 2px), elemen dekoratif abstrak (coretan tangan, glitter, panah, bentuk kembang), lan mockup antarmuka panganggo produk. Simbol-simbol kasebut katon ing jendela utama minangka larik horisontal saka pitung avatar lan kasebar ing kaca minangka tandha wacan sing nyenengake. Cuplikan layar produk minangka siji-sijine elemen visual "nyata": nuduhake antarmuka Notion sing nyata (papan Kanban, tampilan dokumen, panel agen AI) kanthi sakumpulan elemen lengkap lan data nyata. Mockup produk ing jendela utama gedhe, ana ing tengah, lan mung ana bayangan sing misahake saka kanvas. Ora ana foto gaya urip, ora ana gambar stok, ora ana render 3D abstrak.
Palet
Merek
- Notion Blue
#0075de— Unsur utama sing ngisi tombol ajakan tumindak (CTA), aksen ing navigasi aktif, tombol aksi sing diisi minangka siji-sijine skema warna ing sistem meh monokrom sing cukup jenuh kanggo dideleng minangka saklar.
Netral
- Paper Warmth
#f6f5f4— Kanvas kaca, latar mburi jendela utama, lan latar mburi bagean kabeh awujud warna anget, rada krem sing menehi sistem rasa analog sing taktil. - Pure White
#ffffff— Lumahing kertu, panel sing munggah, latar mburi logo, teks kontras ing kertu peteng. - Ink Black
#000000— Teks utama, pranala navigasi, judhul - digunakake kanthi transparansi sing beda (100%, 95%, 90%, 60%, 40%, 20%) kanggo mbangun hierarki tanpa nambahake warna anyar. - Charcoal
#111111— Pilihan teks peteng kanggo area UI sing werna ireng murni katon kakehan kasar. - Stone
#757575— Teks navigasi sekunder, teks pembantu sing dibisu, label tombol sing dipateni - 60% tinta alfa - Graphite
#615d59— Teks utama nduweni nada anget - abu-abu coklat, sing cocog karo latar mburi sing anget.
Tipografi
saka 12 nganti 96px · 10 langkah
- NotionInter — panggantos: Inter · garis besar 400, 500, 600, 700 · Font sans-serif utama yaiku humanis geometris kanthi nuansa sing alus, digunakake ing ukuran 400 kanggo teks awak, 500 kanggo navigasi/antarmuka panganggo, lan 600-700 kanggo judhul. Skala font nggunakake jarak huruf negatif sing agresif ing ukuran sing luwih gedhe (-4.6px ing 96px, -2px ing 72px), sing ndadekake judhul luwih ringkes lan percaya diri, tinimbang entheng.
- Lyon Text — panggantos: Source Serif Pro · garis besar 400 · Font serif editorial, sing dikhususake kanggo bagean individu saka teks utama lan pambuka bagean, digunakake kanthi sithik (kaping papat) kanggo menehi bobot sastra jinis huruf, padha karo kutipan ing tata letak majalah. Fungsine minangka aksen sistemik tinimbang hirarki paralel.
Interval lan wujud
| Tujuan | Tegese |
|---|---|
| Kapadhetan | rata-rata |
| Langkah dhasar | 8px |
| Radius tombol | 8px |
| Radius kertu | 12px |
| Bayangan | ora ana wates tinimbang bayangan |
| Antarane bagean | 80px |
| Ambane kaca | 1440px |
AI bakal mbangun situs web sampeyan nganggo gaya Notion lan ngisi situs kasebut
- Isi nganggo produk lan kiriman liwat pranala - Instagram, TikTok, Facebook.
- Transfer konten saka situs lawasmu—cukup sebutna alamate.
- Desain modern nganggo mesin paling apik: React ( Next.js) nganggo rendering server lan optimasi SEO sing wis ana.
- Optimasi SEO otomatis kanggo asil panelusuran lan rekomendasi jaringan saraf.
Gaya sing padha
- ElevenLabs — Esai foto nganggo warna krem anget kanthi judhul sing alus. Buku cathetan gaya Bauhaus—kertas warna kulit endhog, tinta ireng, lan aksen ungu lan oranye siji kanggo tampilan produk.
- Awesomic — Jaring seng editorial nganggo tandha wacan oranye sing ngelingake konfeti
- Monad — jurnal teknis editorial babagan perkamen anget
- Dub — Panel kontrol kertas beras matte Link
- Seline Analytics — Tabel analitis sing sepi ing kertas anget
- Anthropic — Jurnal lapangan ilmiah babagan vellum anget—permukaan gading sing tenang, judhul editorial serif, lan aksen lempung tunggal sing mung katon nalika ana tindakan sing dibutuhake.
- Calendly — Tinta biru peteng ing marmer adhem
- Augen Pro — Presentasi putih Apple nduweni warna biru elektrik sing klinis, entheng minangka aksen tunggal ing ruang monokrom.
- Antimetal — Kronik editorial ing kertas krem—esuk sing sepi ing jurnal ilmiah, ing ngendi pengekangan nuduhake rasa percaya diri lan serif nindakake tugas sing abot
- Perk — Jeruk nipis listrik ing kertas roti anget
- Ditto — Lokakarya sing kebak cahya srengenge nggawe conto kembang liar. Permukaan krem sing anget, warna dasar kuning sing cerah, tinta biru laut sing jero, wujud warna organik sing mekar ing mburi karya kasebut.
- Officevibe — Majalah editorial ing kertas warna krem sing anget. Bayangna esai sing dipikir kanthi tliti babagan manajemen SDM, sing ditampilake minangka produk—font serif kursif sing muni liwat antarmuka biru modern.