Notion
Buku nota kertas yang hangat di bawah sinaran matahari tengah hari
Antara muka Notion kelihatan seperti buku nota kertas kesayangan di siang hari bolong: kanvas yang hangat dan berkrim (#f6f5f4) yang terasa sentuhan dan bukannya steril, tipografi sans-serif yang luas memberikan pemberat editorial kepada salinan produk, dan warna yang digunakan sebagai tanda baca yang jarang—"pil" pic menonjolkan kata kerja, satu warna biru menambat tindakan utama, dan susunan rona aksen berputar (karang, ambar, langit, tengah malam) mewarnai latar belakang kad seperti pelekat. Kad disusun di atas kanvas dengan sempadan dan sudut nipis—tiada bayang, tiada krom—seperti bahagian bergaris buku nota Moleskine. Animasinya ceria dan segar, dengan peralihan lancar pada 200ms dan animasi watak segar yang menghidupkan antara muka tanpa hiasan.
Di tengah, lebar maksimum dihadkan kepada kira-kira 1440px. Elemen utama ialah tindanan tengah: deretan simbol → tajuk utama dua baris besar dengan pil berwarna terbenam → subtajuk → baris dengan dua butang seruan bertindak → mockup UI produk yang besar. Di bawah elemen utama, bahagian berselang-seli antara grid kad putih dan panel aksen berwarna penuh. Dinding logo ialah grid baris tunggal tengah logo rakan kongsi dalam skala kelabu. Blok ciri menggunakan susun atur dua lajur (teks di sebelah kiri, panel berwarna di sebelah kanan), berselang-seli dari kiri ke kanan antara bahagian. Bahagian "Tanya pembantu anda atas permintaan" menggunakan grid kad 2x2, di mana kad atas mengambil lebar penuh dan baris bawah dibahagikan kepada dua lajur yang sama. Saluran antara bahagian adalah luas (~80px), mewujudkan irama menegak yang tenang. Navigasi ialah bar atas tetap setinggi 64px dengan elemen navigasi tengah dan butang tindakan sejajar kanan.
Ilustrasi adalah penting, tanpa foto. Bahasa visual dibina pada simbol rata yang digambarkan (tepi bulat dalam bulatan berwarna 2px), elemen hiasan abstrak (coretan tangan, glitter, anak panah, bentuk bunga), dan mockup antara muka pengguna produk. Simbol-simbol tersebut muncul dalam tetingkap utama sebagai baris mendatar tujuh avatar dan tersebar di seluruh halaman sebagai tanda baca yang ceria. Tangkapan skrin produk adalah satu-satunya elemen visual "sebenar": ia menunjukkan antara muka Notion sebenar (papan Kanban, paparan dokumen, panel ejen AI) dengan set lengkap elemen dan data sebenar. Mockup produk dalam tetingkap utama adalah besar, berpusat, dan menghasilkan satu bayang yang memisahkannya daripada kanvas. Tiada foto gaya hidup, tiada imej stok, tiada pemaparan 3D abstrak.
Palet
Jenama
- Notion Blue
#0075de— Elemen utama yang mengisi butang ajakan bertindak (CTA), aksen dalam navigasi aktif, butang tindakan yang diisi adalah satu-satunya skema warna dalam sistem hampir monokrom yang cukup tepu untuk dilihat sebagai suis.
Neutral
- Paper Warmth
#f6f5f4— Kanvas halaman, latar belakang tetingkap utama dan latar belakang bahagian semuanya berwarna-warni hangat dan sedikit kuning air yang memberikan sistem rasa analog yang boleh disentuh. - Pure White
#ffffff— Permukaan kad, panel timbul, latar belakang logo, teks berbeza pada kad gelap. - Ink Black
#000000— Teks utama, pautan navigasi, tajuk - digunakan dengan ketelusan yang berbeza (100%, 95%, 90%, 60%, 40%, 20%) untuk membina hierarki tanpa menambah warna baharu. - Charcoal
#111111— Pilihan teks gelap untuk kawasan UI di mana warna hitam tulen akan kelihatan terlalu kasar. - Stone
#757575— Teks navigasi sekunder, teks pembantu disenyapkan, label butang dinyahdayakan - 60% dakwat alfa - Graphite
#615d59— Teks utama mempunyai nada hangat - kelabu keperangan, yang selaras dengan latar belakang yang hangat.
Tipografi
dari 12 hingga 96px · 10 langkah
- NotionInter — penggantian: Inter · garis besar 400, 500, 600, 700 · Fon sans-serif utama ialah humanis geometri dengan nuansa halus, digunakan pada saiz 400 untuk teks isi, 500 untuk navigasi/antara muka pengguna dan 600-700 untuk tajuk. Skala fon menggunakan jarak huruf negatif yang agresif pada saiz yang lebih besar (-4.6px pada 96px, -2px pada 72px), yang menjadikan tajuk terasa lebih padat dan yakin, bukannya lapang.
- Lyon Text — penggantian: Source Serif Pro · garis besar 400 · Fon serif editorial, yang dikhaskan untuk bahagian individu teks utama dan pengenalan bahagian, digunakan secara sederhana (empat kali) untuk memberikan pemberat sastera kepada jenis huruf, serupa dengan petikan dalam susun atur majalah. Ia berfungsi sebagai aksen sistemik dan bukannya hierarki selari.
Selang dan bentuk
| Tujuan | Maksudnya |
|---|---|
| Ketumpatan | purata |
| Langkah asas | 8px |
| Jejari butang | 8px |
| Jejari kad | 12px |
| Bayang-bayang | tiada - sempadan dan bukannya bayang-bayang |
| Antara bahagian | 80px |
| Lebar halaman | 1440px |
AI akan membina laman web anda dalam gaya Notion dan mengisinya
- Isi dengan produk dan siaran melalui pautan - Instagram, TikTok, Facebook.
- Pindahkan kandungan dari tapak lama anda—cuma nyatakan alamatnya.
- Reka bentuk moden pada enjin terbaik: React ( Next.js) dengan pemaparan pelayan dan pengoptimuman SEO sedia ada.
- Pengoptimuman SEO automatik sepenuhnya untuk hasil carian dan cadangan rangkaian saraf.
Gaya yang serupa
- ElevenLabs — Esei foto dalam rona krim hangat dengan tajuk utama yang halus. Buku nota gaya Bauhaus—kertas berwarna kulit telur, dakwat hitam dan satu aksen ungu dan oren untuk paparan produk.
- Awesomic — Jaring zink editorial dengan tanda baca oren yang mengingatkan pada konfeti
- Monad — jurnal teknikal editorial mengenai perkamen hangat
- Dub — Panel kawalan kertas beras matte Link
- Seline Analytics — Jadual analitik yang tenang di atas kertas suam
- Anthropic — Jurnal lapangan saintifik mengenai vellum hangat—permukaan gading yang tenang, tajuk editorial serif dan aksen tanah liat tunggal yang hanya muncul apabila tindakan diperlukan.
- Calendly — Dakwat biru tua pada marmar sejuk
- Augen Pro — Pembentangan putih Apple menampilkan warna biru elektrik klinikal, tanpa berat sebagai satu-satunya aksen dalam ruang monokrom.
- Antimetal — Kronik editorial di atas kertas krim—pagi yang tenang di jurnal saintifik, di mana kekangan menyampaikan keyakinan dan serif melakukan tugas yang berat
- Perk — Kapur elektrik di atas kertas parchment yang suam
- Ditto — Sebuah bengkel yang disinari cahaya matahari menghasilkan sampel bunga liar. Permukaan krim hangat, warna asas kuning terang, dakwat biru laut pekat, bentuk warna organik mekar di sebalik karya itu.
- Officevibe — Sebuah majalah editorial di atas kertas berwarna krim suam. Bayangkan sebuah esei yang bernas tentang pengurusan HR, yang dibentangkan sebagai satu produk—fon serif kursif yang berbisik melalui antara muka biru moden.