Substack

Mực cam trên bàn làm việc trong tòa soạn.

Substack trông giống như một bảng điều khiển tòa soạn quen thuộc – một nền trắng, văn bản ấm áp, gần như đen, và một điểm nhấn màu cam sáng duy nhất đánh dấu từng giai đoạn tạo nội dung. Thứ tự ưu tiên trực quan được xây dựng dựa trên mật độ hơn là trang trí: các đường kẻ xám mỏng phân tách các yếu tố trên bảng tin, ảnh đại diện nhỏ, siêu dữ liệu được làm mờ, và mắt người đọc được hướng đến việc tập trung vào nút kêu gọi hành động màu cam, logo màu cam, liên kết "Đăng ký" màu cam và nút "Tạo" màu cam. Các bề mặt được giữ phẳng và không bị giới hạn – không có bóng đổ thẻ, không có các yếu tố bảng điều khiển mạ crôm – cho phép kiểu chữ (một yếu tố giao diện người dùng hệ thống mạ crôm nhỏ gọn kết hợp với phông chữ tiêu đề serif tùy chỉnh) gánh vác phần lớn trọng lượng biên tập. Phong cách đặc trưng là các yếu tố mạ crôm được tiết chế và các điểm nhấn màu sắc rực rỡ, đơn sắc: một ứng dụng đọc mang lại cảm giác như một công cụ xuất bản.

Giao diện máy tính để bàn ba cột: thanh bên trái cố định (~200px, điều hướng với biểu tượng và nhãn, dính), bảng tin trung tâm (chiều rộng tối đa ~600px, danh sách bài viết cuộn dọc) và thanh bên phải cố định (~300px, tìm kiếm + đề xuất + đăng ký). Bảng tin trung tâm là nội dung biên tập chính—không có thẻ, chỉ có các bài viết được xếp chồng lên nhau với các đường phân cách mỏng và khoảng cách 32px giữa các phần. Banner chính nằm ở đầu bảng tin dưới dạng một thẻ toàn chiều rộng. Thanh bên trái chứa logo thương hiệu (một biểu tượng màu cam với các đường kẻ chồng lên nhau), sáu mục điều hướng và một nút "Tạo" màu cam toàn chiều rộng ở phía dưới. Thanh bên phải chứa một ô tìm kiếm, một thẻ đăng ký và một danh sách "Tiếp theo" để đọc. Điều hướng tối giản—không có thanh trên cùng, không có đường dẫn điều hướng; thanh bên CHÍNH LÀ điều hướng. Mật độ nội dung cao: các bài viết sử dụng siêu dữ liệu 12-13px và văn bản chính 15-19px, tạo ra nhịp điệu giống như báo chí hơn là cảm giác của lưới thẻ trên một chợ trực tuyến.

Ảnh là nội dung do người dùng tạo ra (ảnh đại diện tác giả, ảnh thu nhỏ bài đăng, hình ảnh bài đăng) — Substack không cung cấp ảnh trang trí riêng. Thẻ chính sử dụng hiệu ứng chuyển màu từ xanh ngọc sang xanh lá cây với các yếu tố minh họa trừu tượng (hình học, các vật thể cách điệu như bút và ghi chú) làm nền. Ảnh thu nhỏ bài đăng ở thanh bên phải nhỏ (64px), được bao quanh bởi bán kính 8px và có chức năng xem trước danh sách đọc. Ngôn ngữ hình ảnh tổng thể dựa trên văn bản: giao diện là một khung đọc, và hình ảnh đóng vai trò là các điểm nhấn trực quan nhỏ chứ không phải để tạo không khí.

Chủ nghĩa tối giản Phần mềm dịch vụ thuần túy (PaaS)Bài xã luận

https://substack.com

Bảng màu

Thương hiệu

Signal Orange #ff6719 — Màu cam được sử dụng như một điểm nhấn phụ cho các chi tiết trang trí và để làm nổi bật những tín hiệu không thường xuyên xuất hiện. Không nên sử dụng màu cam làm màu chủ đạo cho các lời kêu gọi hành động.

Trung lập

Ink #363737 — Văn bản chính—bao gồm nội dung chính, tiêu đề, tên bài viết, mốc thời gian và tên tác giả; sử dụng màu ấm, gần như đen thay vì màu #000 thuần túy để dễ đọc hơn.
Paper #ffffff — Khung trang, bề mặt thẻ, trường nhập liệu và nền điều hướng là những bề mặt chủ đạo chiếm phần lớn diện tích giao diện.
Charcoal #232525 — Chế độ hiển thị khi rê chuột cho phép thêm văn bản và liên kết với các mức độ chọn cao; chi tiết hơn chế độ Ink đối với các khối mã và khối lựa chọn.
Stone #777777 — Màu trung tính được hỗ trợ cho các yếu tố giao diện người dùng phụ, đường phân cách và nhãn mờ. Không nên sử dụng màu này làm màu chủ đạo cho các nút kêu gọi hành động.
Ash #b6b6b6 — Các đường viền mỏng, đường viền nút, đường viền biểu tượng, đường viền trên các điều khiển bị vô hiệu hóa.
Mist #c8c8c8 — Các đường phân chia, nền không gây chú ý cho các biểu tượng, lấp đầy các ô trống theo hình dạng bộ xương.

Kiểu chữ

Từ 12 đến 32px · 5 bước

system-ui — thay thế: -apple-system · phác thảo 400, 500, 600 · Phông chữ chính cho giao diện người dùng và văn bản nội dung được sử dụng cho nhãn điều hướng, nút bấm, văn bản thông báo, siêu dữ liệu, trường nhập liệu và tất cả các yếu tố giao diện. Kích thước nhỏ gọn 12-13px cho siêu dữ liệu và 15-19px cho văn bản nội dung tạo cảm giác như một bảng tin dày đặc. Độ đậm của phông chữ là 400 cho văn bản nội dung, 500 cho các yếu tố điều hướng và nhãn nút, và 600 cho tiêu đề thông báo được làm nổi bật và tiêu đề mục.
Cahuenga — thay thế: Charter · phác thảo 500 · Một kiểu chữ serif trang trí đặc trưng dành cho các tiêu đề cấp sản phẩm (tiêu đề thanh bên, tiêu đề thẻ đăng ký, văn bản chính). Độ dày vừa phải và chiều cao dòng vừa phải tạo cho nó vẻ ngoài trang nhã mà không gây cảm giác cồng kềnh; đây là kiểu chữ duy nhất, ngoài màu cam, thể hiện được bản sắc của Substack.
Spectral — thay thế: Charter · phác thảo 400 · Phông chữ serif dành cho các bài viết dài—được sử dụng trong phòng đọc và nội dung trên bảng tin để cải thiện khả năng đọc hiểu các tài liệu biên tập. Khoảng cách dòng hơi hẹp hơn (1.20) đảm bảo việc đọc đoạn văn thoải mái trong khi vẫn duy trì sự gọn gàng đặc trưng của các tòa soạn.

Khoảng cách và hình thức

Mục đích	Nghĩa
Tỉ trọng	dày đặc
Bước cơ bản	8px
Bán kính nút	9999px
Bán kính thẻ	12px
Bóng tối	không - viền thay vì bóng
Giữa các phần	32px
Chiều rộng trang	1200px

AI sẽ xây dựng trang web của bạn theo phong cách Substack và điền đầy đủ thông tin vào đó.

Đăng tải sản phẩm và bài viết qua các liên kết sau: Instagram, TikTok, Facebook.
Chuyển nội dung từ trang web cũ của bạn—chỉ cần chỉ định địa chỉ.
Thiết kế hiện đại trên nền tảng tốt nhất: React ( Next.js) với khả năng render phía máy chủ và tối ưu hóa SEO ngay từ đầu.
Tối ưu hóa SEO hoàn toàn tự động cho kết quả tìm kiếm và đề xuất dựa trên mạng thần kinh.

Tạo một trang web theo phong cách này

Phong cách tương tự

Mollie — Quầy cashmere, sổ sách kế toán màu tối. Để lại khoảng trắng rộng rãi cho thiết kế biên tập xung quanh văn bản màu đen, sau đó nhấn mạnh các điểm liên quan đến sản phẩm bằng các gam màu kem ấm áp, nâu cà phê espresso và hình ảnh thực tế về các phương thức thanh toán.
Kagi — Một phòng đọc riêng biệt. Tạo một không gian trắng thoáng đãng xung quanh những dòng chữ in đậm bằng than chì, sử dụng những điểm nhấn màu tím nhẹ nhàng và các bề mặt màu pastel ấm áp để phá vỡ sự tĩnh lặng.
Milanote — Milanote là một studio sáng tạo chuyên nghiệp. Chúng tôi tạo ra các trang theo phong cách trưng bày ảnh bằng cách sử dụng bảng hình ảnh nổi: tường khung tối màu, không gian hiển thị màu trắng và ảnh chụp màn hình trông giống như vật thể thật với chiều sâu mềm mại.
Co2 — Một tập bản đồ khí hậu dưới ánh sáng mùa đông. Tạo các trang giống như một tài liệu phong cảnh nhìn từ trên cao, nơi các tiêu đề có chân chữ, dữ liệu được mã hóa theo danh mục và hình ảnh băng giá làm nổi bật các lề trắng rộng.
GitButler — Màu ngọc lam ở cuối văn bản. Sự kết hợp giữa các tiêu đề có chân chữ độ tương phản cao với các đường kẻ lưới kỹ thuật tinh tế, bề mặt màu than chì ấm áp và điểm nhấn màu ngọc lam kín đáo.
ElevenLabs — Một bộ ảnh minh họa với tông màu kem ấm áp và tiêu đề tinh tế. Một cuốn sổ tay theo phong cách Bauhaus – giấy màu trắng ngà, mực đen và điểm nhấn màu tím và cam duy nhất để trưng bày sản phẩm.
Awesomic — Phông chữ in hoa bằng lưới kẽm với các dấu chấm câu màu cam gợi nhớ đến những mảnh giấy vụn.
Monad — Tạp chí kỹ thuật biên tập về giấy da ấm
Dub — Bảng điều khiển bằng giấy gạo mờ của Link
Seline Analytics — Một chiếc bàn phân tích yên tĩnh trên nền giấy ấm áp.
Notion — Một cuốn sổ tay bằng giấy ấm áp dưới ánh nắng mặt trời giữa trưa.
Anthropic — Một cuốn nhật ký khoa học thực địa trên giấy da ấm áp—bề mặt màu ngà dịu nhẹ, tiêu đề biên tập có chân chữ và một điểm nhấn bằng đất sét duy nhất chỉ xuất hiện khi cần hành động.