Sơ đẳng
Bảng màu chính của chúng ta tạo nên phần lớn sự sáng tạo và phải thể hiện những sắc thái mạnh nhất trong bất kỳ tác phẩm nào.
Màu sắc
Bảng màu của chúng tôi bắt nguồn từ lịch sử và nền tảng hình ảnh của chúng tôi. Nó có thể được sử dụng để tạo nên sự hiện diện táo bạo, tự tin hoặc truyền tải sự chuyên nghiệp rõ ràng.
Bảng màu của chúng tôi được thiết kế để hỗ trợ nhiều bối cảnh và phương tiện trực quan khác nhau, đồng thời vẫn đảm bảo tính nhất quán rõ ràng. Nên tránh sử dụng các tông màu, độ trong suốt hoặc độ mờ đục của bảng màu. Thay vào đó, hãy tuân thủ các sắc thái đã chỉ định.
Sắc thái
Để linh hoạt, 3 bảng màu chính có sẵn với các giá trị sắc độ khác nhau. Không pha màu hoặc thêm độ trong suốt, hãy sử dụng các sắc thái như hiện trạng.
Đen & Trắng
Sắc thái trung tính
Sắc thái xanh
Dấu trọng âm
Để làm nổi bật pallet chính, chúng tôi cũng có một bộ pallet điện để truyền tải chuyển động và thu hút sự chú ý vào các khu vực cụ thể. Màu nhấn không bao giờ nên là những mảng màu lớn và chỉ nên chiếm dưới 5% tổng diện tích bố trí.
Công nghệ Teal
An toàn xanh
Nguy hiểm màu đỏ
Cảnh báo màu cam
Thận trọng màu vàng
Giáo dục màu tím
Cách sử dụng & Bối cảnh
Việc lựa chọn màu sắc và bối cảnh cẩn thận đóng vai trò then chốt trong việc định hình câu chuyện sáng tạo, khơi gợi cảm xúc và đảm bảo sự hài hòa về mặt thị giác giữa các yếu tố thiết kế. Hãy sử dụng màu chữ để tạo trải nghiệm đọc thoải mái và màu sắc gợi lên hành động. Tuyệt đối không sử dụng màu hành động làm tiêu đề. Hãy giữ màu Xanh lam của chúng tôi cho hành động và liên kết, tránh sử dụng cho chữ tĩnh. Hãy đảm bảo xem lại hướng dẫn về khả năng truy cập để biết các yêu cầu về độ tương phản chữ phù hợp.
Chữ
Đồ họa
Độ dốc
Gradient tạo chiều sâu cảm giác và giúp truyền tải các lớp trong bố cục. Chúng cũng có thể được sử dụng để phân cấp màu và tạo bóng cho các vùng trong kiểu chữ. Sử dụng màu chuyển sắc như một cách để thu hút ánh nhìn của người xem theo một hướng xuyên suốt nội dung.
Khi xây dựng hiệu ứng chuyển màu, hãy cố gắng giữ hiệu ứng tinh tế và sử dụng bảng màu theo kiểu bỏ qua một bước màu trong nhóm sắc thái để tạo độ rõ nét. Việc kết hợp các nhóm màu có thể là một cách để mang lại màu sắc sống động cho tác phẩm. Tránh sử dụng hiệu ứng chuyển màu đậm làm điểm nhấn như những mảng màu lớn trên một tác phẩm.
Chặn màu
Chữ
Điện
Để tạo hiệu ứng điện, hãy sử dụng các hướng dẫn bên dưới để đảm bảo giao diện nhất quán trong nhiều trải nghiệm khác nhau.
Sử dụng các sắc thái của một nhóm màu và xây dựng nhóm biểu tượng như minh họa bên dưới. Các kỹ thuật tương tự có thể được sử dụng cho các hình dạng minh họa khác, chẳng hạn như đường thẳng hoặc đường viền. Kích thước và độ mờ của hiệu ứng phát sáng và điểm sáng cần được điều chỉnh theo đồ họa hoặc văn bản để tạo hiệu ứng tinh tế và rõ nét.
Về kiểu chữ, có thể sử dụng các kết hợp màu tương tự nhưng hãy chú ý đến khả năng tiếp cận. Tránh sử dụng kỹ thuật này trên phông chữ lớn, đậm hoặc chữ nhỏ. Điều chỉnh đèn chiếu sáng tùy chọn sao cho vừa vặn với khối văn bản.
Thông số kỹ thuật hiển thị là của Figma. Chúng tôi sẽ cần điều chỉnh để phù hợp với ứng dụng của bạn.
Công thức
Biến thể
Kiểu
Khả năng tiếp cận
Sơ đẳng
Để đảm bảo càng nhiều khách hàng càng tốt có được trải nghiệm nhất quán, chúng tôi luôn muốn duy trì khả năng tiếp cận dễ dàng nhất có thể. Một cách để thực hiện điều này là tuân thủ các hướng dẫn WCAG 2.1 về tỷ lệ tương phản cho văn bản.
Dưới đây, bạn sẽ thấy toàn bộ quá trình kiểm tra màu sắc được sử dụng với phông chữ 16 pt của chúng tôi đối với các màu chặn văn bản được chấp nhận. Nếu được đánh dấu là "Caution" (Thận trọng), điều đó có nghĩa là phông chữ chỉ đáp ứng tiêu chuẩn AA và chỉ nên sử dụng cho văn bản có kích thước lớn hoặc đậm.
Hoạt động
Của chúng tôi OPSWAT Màu xanh là tông màu CTA chính của chúng tôi và cần đặc biệt chú ý khi đặt lên các khối màu chính.
Dấu trọng âm
Khi sử dụng trạng thái và dấu trọng âm, hãy đặc biệt cẩn thận để đảm bảo khả năng truy cập. Nếu màu phông chữ và khối chữ hiển thị bên dưới, chúng tôi không khuyến khích bạn sử dụng.
Academy
Khi sử dụng của chúng tôi Academy Màu tím cần đặc biệt cẩn thận để tránh bị chặn. Nếu màu phông chữ và khối chữ hiển thị bên dưới thì không nên sử dụng.
