Nhảy tới nội dung

Màu sắc

Chúng tôi sử dụng màu sắc để truyền đạt thông tin một cách trực quan, các chức năng trong trải nghiệm của chúng tôi.

Độ tương phản

Chúng tôi tuân theo tiêu chuẩn AA của WCAG cho độ tương phản.

Yếu tốĐộ tương phản
Chữ lớn (trên 18px hoặc 24px với Light style)3:1
Chữ thường4.5:1

Công cụ dùng để kiểm tra độ tương phản:

Hệ thống màu sắc

Chúng tôi sử dụng Token cho hệ thống màu. Xem thêm về token tại đây

Theme

Theme là hệ thống những màu được dùng để tạo ra tông màu chủ đạo của sản phẩm. Tini có Light theme (theme màu sáng) và Dark theme (theme màu tối - đang phát triển)

ThemeLink
LightFigma community
DarkĐang phát triển

Màu Global

Màu Global là những palette màu được tạo sẵn trong Tini design system. Tùy thuộc vào theme mà một token màu Global có thể có giá trị (mã Hex, rgb) khác nhau. Giá trị màu Global không được thay đổi

Ví dụ: Palette màu trung tính của Light theme

Màu Alias

Màu Alias là những màu có mục đích, hoàn cảnh sử dụng, màu Alias có giá trị thừa hưởng từ màu Global. Giá trị màu Alias có thể thay đổi tùy thuộc vào yêu cầu của sản phẩm.

Mục đích, hoàn cảnh sử dụng của màu Alias

TokenHoàn cảnh, mục đích sử dụng
color-alias-brandMàu brand của sản phẩm
color-alias-on-brandMàu cho các nội dung (chữ, icon, v.v.) được sử dụng trên nền có màu brand
color-alias-positiveMàu mang tính tích cực
color-alias-on-positiveMàu cho các nội dung (chữ, icon, v.v.) được sử dụng trên nền có màu tích cực
color-alias-negativeMàu mang tính tiêu cực
color-alias-on-negativeMàu cho các nội dung (chữ, icon, v.v.) được sử dụng trên nền có màu tiêu cực
color-alias-themeMàu theme chính của sản phẩm (vd Light theme thì màu trắng là màu theme chính), chủ yếu dùng cho nền (background)
color-alias-theme-variantMàu theme phụ đậm hơn màu theme chính
color-alias-primary-on-themeMàu chính cho các nội dung (chữ, icon, v.v.) được sử dụng trên nền có màu theme
color-alias-secondary-on-themeMàu phụ cho các nội dung (chữ, icon, v.v.) được sử dụng trên nền có màu theme, nhạt hơn màu chính
color-alias-reverse-themeMàu theme tương phản với màu theme chính, được sử dụng trong một số trường hợp đặc biệt. Chúng tôi không dùng Light, Dark trong tên token để tránh nhầm với Light theme, Dark theme
color-alias-primary-on-reverse-themeMàu chính cho các nội dung (chữ, icon, v.v.) được sử dụng trên nền có màu theme tương phản
color-alias-secondary-on-reverse-themeMàu phụ cho các nội dung (chữ, icon, v.v.) được sử dụng trên nền có màu theme tương phản
color-alias-disabledMàu disabled, thường dùng cho chữ, icon
color-alias-disabled-variantMàu disabled nhạt hơn, thường dùng cho nền, viền
color-alias-skeletonMàu skeleton loading
color-alias-outlineMàu dùng cho viền
color-alias-outline-variantMàu dùng cho viền
color-alias-outline-overlayMàu dùng cho viền, có độ trong suốt để tệp với nền

Màu Component specific

Màu Component specific là màu của các thành phần cấu tạo nên một component. Giá trị của màu component specific thừa hưởng từ màu Alias nếu có thể, nếu ko có màu Alias thích hợp thì có thể thừa hưởng từ màu Global

Ví dụ về màu Component specific của một dạng button