Substack
dakwat oren di atas meja di pejabat editorial
Substack kelihatan seperti papan pemuka bilik berita yang usang—kanvas putih, teks yang hangat, hampir hitam, dan satu aksen oren terang menandakan setiap peringkat penciptaan kandungan. Hierarki visual dibina berdasarkan ketumpatan dan bukannya hiasan: garisan kelabu nipis memisahkan elemen suapan, avatar kecil, metadata diredamkan, dan mata pembaca dilatih untuk menumpukan pada seruan bertindak oren, logo oren, pautan "Langgan" oren dan butang "Buat" oren. Permukaan dikekalkan rata dan tidak terhad—tiada bayang kad, tiada elemen panel krom—membiarkan tipografi (elemen UI sistem krom padat yang dipasangkan dengan fon tajuk utama serif tersuai) menanggung beban editorial. Gaya khasnya ialah elemen krom yang terkawal dan sentuhan warna tunggal yang bertenaga: aplikasi bacaan yang terasa seperti alat penerbitan.
Susun atur desktop tiga lajur: bar sisi kiri tetap (~200px, navigasi dengan ikon dan label, melekit), suapan tengah (lebar maksimum ~600px, senarai siaran yang ditatal secara menegak), dan bar sisi kanan tetap (~300px, carian + cadangan + pendaftaran). Suapan tengah ialah teras editorial—tiada kad, hanya siaran yang disusun di atas satu sama lain dengan pembahagi nipis dan jurang 32px antara bahagian. Sepanduk utama terletak di bahagian atas suapan sebagai kad lebar penuh tunggal. Bar sisi kiri mengandungi logo jenama (tanda oren dengan garisan bertindih), enam item navigasi dan butang "Cipta" oren lebar penuh di bahagian bawah. Bar sisi kanan mengandungi medan carian, kad pendaftaran dan senarai "Seterusnya" untuk bacaan. Navigasi adalah minimum—tiada bar atas, tiada serbuk roti; bar sisi IALAH navigasi. Ketumpatan kandungan adalah tinggi: siaran menggunakan metadata 12-13px dan teks badan 15-19px, mewujudkan irama seperti akhbar dan bukannya rasa grid kad pasaran.
Foto ialah kandungan yang dijana pengguna (avatar pengarang, lakaran kecil catatan, imej catatan)—Substack tidak menyediakan foto hiasannya sendiri. Kad utama menggunakan kecerunan firus hingga hijau dengan elemen ilustrasi abstrak (bentuk geometri, objek bergaya seperti pen dan nota) sebagai latar belakang. Lakaran kecil catatan di bar sisi kanan adalah kecil (64px), dikelilingi dalam jejari 8px dan berfungsi sebagai pratonton senarai bacaan. Bahasa visual keseluruhan adalah berasaskan teks: antara muka ialah kanvas bacaan dan imej berfungsi sebagai sauh visual kecil dan bukannya mewujudkan suasana.
Palet
Jenama
- Signal Orange
#ff6719— Warna oren digunakan sebagai aksen sekunder untuk perincian hiasan dan untuk menonjolkan isyarat yang jarang berlaku. Ia tidak boleh digunakan sebagai warna utama untuk seruan bertindak.
Neutral
- Ink
#363737— Teks isi—teks utama, tajuk, tajuk catatan, cap waktu dan nama pengarang; warna yang hangat, hampir hitam dan bukannya #000 tulen untuk bacaan yang lebih mudah. - Paper
#ffffff— Kanvas halaman, permukaan kad, medan input dan latar belakang navigasi merupakan permukaan dominan yang menempati sebahagian besar antara muka. - Charcoal
#232525— Tuding pada keadaan untuk teks dan pautan tambahan dengan tahap pemilihan yang tinggi; lebih dalam daripada mod Dakwat untuk blok kod dan blok pemilihan. - Stone
#777777— Warna neutral disokong untuk elemen UI sekunder, pembahagi dan label yang disenyapkan. Ia tidak boleh digunakan sebagai warna utama untuk seruan bertindak. - Ash
#b6b6b6— Garisan sempadan nipis, garisan butang, garisan ikon, sempadan pada kawalan yang dilumpuhkan. - Mist
#c8c8c8— Garisan pembahagi, latar belakang yang tidak mengganggu untuk ikon, mengisi sel kosong dalam bentuk rangka.
Tipografi
dari 12 hingga 32px · 5 langkah
- system-ui — penggantian: -apple-system · garis besar 400, 500, 600 · Fon utama untuk antara muka pengguna dan teks isi digunakan untuk label navigasi, butang, teks mesej, metadata, medan input dan semua elemen antara muka. Saiz padat 12-13px untuk metadata dan 15-19px untuk teks isi mewujudkan rasa suapan berita yang padat. Beratnya ialah 400 untuk teks isi, 500 untuk elemen navigasi dan label butang dan 600 untuk tajuk mesej dan tajuk bahagian yang diserlahkan.
- Cahuenga — penggantian: Charter · garis besar 500 · Fon serif hiasan khas untuk tajuk peringkat produk (tajuk bar sisi, tajuk kad pendaftaran, teks utama). Beratnya yang sederhana dan ketinggian garisan yang sedikit memberikannya penampilan yang tersendiri tanpa terasa besar; ia satu-satunya fon yang, selain warna oren, menandakan identiti Substack.
- Spectral — penggantian: Charter · garis besar 400 · Fon serif untuk catatan panjang—digunakan di bilik bacaan dan dalam kandungan suapan berita untuk meningkatkan kebolehbacaan bahan editorial. Jarak baris yang sedikit lebih ketat (1.20) memastikan bacaan perenggan yang selesa sambil mengekalkan kekompakan tipikal bilik berita.
Selang dan bentuk
| Tujuan | Maksudnya |
|---|---|
| Ketumpatan | padat |
| Langkah asas | 8px |
| Jejari butang | 9999px |
| Jejari kad | 12px |
| Bayang-bayang | tiada - sempadan dan bukannya bayang-bayang |
| Antara bahagian | 32px |
| Lebar halaman | 1200px |
AI akan membina laman web anda dalam gaya Substack 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
- Notion — Buku nota kertas yang hangat di bawah sinaran matahari tengah hari
- 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.