Màu sắc
Màu sắc
Không có thành phần nào chỉ định màu sắc. Màu sắc sống trong bảng màu, như các thang âm của mười hai tông được cung cấp cho mặt sáng và mặt tối; bảng màu sẽ chọn mặt nào mà trang đọc; một thành phần đọc một vai trò — một bề mặt, một đường viền, một văn bản — mà là một vị trí trên một thang. Da không bao giờ nói về màu sắc. Thay đổi bảng màu từ tiêu đề và mọi mẫu bên dưới đều di chuyển mà không cần định nghĩa lại một cái nào.
Thang âm
Một bảng màu là một màu trung tính, một màu nổi bật — thương hiệu — và bốn trạng thái, mỗi trạng thái là một thang âm của mười hai tông, được sắp xếp theo cách mà Radix Themes và Material 3 trình bày màu sắc. Một vị trí trên một thang có nghĩa giống nhau trên mọi thang và trên cả hai mặt: những gì mà các số bên dưới chỉ đến. Một ứng dụng mang bảng màu của nó bằng cách cung cấp màu nổi bật; mọi thang đều theo sau.
--neutral-*
1
2
3
4
5
6
7
8
9
10
11
12
--accent-*
1
2
3
4
5
6
7
8
9
10
11
12
--info-*
1
2
3
4
5
6
7
8
9
10
11
12
--success-*
1
2
3
4
5
6
7
8
9
10
11
12
--warning-*
1
2
3
4
5
6
7
8
9
10
11
12
--error-*
1
2
3
4
5
6
7
8
9
10
11
12
- 1 nền của khu vực làm việc
- 2 nền của trang, xung quanh và giữa các khu vực
- 3 nền của một trường; nền mờ mà một trạng thái ngồi trên đó
- 4 một điều khiển được nâng lên; một nền khi di chuột qua
- 5 một thẻ, một khối — và đường viền riêng của nó
- 6 một đường viền
- 7 một đường viền giữa hai khu vực
- 8 một đường viền mạnh, một vòng tập trung
- 9 màu sắc tổng thể, lấp đầy những gì nó đánh dấu
- 10 cái tương tự, khi di chuột qua
- 11 màu sắc như mực, có thể đọc được trên các nền
- 12 mực đậm — cho màu trung tính, chính văn bản
Bề mặt
Các nền tảng, từ khu vực ra ngoài — mỗi cái là một vị trí trên thang trung tính. Mặt sáng của bảng điều khiển sắp xếp chúng theo độ sáng cho đến màu trắng, mặt tối theo mức độ mà mỗi cái được nâng lên khỏi mặt đất.
--surface-zoneNền mà một khu vực của trang đứng trên--surface-pageTrang chính nó, và những gì hiển thị giữa các vùng--surface-shellMenu, tiêu đề, chân trang--surface-1Các trường nhập liệu--surface-2Nút, thanh công cụ--surface-3Khối, thẻ, hộp thoại--surface-invertMột điều khiển nổi bật bằng cách lấy màu sắc của văn bảnVăn bản
Ba mức độ chú ý — trung tính 12, 11 và 9: những gì đang được đọc, những gì đủ điều kiện cho nó, và những gì chỉ xuất hiện khi được tìm kiếm.
--text-color-default — Những gì đang được đọc
--text-color-muted — Nhãn, meta, phụ đề
--text-color-subtle — Các dấu phân cách và trạng thái trống
Đường viền
Bốn trọng lượng, phân biệt bởi những gì chúng tách biệt — trung tính 5 đến 8: hai thứ bên trong một khu vực, một trường từ những gì ở phía sau nó, hai khu vực của một trang, và vòng tròn của những gì có sự tập trung.
--border-color-discreet
--border-color-default
--border-color-region
--border-color-strong
Danh mục
Mười ba màu sắc chỉ có nghĩa là "không phải cái bên cạnh": chuỗi của một biểu đồ, các phân đoạn của một phân phối, các giai đoạn của một quy trình công việc. Được đặt tên, không được đánh số — một ứng dụng chọn `cat-mint` vì nó trông giống như bạc hà — và mỗi cái là một thang giống như những cái khác, vì vậy một danh mục được thể hiện như một trạng thái: nền của nó ở 3, mực của nó ở 11, được lấp đầy ở 9.
--cat-ruby-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-grapefruit-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-bittersweet-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-sunflower-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-straw-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-grass-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-mint-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-teal-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-aqua-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-blue-jeans-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-plum-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-lavender-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-pink-rose-*
1
2
3
4
5
6
7
8
9
10
11
12