Substack

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

Phong cách tương tự

• 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.
• Calendly — Mực xanh đậm trên nền đá cẩm thạch lạnh.
• Augen Pro — Cách bài trí màu trắng của Apple nổi bật với gam màu xanh điện nhẹ nhàng, tinh tế trong không gian đơn sắc.
• Antimetal — Một bản ghi chép biên tập trên giấy màu kem—một buổi sáng yên tĩnh tại một tạp chí khoa học, nơi sự tiết chế thể hiện sự tự tin và các nét chữ đảm nhiệm phần việc chính.
• Perk — Vôi điện trên giấy nướng ấm
• Ditto — Một xưởng vẽ ngập tràn ánh nắng tạo ra các mẫu hoa dại. Bề mặt màu kem ấm áp, màu vàng rực rỡ làm nền, mực màu xanh hải quân đậm, những hình dạng màu sắc tự nhiên nở rộ phía sau tác phẩm.