Hệ thống thiết kế truyền thông và giải trí
Các hệ thống thiết kế được trích xuất từ website tin tức, tạp chí, xuất bản, streaming và giải trí. Kiểu chữ dẫn dắt: mặt chữ tiêu đề, dòng tác giả và lưới bài viết, với màu sắc được dùng tiết chế cho các chuyên mục và lời kêu gọi hành động.
2 mẫu DESIGN.md trong danh mục này, từ The Onion và WIRED. Được trích xuất từ các trang công khai của từng website, không phải hướng dẫn thương hiệu chính thức. Mới làm quen với định dạng này? Đọc DESIGN.md là gì.
The Onion
The Onion là hệ thống thiết kế của một tờ báo châm biếm được số hóa: tiêu đề sans-serif hẹp, đậm, màu đen, cùng màu nhấn xanh rừng đặc trưng #006b3a dùng cho nhãn chuyên mục, huy hiệu xu hướng và các nút kêu gọi hành động, tất cả đặt trên nền trắng và xám nhạt. Kiểu chữ là công cụ thiết kế chính: các họ chữ gothic hẹp và bán hẹp của Adobe Fonts (tablet-gothic, rocky-condensed) chi phối phần tiêu đề, trong khi utopia-std-caption đảm nhiệm phần nội dung chính. Bố cục dày đặc thông tin, với lưới thẻ sát nhau, đường kẻ phân cách bài viết ở cạnh dưới và bo góc gần như bằng không đối với các thành phần cấu trúc. Hiệu ứng độ nổi được giảm tối thiểu, chỉ có vài bóng đổ nhẹ ở các lớp phủ.
WIRED
WIRED là hệ thống thiết kế tương phản cao, lấy biên tập làm trung tâm, xây trên nền đơn sắc với bảng màu gần như không có màu. Hệ thống dựa vào bộ kiểu chữ độc quyền (Breve Text, WIRED Mono, WiredDisplay, Apercu). Màu đen (#000000) chiếm ưu thế với 2961 lượt xuất hiện, làm nền cho chữ, viền, biểu tượng và trạng thái tương tác. Màu trắng (#ffffff) là bề mặt chính. Màu nhấn được dùng tiết chế: chỉ #057dbc xuất hiện như màu xanh thương hiệu cho các nút kêu gọi đăng ký. Bố cục là lưới bài viết nhiều cột có cấu trúc, khoảng cách cơ sở 8px chặt chẽ, bề mặt phẳng không đổ bóng, và bo góc tối thiểu (4px theo tiêu chuẩn). Kiểu chữ là yếu tố tạo khác biệt chính: nội dung biên tập dùng Breve Text cỡ 19px, nhãn mục dùng WIRED Mono viết hoa với khoảng cách chữ được nới rộng, còn tiêu đề lớn dùng WiredDisplay. Tổng thể toát lên vẻ uy quyền, mật độ thông tin cao và ưu tiên mạch đọc.
Không thấy trang web bạn cần?
Dán bất kỳ URL nào để lấy DESIGN.md từ mọi trang web. Màu sắc, kiểu chữ, khoảng cách và token, sẵn sàng cho quy trình làm việc với AI của bạn.