Hệ thống thiết kế SaaS
Các hệ thống thiết kế được trích xuất từ website phần mềm và SaaS: ứng dụng năng suất, công cụ quản lý dự án, CRM và các sản phẩm khác bán dưới dạng dịch vụ. Phần lớn kết hợp bảng màu tiết chế và một màu nhấn với thang kiểu chữ rõ ràng, nên rất phù hợp làm điểm khởi đầu cho một dashboard hoặc trang marketing sản phẩm.
3 mẫu DESIGN.md trong danh mục này, từ Figma, Linear và Notion. Đượ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ì.
Figma
Figma của trang marketing sử dụng hệ thống đơn sắc đen-trắng rõ ràng, lấy font biến thiên độc quyền figmaSans làm trục chính. Thiết kế đặt trọng tâm vào typography: tiêu đề hiển thị lớn ở 88px/56px với letter-spacing âm, tạo tương phản với phần nội dung thân bài có độ đậm nhẹ ở weight 330. Các nút CTA dùng hình viên thuốc bo tròn hoàn toàn (border-radius: 9999px), nền đen đặc với chữ trắng. Bố cục theo lưới với chiều rộng nội dung tối đa 1440px, khoảng đệm dọc mỗi section 80px rộng rãi và nền trắng sạch. Chiều sâu được giữ ở mức tối thiểu, bóng đổ là các lớp phủ oklch tinh tế. Màu nhấn oải hương/tím #cb9fd2 xuất hiện trong banner footer. Tổng thể mang phong cách tự tin, tinh tế về typography và đề cao thương hiệu.
Linear
Hệ thống thiết kế của Linear được xây dựng ưu tiên giao diện tối, dành cho sản phẩm có mật độ thông tin cao phục vụ các đội ngũ kỹ thuật. Bảng màu nền lấy màu đen gần như tuyệt đối làm gốc, gồm #08090a và #0f1011, kết hợp các lớp xám tối nhiều tầng để phân biệt thanh bên, thẻ và bảng điều khiển. Kiểu chữ chỉ dùng Inter Variable, với khoảng cách chữ âm được canh chỉnh chính xác ở các cỡ chữ tiêu đề lớn, còn Berkeley Mono dành cho mã nội dòng. Ngôn ngữ bo góc được giữ ở mức nhỏ có chủ đích, phổ biến nhất là 2–6px, và hình viên thuốc chỉ dành cho huy hiệu và chip trạng thái. Độ nổi được thể hiện bằng viền inset 1px tinh tế và bóng đổ độ mờ thấp thay vì các lớp xếp chồng mạnh mẽ. Màu CTA chính là màu chàm đặc trưng của Linear, #5e6ad2, được dùng cho nút Sign Up và các liên kết quan trọng.
Notion
Trang chủ tiếp thị của Notion kết hợp phần hero màu xanh navy đậm (#02093a) với nội dung chính màu sáng (#f6f5f4), sử dụng một kiểu chữ tùy chỉnh (NotionInter) cho mọi vai trò văn bản. Thiết kế dựa trên lưới 12 cột với khoảng cách rãnh 28px, hệ thống bo góc kép gồm 8px cho thẻ và 9999px cho các nút dạng viên thuốc, cùng hệ thống đổ bóng nhiều lớp tăng dần cho các thành phần nổi. Màu xanh thương hiệu (#2537b1) dẫn dắt các nút kêu gọi hành động và điểm nhấn, trong khi thang màu xám ngữ nghĩa từ gray-200 đến gray-900 tạo nên cấu trúc phân cấp cho toàn bộ văn bản và bề mặt.
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.