Notion
Buku catetan kertas anu haneut dina panonpoé tengah poé
Antarbeungeut Notion siga buku catetan kertas anu dipikacinta dina siang bolong: kanvas anu haneut sareng creamy (#f6f5f4) anu karasa taktil tinimbang steril, tipografi sans-serif anu lega masihan beurat éditorial kana salinan produk, sareng warna anu dianggo salaku tanda baca anu jarang — "pil" peach nyorot kecap pagawéan, hiji biru jangkar tindakan utama, sareng susunan warna aksen anu muter (karang, ambar, langit, tengah wengi) ngawarnaan latar tukang kartu sapertos stiker. Kartu disusun dina kanvas kalayan wates sareng juru anu ipis — teu aya kalangkang, teu aya krom — sapertos bagian anu digaris tina buku catetan Moleskine. Animasi pikaresepeun sareng pegas, kalayan transisi anu mulus dina 200ms sareng animasi karakter pegas anu ngahirupkeun antarmuka tanpa janten hiasan.
Di tengah, lébar maksimumna diwatesan sakitar 1440px. Unsur utama nyaéta tumpukan di tengah: sajajar simbol → judul dua baris ageung kalayan pil warna anu dipasang → subjudul → sajajar kalayan dua tombol ajakan-aksi → mockup UI produk ageung. Di handap unsur utama, bagian-bagian silih genti antara grid kartu bodas sareng panel aksen warna pinuh. Tembok logo mangrupikeun grid hiji baris di tengah tina logo mitra dina skala abu-abu. Blok fitur nganggo tata letak dua kolom (téks di kénca, panel warna di katuhu), silih genti ti kénca ka katuhu antara bagian. Bagian "Tanya ka asistén anjeun upami diperyogikeun" nganggo grid kartu 2x2, dimana kartu luhur ngeusian lébar pinuh, sareng baris handap dibagi kana dua kolom anu sami. Talang antara bagian lega (~80px), nyiptakeun wirahma vertikal anu tenang. Navigasi mangrupikeun bilah luhur anu tetep jangkungna 64px kalayan unsur navigasi di tengah sareng tombol aksi anu rata di katuhu.
Ilustrasi téh penting pisan, teu aya poto. Basa visualna diwangun ku simbol datar anu diilustrasikeun (ujung buleud dina bunderan warna 2px), unsur hiasan abstrak (coretan leungeun, glitter, panah, bentuk kembang), sareng mockup antarmuka pangguna produk. Simbol-simbol éta némbongan dina jandela utama salaku jajar horizontal tujuh avatar sareng sumebar di sakuliah halaman salaku tanda baca anu pikaresepeun. Cuplikan layar produk mangrupikeun hiji-hijina unsur visual "nyata": éta nunjukkeun antarmuka Notion anu saleresna (papan Kanban, tampilan dokumén, panel agén AI) kalayan sakumpulan unsur lengkep sareng data nyata. Mockup produk dina jandela utama ageung, di tengah, sareng ngalungkeun hiji kalangkang anu misahkeunana tina kanvas. Teu aya poto gaya hirup, teu aya gambar stok, teu aya render 3D abstrak.
Palet
Merek
- Notion Blue
#0075de— Unsur utama anu ngeusian tombol ajakan-ka-aksi (CTA), aksen dina navigasi aktif, tombol aksi anu dieusi mangrupikeun hiji-hijina skéma warna dina sistem anu ampir monokrom anu cukup jenuh pikeun dianggap salaku saklar.
Nétral
- Paper Warmth
#f6f5f4— Kanvas halaman, latar tukang jandela utama, sareng latar tukang bagian sadayana nganggo warna haneut, rada beige anu masihan sistem rasa analog anu taktil. - Pure White
#ffffff— Beungeut kartu, panel anu ditinggikeun, latar tukang logo, téks kontras dina kartu poék. - Ink Black
#000000— Téks utama, tautan navigasi, judul - dianggo kalayan transparansi anu béda (100%, 95%, 90%, 60%, 40%, 20%) pikeun ngawangun hirarki tanpa nambihan warna anyar. - Charcoal
#111111— Pilihan téks poék pikeun area UI dimana hideung polos bakal katingali kasar teuing. - Stone
#757575— Téks navigasi sekundér, téks bantu anu diredam, labél tombol ditumpurkeun - 60% tinta alfa - Graphite
#615d59— Téks utama miboga nada haneut - kulawu semu coklat, anu saluyu sareng latar anu haneut.
Tipografi
ti 12 nepi ka 96px · 10 léngkah
- NotionInter — panggantian: Inter · garis besar 400, 500, 600, 700 · Hurup sans-serif utama nyaéta humanis géométri kalayan nuansa anu samar, dianggo dina ukuran 400 pikeun téks awak, 500 pikeun navigasi/antarmuka pangguna, sareng 600-700 pikeun judul. Skala font nganggo jarak hurup négatif anu agrésif dina ukuran anu langkung ageung (-4.6px dina 96px, -2px dina 72px), anu ngajantenkeun judul karasa langkung kompak sareng percaya diri, tinimbang lega.
- Lyon Text — panggantian: Source Serif Pro · garis besar 400 · Font serif éditorial, anu dikhususkeun pikeun bagian individu tina téks utama sareng bubuka bagian, dianggo sacara hemat (opat kali) pikeun masihan beurat sastra tipe aksara, sami sareng kutipan dina tata letak majalah. Fungsina salaku aksen sistemik tinimbang hirarki paralel.
Interval sareng bentuk
| Tujuan | Hartina |
|---|---|
| Kapadetan | rata-rata |
| Léngkah dasar | 8px |
| Radius tombol | 8px |
| Radius kartu | 12px |
| Kalangkang | euweuh - wates tinimbang kalangkang |
| Antara bagian | 80px |
| Lebar kaca | 1440px |
AI bakal ngawangun situs wéb anjeun dina gaya Notion sareng ngeusianana
- Eusian ku produk sareng postingan ngalangkungan tautan - Instagram, TikTok, Facebook.
- Mindahkeun eusi tina situs lami anjeun—cukup sebutkeun alamatna.
- Desain modéren dina mesin pangsaéna: React ( Next.js) kalayan rendering server sareng optimasi SEO anu tos siap dianggo.
- Optimasi SEO otomatis pinuh pikeun hasil pamilarian sareng rekomendasi jaringan saraf.
Gaya anu sami
- Mollie — Meja kasmir, buku besar poék. Tinggalkeun rohangan bodas anu lega pikeun desain éditorial di sabudeureun téks hideung, teras kuatkeun poin anu aya hubunganana sareng produk ku krim haneut, coklat espresso, sareng poto taktil tina metode pamayaran anu saleresna.
- Kagi — Rohangan maca anu misah. Jieun rohangan bodas anu kabuka di sabudeureun téks grafit anu kandel, nganggo aksen wungu anu lemes sareng permukaan pastel anu haneut pikeun ngarobih katengtreman.
- Milanote — Milanote nyaéta studio kréatif anu khusus. Jieun halaman gaya galeri éditorial nganggo papan visual anu ngambang: témbok pigura poék, rohangan tampilan bodas, sareng cuplikan layar anu katingalina sapertos objék nyata kalayan jerona anu lemes.
- Co2 — Atlas iklim dina cahaya usum tiris. Jieun kaca kawas lanskap dokumén udara, dimana judul serif, data kode kategori, sareng gambar és nyorot margin bodas anu lega.
- GitButler — Warna biru toska di ahir téks. Kombinasi judul serif kontras tinggi kalayan kisi-kisi téknis anu halus, permukaan grafit anu haneut, sareng aksen biru toska anu teu katingali.
- ElevenLabs — Esai poto dina warna krim haneut kalayan judul anu lemes. Buku catetan gaya Bauhaus—kertas warna cangkang endog, tinta hideung, sareng hiji aksen wungu sareng oranyeu pikeun tampilan produk.
- Awesomic — Jaring séng éditorial kalayan tanda baca oranyeu anu ngingetkeun kana konféti
- Monad — jurnal téknis éditorial ngeunaan perkamen haneut
- Dub — Panel kontrol kertas béas matte Link
- Seline Analytics — Méja analitik anu sepi dina kertas haneut
- Anthropic — Jurnal lapangan ilmiah ngeunaan vellum haneut—permukaan gading anu tenang, judul éditorial serif, sareng aksen liat tunggal anu ngan ukur muncul nalika aya tindakan anu diperyogikeun.
- Calendly — Tinta biru poék dina marmer tiis