Substack
tinta oranye di atas meja di ruang redaksi
Substack tampak seperti dasbor ruang redaksi yang sudah usang—kanvas putih, teks hangat yang hampir hitam, dan aksen oranye terang tunggal yang menandai setiap tahap pembuatan konten. Hierarki visual dibangun berdasarkan kepadatan daripada dekorasi: garis abu-abu tipis memisahkan elemen feed, avatar berukuran kecil, metadata diredam, dan mata pembaca dilatih untuk fokus pada ajakan bertindak berwarna oranye, logo oranye, tautan "Berlangganan" berwarna oranye, dan tombol "Buat" berwarna oranye. Permukaan dijaga tetap rata dan tidak dibatasi—tidak ada bayangan kartu, tidak ada elemen panel krom—membiarkan tipografi (elemen UI sistem krom yang ringkas dipasangkan dengan font judul serif khusus) menanggung sebagian besar bobot editorial. Gaya khasnya adalah elemen krom yang terkendali dan semburan warna tunggal yang cerah: aplikasi membaca yang terasa seperti alat penerbitan.
Tata letak desktop tiga kolom: sidebar kiri tetap (~200px, navigasi dengan ikon dan label, tetap), feed tengah (lebar maksimal ~600px, daftar posting yang dapat digulir secara vertikal), dan sidebar kanan tetap (~300px, pencarian + rekomendasi + pendaftaran). Feed tengah adalah inti editorial—tanpa kartu, hanya posting yang ditumpuk satu di atas yang lain dengan pembatas tipis dan jarak 32px antar bagian. Banner utama berada di bagian atas feed sebagai kartu tunggal selebar penuh. Sidebar kiri berisi logo merek (tanda oranye dengan garis yang tumpang tindih), enam item navigasi, dan tombol "Buat" oranye selebar penuh di bagian bawah. Sidebar kanan berisi kolom pencarian, kartu pendaftaran, dan daftar "Selanjutnya" untuk dibaca. Navigasi minimal—tanpa bilah atas, tanpa breadcrumbs; sidebar ADALAH navigasi. Kepadatan konten tinggi: postingan menggunakan metadata 12-13px dan teks isi 15-19px, menciptakan ritme seperti koran daripada nuansa grid kartu di marketplace.
Foto-foto merupakan konten yang dibuat pengguna (avatar penulis, thumbnail postingan, gambar postingan)—Substack tidak menyediakan foto dekoratif sendiri. Kartu utama menggunakan gradien biru kehijauan hingga hijau dengan elemen ilustrasi abstrak (bentuk geometris, objek bergaya seperti pena dan catatan) sebagai latar belakang. Thumbnail postingan di sidebar kanan berukuran kecil (64px), dikelilingi radius 8px, dan berfungsi sebagai pratinjau daftar bacaan. Bahasa visual secara keseluruhan berbasis teks: antarmuka adalah kanvas bacaan, dan gambar berfungsi sebagai penanda visual kecil daripada menciptakan suasana.
Palet
Merek
- Signal Orange
#ff6719— Warna oranye digunakan sebagai aksen sekunder untuk detail dekoratif dan untuk menyoroti isyarat yang jarang muncul. Warna ini tidak boleh digunakan sebagai warna utama untuk ajakan bertindak.
Netral
- Ink
#363737— Teks isi—teks utama, subjudul, judul postingan, cap waktu, dan nama penulis; warna hangat, hampir hitam, bukan warna #000 murni agar lebih mudah dibaca. - Paper
#ffffff— Kanvas halaman, permukaan kartu, kolom input, dan latar belakang navigasi adalah permukaan dominan yang menempati sebagian besar antarmuka. - Charcoal
#232525— Tampilan saat kursor diarahkan ke teks tambahan dan tautan dengan tingkat seleksi tinggi; lebih dalam dari mode Tinta untuk blok kode dan blok seleksi. - Stone
#777777— Warna netral didukung untuk elemen UI sekunder, pembatas, dan label yang redup. Warna ini tidak boleh digunakan sebagai warna utama untuk ajakan bertindak (call to action). - Ash
#b6b6b6— Garis tepi tipis, garis luar tombol, garis luar ikon, batas pada kontrol yang dinonaktifkan. - Mist
#c8c8c8— Garis pemisah, latar belakang yang tidak mencolok untuk ikon, mengisi sel kosong dalam bentuk kerangka.
Tipografi
dari 12 hingga 32px · 5 langkah
- system-ui — penggantian: -apple-system · garis besar 400, 500, 600 · Font utama untuk antarmuka pengguna dan teks isi digunakan untuk label navigasi, tombol, teks pesan, metadata, kolom input, dan semua elemen antarmuka. Ukuran kompak 12-13px untuk metadata dan 15-19px untuk teks isi menciptakan kesan umpan berita yang padat. Bobotnya adalah 400 untuk teks isi, 500 untuk elemen navigasi dan label tombol, dan 600 untuk judul pesan yang disorot dan judul bagian.
- Cahuenga — penggantian: Charter · garis besar 500 · Font serif dekoratif khas untuk judul tingkat produk (judul sidebar, judul kartu registrasi, teks utama). Bobot sedang dan tinggi baris yang sedikit memberikan tampilan yang elegan tanpa terasa tebal; ini adalah satu-satunya font yang, selain warna oranye, menandakan identitas Substack.
- Spectral — penggantian: Charter · garis besar 400 · Font serif untuk postingan panjang—digunakan di ruang baca dan dalam konten umpan berita untuk meningkatkan keterbacaan materi editorial. Jarak antar baris yang sedikit lebih rapat (1,20) memastikan pembacaan paragraf yang nyaman sambil mempertahankan kekompakan yang khas di ruang redaksi.
Interval dan bentuk
| Tujuan | Arti |
|---|---|
| Kepadatan | padat |
| Langkah dasar | 8px |
| Radius tombol | 9999px |
| Radius kartu | 12px |
| Bayangan | tidak - batas, bukan bayangan |
| Di antara bagian-bagiannya | 32px |
| Lebar halaman | 1200px |
AI akan membangun situs web Anda dengan gaya Substack 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.
- Notion — Sebuah buku catatan kertas hangat di bawah terik matahari siang.
- 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.