Superhuman
panel editorial golden hour
Superhuman menjembatani persimpangan antara fotografi editorial dan UI perangkat lunak—kanvas hangat seperti perkamen (tidak pernah putih murni) membingkai elemen branding berwarna merah marun dan aksen ungu yang cerah. Judul, yang diatur dalam font 460, berbisik daripada berteriak, memungkinkan fotografi sinematik halaman penuh untuk melakukan pekerjaan berat, sementara kartu UI produk transparan melayang seperti kaca di atas gambar. Palet warna tetap tenang dan editorial hampir sepanjang waktu: permukaan krem, teks arang, batas abu-abu hangat yang halus, dan jarak yang cukup lebar antar elemen, dengan warna yang dikhususkan untuk penekanan merek yang disengaja—satu ajakan bertindak berwarna merah marun, tautan ungu, tombol tambahan berwarna ungu muda. Sistem ini sengaja menghindari bayangan dan gradien yang kuat pada permukaan UI; kedalaman dicapai melalui fotografi berlapis dan blur latar belakang yang halus pada judul, bukan melalui efek penumpukan.
Elemen utama adalah foto selebar penuh dengan judul yang berpusat (48-64px/460) dan satu ajakan bertindak yang diisi dengan gambar anggur, dengan kartu UI produk transparan mengambang yang ditambahkan di tepi kiri dan kanan. Di bawah elemen utama terdapat strip logo garis putih (6 sel per baris, lebar maksimum terbatas), kemudian bagian tab dengan permukaan kartu putih di atas kanvas kertas. Garis biru kehijauan gelap memecah ritme sekitar dua pertiga halaman—lebar penuh, dua kolom (gambar di kiri, teks di kanan)—menciptakan satu-satunya kontras tonal saat Anda menggulir. Garis atmosfer gradien mengikutinya. Jarak vertikal antar bagian adalah 64-96px. Lebar konten maksimum adalah ~1200px yang berpusat, dengan elemen utama dan garis gelap membentang selebar penuh tampilan. Navigasinya adalah satu header tetap dengan latar belakang buram; tanpa sidebar, tanpa mega menu. Footer adalah halaman merah anggur selebar penuh dengan tata letak tautan multi-kolom. Ritme keseluruhannya adalah: bingkai utama → konten putih/krem yang tenang → garis gelap dengan gambar utama → gradien atmosfer → footer merah anggur, garis terang dan gelap bergantian untuk menciptakan tempo editorial.
Elemen visual utama adalah fotografi sinematik: potret lebar penuh dengan latar langit terbuka berfungsi sebagai titik fokus, dengan garis atmosfer kedua yang diposisikan lebih rendah di halaman. Gambar tersebut memiliki warna hangat, sedikit redup, dan diambil dari samping, mengingatkan pada golden hour, menciptakan nuansa editorial daripada korporat. Garis gelap dengan persegi panjang geometris transparan dan tulisan tangan ditumpangkan di atas foto seorang pria yang sedang melamun—sebuah kolase permukaan daripada gambar tunggal. Antarmuka pengguna disajikan sebagai kartu kaca mengambang yang ditumpangkan langsung pada foto, bukan sebagai tangkapan layar terpisah. Tidak ada ilustrasi stok, tidak ada render 3D, dan tidak ada bentuk dekoratif abstrak, kecuali garis atmosfer gradien. Ikon-ikonnya adalah ikon garis monokrom minimalis, lebar sekitar 16-20px, dengan lebar tunggal yang sesuai dengan bobot teks 460 poin.
Palet
Merek
- Midnight Wine
#421d24— Tombol aksi utama, iklan banner, dan footer menggunakan warna burgundy hangat, hampir hitam, yang lebih mirip tinta daripada merah, menyeimbangkan palet warna tanpa berlebihan. - Royal Violet
#714cb6— Warna ungu digunakan untuk menyoroti tautan, tag, dan frasa pendek. Warna ini tidak boleh digunakan sebagai warna utama untuk ajakan bertindak (call to action).
Netral
- Lilac Mist
#d4c7ff— Pengisian permukaan sekunder, ikon cahaya, dan latar belakang tombol transparan semuanya menampilkan warna ungu lembut yang mengisyaratkan gaya merek tanpa menarik perhatian berlebihan. - Deep Lagoon
#0c4243— Latar belakang gelap untuk komik strip ini, yang digunakan sebagai elemen naratif utama, adalah satu-satunya permukaan gelap dalam sistem tersebut, dikombinasikan dengan pola geometris yang ditambahkan di atasnya. - Warm Parchment
#f2f0eb— Permukaan halaman yang digunakan merupakan elemen dominan; warna krem hangat menggantikan warna putih sebagai dasar, memberikan kehangatan editorial pada keseluruhan sistem. - Soft Mist
#e3e3e2— Garis tepi halus, garis luar kartu, garis pemisah—warna abu-abu muda yang hangat yang menyatu dengan kertas perkamen tetapi dengan jelas mendefinisikan tepiannya. - Ink Charcoal
#292827— Teks isi, judul, garis luar ikon - warna hangat, hampir hitam dengan cukup cokelat agar terasa seperti tinta di atas kertas, tidak pernah dingin #000 - Stone Gray
#666666— Teks isi sekunder, teks pendukung, deskripsi yang tidak mencolok - satu warna abu-abu medium, digunakan secukupnya agar tidak pernah bersaing dengan teks utama.
Tipografi
dari 12 hingga 64px · 8 langkah
- Super Sans VF — penggantian: Inter (closest open equivalent for variable weight range) · garis besar 460, 500, 540, 600, 700 · Hanya satu jenis font yang digunakan di seluruh sistem. Variabel sumbu mencakup rentang dari 460 (font khas yang sedikit dipangkas untuk semua teks judul besar) hingga 540 (teks isi yang ditekankan) dan 700 (keterangan kecil dan tebal). VF yang dirancang khusus membuat judul dengan bobot 460 tampak lebih terencana daripada sembarangan—pada ukuran 48-64px dengan jarak antar huruf yang rapat, efek "sedikit dipangkas" tersebut dirasakan lebih percaya diri daripada tipis.
Interval dan bentuk
| Tujuan | Arti |
|---|---|
| Kepadatan | padat |
| Langkah dasar | 8px |
| Radius tombol | 16px |
| Radius kartu | 16px |
| Bayangan | tidak - batas, bukan bayangan |
| Di antara bagian-bagiannya | 64-96px |
| Lebar halaman | 1200px |
AI akan membangun situs web Anda dengan gaya Superhuman 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
- AI for Business — Ruang pamer editorial bergaya brutalist dengan nuansa abu-abu hangat.
- Jeton — Sebuah editorial tentang fintech di atas marmer hangat.
- Airtable — Seminar yang nyaman dengan bab-bab yang ditandai dengan warna berbeda.
- Osmo — Museum Pengembang di Atas Beton Abu-abu
- Linktr — Poster-poster editorial ditumpuk seperti permen. Situs web dirancang dengan blok warna, dengan judul berwarna hijau terang berlatar dinding biru kobalt, dan elemen navigasi berbentuk pil berwarna putih melayang di atas bidang berwarna merah anggur.
- Outsource Consultants — Lembar arsitektur berformat besar di atas kertas krem. Estetika monografis, di mana satu bercak indigo cerah menyela grid tipografi maksimalis yang hangat.
- Streamtime — Papan Suasana Kreatif Taktil - Meja Scrapbooking Desainer
- Switch-Lit — Kisi-kisi editorial dicetak dengan tinta di atas kertas krem.
- HubSpot — Warna kertas krem hangat dengan aksen oranye tunggal. HubSpot menyerupai majalah desain yang dicetak di atas kertas tebal—judul dengan huruf serif, halaman krem hangat, dan aksen oranye menyala yang menyoroti hanya poin-poin terpenting.
- Granola — Catatan lapangan di atas kertas vellum hangat—Granola terasa seperti buku catatan Moleskine usang yang dibuka di atas meja yang diterangi sinar matahari: judul dengan huruf serif memberikan kesan kokoh, aksen hijau organik seperti tinta nabati, dan garis-garis halus di tepi kartu yang menyerupai catatan tulisan tangan.
- Secure — Percakapan di sebuah kafe Eropa di bawah cahaya lembut adalah tampilan panggilan video yang hangat dan penuh gaya, di mana judul dengan huruf serif terbaca seperti artikel majalah yang berbobot daripada halaman produk teknologi.
- Mockups made easy — Studio desain editorial di atas kertas putih.