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
- 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
- Augen Pro — Presentasi bodas Apple nampilkeun warna biru listrik anu klinis, hampang, salaku hiji-hijina aksen dina rohangan monokrom.
- Antimetal — Kronik éditorial dina kertas krem—isuk anu sepi di jurnal ilmiah, dimana kateguhan nunjukkeun kapercayaan diri sareng serif ngalakukeun padamelan anu beurat
- Perk — Jeruk nipis dina kertas roti haneut
- Ditto — Bengkel anu disinari ku panonpoé pikeun nyieun conto kembang liar. Beungeut krim anu haneut, warna dasar konéng anu cerah, tinta biru laut anu jero, warna organik anu mekar di tukangeun karya seni.
- Officevibe — Majalah éditorial dina kertas warna krem haneut. Bayangkeun hiji éséy anu dipikirkeun kalawan saksama ngeunaan manajemen SDM, anu dipidangkeun salaku produk—huruf serif kursif anu ngaharéwos ngaliwatan antarmuka biru modéren.