Notion
Sebuah buku catatan kertas hangat di bawah terik matahari siang.
Antarmuka Notion tampak seperti buku catatan kertas kesayangan di siang hari bolong: kanvas hangat dan lembut (#f6f5f4) yang terasa taktil dan tidak steril, tipografi sans-serif yang mewah memberikan bobot editorial pada teks produk, dan warna digunakan sebagai tanda baca yang jarang—"pil" berwarna peach menyoroti kata kerja, satu warna biru menjadi penanda aksi utama, dan serangkaian warna aksen yang berputar (coral, amber, sky, midnight) mewarnai latar belakang kartu seperti stiker. Kartu-kartu disusun pada kanvas dengan batas dan sudut tipis—tanpa bayangan, tanpa krom—seperti bagian bergaris pada buku catatan Moleskine. Animasinya menyenangkan dan lentur, dengan transisi halus pada 200ms dan animasi karakter yang lentur yang menghidupkan antarmuka tanpa menjadi dekoratif.
Dengan posisi tengah, lebar maksimum dibatasi hingga sekitar 1440px. Elemen utama adalah susunan terpusat: deretan simbol → judul besar dua baris dengan pil berwarna yang disematkan → subjudul → deretan dengan dua tombol ajakan bertindak → maket UI produk yang besar. Di bawah elemen utama, bagian-bagiannya bergantian antara kisi-kisi kartu putih dan panel aksen berwarna penuh. Dinding logo adalah kisi-kisi satu baris terpusat berisi logo mitra dalam skala abu-abu. Blok fitur menggunakan tata letak dua kolom (teks di sebelah kiri, panel berwarna di sebelah kanan), bergantian dari kiri ke kanan antar bagian. Bagian "Tanyakan kepada asisten Anda sesuai permintaan" menggunakan kisi-kisi kartu 2x2, di mana kartu teratas menempati lebar penuh, dan baris bawah dibagi menjadi dua kolom yang sama. Jarak antar bagian cukup lebar (~80px), menciptakan ritme vertikal yang tenang. Navigasi adalah bilah atas tetap setinggi 64px dengan elemen navigasi terpusat dan tombol aksi yang sejajar kanan.
Ilustrasi sangat penting, tanpa foto. Bahasa visual dibangun di atas simbol ilustrasi datar (tepi bulat dalam lingkaran berwarna 2px), elemen dekoratif abstrak (garis bergelombang yang digambar tangan, glitter, panah, bentuk bunga), dan maket antarmuka pengguna produk. Simbol-simbol tersebut muncul di jendela utama sebagai baris horizontal berisi tujuh avatar dan tersebar di seluruh halaman sebagai tanda baca yang menyenangkan. Tangkapan layar produk adalah satu-satunya elemen visual "nyata": tangkapan layar tersebut menunjukkan antarmuka Notion yang sebenarnya (papan Kanban, tampilan dokumen, panel agen AI) dengan serangkaian elemen lengkap dan data nyata. Maket produk di jendela utama berukuran besar, berada di tengah, dan memiliki bayangan tunggal yang memisahkannya dari kanvas. Tidak ada foto gaya hidup, tidak ada gambar stok, tidak ada render 3D abstrak.
Palet
Merek
- Notion Blue
#0075de— Elemen utama yang mengisi tombol ajakan bertindak (call-to-action/CTA), sebuah aksen dalam navigasi aktif, tombol aksi yang terisi penuh adalah satu-satunya skema warna dalam sistem yang hampir monokromatik yang cukup jenuh untuk dapat dianggap sebagai saklar.
Netral
- Paper Warmth
#f6f5f4— Kanvas halaman, latar belakang jendela utama, dan latar belakang bagian semuanya berwarna hangat, sedikit krem, yang memberikan sistem nuansa taktil dan analog. - Pure White
#ffffff— Permukaan kartu, panel timbul, latar belakang logo, teks kontras pada kartu berwarna gelap. - Ink Black
#000000— Teks utama, tautan navigasi, judul - digunakan dengan tingkat transparansi yang berbeda (100%, 95%, 90%, 60%, 40%, 20%) untuk membangun hierarki tanpa menambahkan warna baru. - Charcoal
#111111— Opsi teks gelap untuk area UI di mana warna hitam murni akan terlihat terlalu mencolok. - Stone
#757575— Teks navigasi sekunder, teks bantuan yang diredam, label tombol yang dinonaktifkan - alpha tinta 60%. - Graphite
#615d59— Teks utama memiliki nada hangat - abu-abu kecoklatan, yang selaras dengan latar belakang yang hangat.
Tipografi
dari 12 hingga 96px · 10 langkah
- NotionInter — penggantian: Inter · garis besar 400, 500, 600, 700 · Font sans-serif utama adalah font humanis geometris dengan nuansa halus, digunakan pada ukuran 400 untuk teks isi, 500 untuk navigasi/antarmuka pengguna, dan 600-700 untuk judul. Skala font menggunakan spasi antar huruf negatif yang agresif pada ukuran yang lebih besar (-4,6px pada 96px, -2px pada 72px), yang membuat judul terasa lebih padat dan percaya diri, bukan lapang.
- Lyon Text — penggantian: Source Serif Pro · garis besar 400 · Font serif editorial, yang dikhususkan untuk bagian-bagian individual dari teks utama dan pengantar bagian, digunakan secara hemat (empat kali) untuk memberikan bobot sastra pada jenis huruf, mirip dengan kutipan dalam tata letak majalah. Font ini berfungsi sebagai aksen sistemik daripada hierarki paralel.
Interval dan bentuk
| Tujuan | Arti |
|---|---|
| Kepadatan | rata-rata |
| Langkah dasar | 8px |
| Radius tombol | 8px |
| Radius kartu | 12px |
| Bayangan | tidak - batas, bukan bayangan |
| Di antara bagian-bagiannya | 80px |
| Lebar halaman | 1440px |
AI akan membangun situs web Anda dengan gaya Notion dan mengisinya.
- Isi dengan produk dan postingan melalui tautan - Instagram, TikTok, Facebook.
- Pindahkan konten dari situs lama Anda—cukup tentukan alamatnya.
- Desain modern pada mesin terbaik: React ( Next.js) dengan rendering sisi server dan optimasi SEO langsung dari awal.
- Optimasi SEO otomatis sepenuhnya untuk hasil pencarian dan rekomendasi jaringan saraf.
Gaya serupa
- ElevenLabs — Esai foto dalam nuansa krem hangat dengan judul yang halus. Sebuah buku catatan bergaya Bauhaus—kertas berwarna putih telur, tinta hitam, dan aksen ungu dan oranye tunggal untuk tampilan produk.
- Awesomic — Jaring seng editorial dengan tanda baca oranye yang mengingatkan pada confetti.
- Monad — jurnal teknis editorial tentang perkamen hangat
- Dub — Panel kontrol kertas beras matte milik Link
- Seline Analytics — Sebuah tabel analitis yang tenang di atas kertas hangat.
- Anthropic — Jurnal ilmiah lapangan di atas kertas vellum hangat—permukaan gading yang tenang, judul editorial berserif, dan aksen tanah liat tunggal yang hanya muncul ketika diperlukan tindakan.
- Calendly — Tinta biru tua di atas marmer dingin
- Augen Pro — Presentasi serba putih Apple menampilkan warna biru elektrik yang klinis dan ringan sebagai satu-satunya aksen di ruang monokrom.
- Antimetal — Sebuah catatan editorial di atas kertas krem—pagi yang tenang di sebuah jurnal ilmiah, di mana sikap menahan diri menyampaikan kepercayaan diri dan huruf serif melakukan tugas berat.
- Perk — Kapur elektrik di atas kertas perkamen hangat
- Ditto — Sebuah bengkel yang diterangi sinar matahari sedang membuat sampel bunga liar. Permukaan krem yang hangat, warna dasar kuning yang cerah, tinta biru tua yang pekat, bentuk warna organik yang bermekaran di belakang karya tersebut.
- Officevibe — Sebuah majalah editorial dengan kertas berwarna krem hangat. Bayangkan sebuah esai mendalam tentang manajemen SDM, yang disajikan sebagai sebuah produk—font serif kursif yang berbisik melalui antarmuka biru modern.