Lựa chọn hình ảnh và hành vi chung để thành phần dùng làm nền. Mọi nội dung ở đây là đề xuất dự thảo.
Dùng làm nền tảng rà soát
Mỗi mục hướng dẫn đều tạm thời. Các biến CSS trong src/styles/tokens.css là nguồn triển khai của bản mẫu này.
Định hướng hình ảnh
Tối giản sáng và vui
Thiết kế phẳng và tối giản giữ giao diện rõ ràng. Màu tiết chế, hình học đơn giản và minh họa có mục đích tạo cá tính.
Bố cục ưu tiên nội dung, có phân cấp rõ, chữ vừa phải và khoảng cách hữu ích.
Mặc định dùng nền trung tính sáng, màu nhận diện đậm dành cho ít điểm nhấn có chủ đích.
Tiết chế chi tiết pixel hoặc vuông bo góc. Chỉ thêm minh họa khi giải thích nội dung hoặc phục vụ nhu cầu.
Tránh màu chuyển trang trí, tiêu đề quá lớn, thẻ lặp không có nội dung riêng, hình viên thuốc và nhãn trạng thái. Dùng thẻ khi làm rõ một nhóm nội dung thực.
Chỉ tham chiếu Apple, GitHub hoặc Duolingo cho một đặc điểm được gọi tên. Không sao chép hay kết hợp toàn bộ hệ thống hình ảnh.
Đây là đề xuất dự thảo. Theo yêu cầu cụ thể hơn của công việc và quyết định sản phẩm đã duyệt.
Hệ thống màu
Màu nhận diện có vai trò rõ ràng
Dùng biến theo ý nghĩa cho trạng thái giao diện, màu trạng thái đi cùng chữ hoặc biểu tượng.
Scout Blue
--color-scout-blue#21497B
Hành động chính và liên kết
Thinker Orange
--color-thinker-orange#EB7114
Thu hút chú ý và nhấn mạnh phụ
Builder Green
--color-builder-green#47A036
Thành công và xác nhận
Auditor Red
--color-auditor-red#971607
Lỗi và hành động phá hủy
Core Graphite
--color-core-graphite#443A3B
Chữ chính và nền tối
Bề mặt nhẹ
--color-surface-muted#F1EFED
Nội dung theo nhóm và ví dụ tinh tế
Vai trò màu
Sắc độ hữu ích từ nhận diện
Màu nhận diện là điểm neo. Dùng màu nhẹ cho nền, màu cơ sở cho nhấn và màu đậm khi chữ cần tương phản hơn.
Scout Blue
Thông tin, hành động chính và liên kết.
Nhẹ#EAF0F6
Cơ sở#21497B
Đường viền#BDCDDD
Mạnh#17375F
Thinker Orange
Cảnh báo và nhấn mạnh phụ.
Nhẹ#FFF1DF
Cơ sở#EB7114
Đường viền#F2D3AD
Mạnh#70420F
Builder Green
Thành công và xác nhận.
Nhẹ#EDF5EA
Cơ sở#47A036
Đường viền#BFD9B8
Mạnh#287523
Auditor Red
Lỗi và hành động phá hủy.
Nhẹ#F8EAE8
Cơ sở#971607
Đường viền#DFBCB6
Mạnh#7B1105
Dùng từng sắc độ có chủ đích
Dùng màu nhẹ cho nền thông báo và bề mặt đã chọn.
Dùng màu cơ sở cho nhấn thương hiệu, liên kết và chỉ báo.
Dùng màu đậm cho chữ, biểu tượng và trạng thái tương tác cần tương phản.
Ánh xạ trạng thái theo ý nghĩa
Thông tin dùng Scout Blue qua --color-info.
Thành công dùng Builder Green qua --color-success.
Cảnh báo dùng Thinker Orange qua --color-warning.
Lỗi dùng Auditor Red qua --color-error.
Ghép mỗi màu theo ý nghĩa với biến nền và đường viền tương ứng.
Bảng màu tùy chọn
Màu mở rộng cho trường hợp cụ thể
Chỉ dùng màu hỗ trợ khi nội dung cần thêm nhóm. Chúng không thay màu nhận diện VINASIG.
Bảng màu lấy cảm hứng từ Minecraft.
Giữ rõ vai trò thương hiệu và ý nghĩa
Than chì ấm, đỏ son, lá, xanh lam đậm và quýt dùng lại màu nhận diện hiện có.
Dùng biến nhận diện và theo ý nghĩa hiện có cho điều hướng, hành động và trạng thái. Chỉ chọn màu thêm khi giúp phân biệt nội dung.
Kiểm tra độ tương phản trước khi dùng
Màu đậm là tham chiếu bảng màu, chưa bảo đảm phù hợp cho bóng hoặc chữ. Kiểm tra tương phản cho từng cách dùng thật.
Bảng màu mở rộng
Vàng chanh
Màu nhấn mở rộng
Cơ sở #DDD605Đậm #373501
--color-palette-citron
Sứ
Màu trung tính mở rộng
Cơ sở #E3D4D1Đậm #383534
--color-palette-porcelain
Sương
Màu trung tính mở rộng
Cơ sở #CECACAĐậm #333232
--color-palette-fog
Than chì ấm
Tên tham chiếu Core Graphite
Cơ sở #443A3BĐậm #110E0E
--color-palette-warm-graphite
Đỏ son
Tên tham chiếu Auditor Red
Cơ sở #971607Đậm #250501
--color-palette-carmine
Đất sét
Màu nhấn mở rộng
Cơ sở #B4684DĐậm #2D1A13
--color-palette-clay
Nghệ tây
Màu nhấn mở rộng
Cơ sở #DEB12DĐậm #372C0B
--color-palette-saffron
Lá
Tên tham chiếu Builder Green
Cơ sở #47A036Đậm #04280D
--color-palette-leaf
Đầm nước
Màu nhấn mở rộng
Cơ sở #2CBAA8Đậm #0B2E2A
--color-palette-lagoon
Xanh lam đậm
Tên tham chiếu Scout Blue
Cơ sở #21497BĐậm #08121E
--color-palette-deep-blue
Tím
Màu nhấn mở rộng
Cơ sở #9A5CC6Đậm #261731
--color-palette-violet
Quýt
Tên tham chiếu Thinker Orange
Cơ sở #EB7114Đậm #3B1D05
--color-palette-tangerine
Bầu trời
Màu nhấn mở rộng
Cơ sở #8BB3FFĐậm #232D40
--color-palette-sky
Hổ phách
Màu nhấn mở rộng
Cơ sở #FFAA00Ô liu đậm #2A2A00Nâu đậm #402A00
--color-palette-amber
Kiểu chữ
Một họ chữ, nhiều mức linh hoạt
Space Grotesk được lưu tại thư mục tài sản đã duyệt. Trang không gọi dịch vụ phông chữ bên ngoài.
Hiển thịThiết kế rõ ràng.
Tiêu đềNgôn ngữ giao diện nhất quán
Nội dungHướng dẫn dễ đọc giúp người và agent đưa ra cùng quyết định giao diện.
Hỗ trợPhông chữ biến thiên hỗ trợ độ đậm từ 300 đến 700.
Chữ và cách viết
Giữ việc đọc rõ ràng và ổn định
Dùng thang chữ vừa phải
Chữ nội dung gần 1rem, chữ phụ vẫn dễ đọc.
Tiêu đề trang không quá 2.75rem.
Tạo phân cấp bằng độ đậm và khoảng cách thay vì chữ quá lớn.
Viết giao diện ngắn gọn
Câu rõ ràng, dấu nháy thẳng và viết hoa tiết chế.
Tránh gạch ngang dài, chấm phẩy, dấu gạch chéo phân tách và viết tắt chưa giải thích.
Danh sách dùng dấu gạch nối hoặc bố cục riêng. Không dùng ký hiệu chấm tròn, vuông, mũi tên hay dấu đầu dòng hình ảnh.
Viết lại khi chỉ một hoặc hai từ ngắn nằm trên dòng cuối.
Thang khoảng cách
Nhịp nhỏ, có thể lặp lại
Bản mẫu dùng cơ sở 4 px. Ưu tiên bước khoảng cách chung trước giá trị riêng lẻ.
--space-1
4 px
--space-2
8 px
--space-4
16 px
--space-8
32 px
--space-16
64 px
Cách thích ứng màn hình
Để nội dung quyết định điểm chuyển bố cục
Màn hình nhỏ dưới 761 px
Xếp nội dung dọc, hành động dễ tới và tránh cuộn ngang toàn trang.
Màn hình vừa từ 761-959 px
Sắp lại nhiều cột khi nội dung bắt đầu chật.
Màn hình lớn từ 960 px
Dùng không gian sẵn có cho điều hướng và so sánh, không kéo dòng chữ quá dài.
Khả năng tiếp cận
Giúp giao diện dùng được theo nhiều cách
Bắt buộcDùng vùng có ngữ nghĩa, thứ tự tiêu đề hợp lý và nhãn nhìn thấy cho biểu mẫu.
Bắt buộcGiữ tiêu điểm bàn phím nhìn thấy. Tránh chỉ dùng màu để truyền đạt ý nghĩa.
Ưu tiênKiểm tra độ tương phản của chữ và điều khiển trên mọi bề mặt đã chọn trước khi phát hành.