สี
สี
ไม่มีชื่อของส่วนประกอบใดระบุสี สีอยู่ในพาเลตต์ เป็นสเกลของสิบสองโทนที่กำหนดสำหรับหน้าสว่างและหน้ามืด; แผนสีจะเลือกหน้าที่จะอ่านหน้า; ส่วนประกอบอ่านบทบาท — พื้นผิว ขอบ ข้อความ — ซึ่งเป็นตำแหน่งหนึ่งบนสเกล ผิวหนังไม่เคยบอกสี เปลี่ยนแผนจากส่วนหัวแล้วตัวอย่างทุกอันด้านล่างจะเคลื่อนที่โดยไม่มีอันใดที่ถูกกำหนดใหม่
สเกล
พาเลตต์คือกลางและเน้น — แบรนด์ — และสี่สถานะ แต่ละอันเป็นสเกลของสิบสองโทน ที่จัดเรียงเหมือนที่ Radix Themes และ Material 3 จัดสีไว้ ตำแหน่งบนสเกลหมายถึงสิ่งเดียวกันในทุกสเกลและทั้งสองหน้า: สิ่งที่ตัวเลขด้านล่างหมายถึง แอปพลิเคชันนำพาเลตต์ของมันโดยการให้เน้น; ทุกสเกลจะตาม
--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 พื้นของพื้นที่ทำงาน
- 2 พื้นของหน้า รอบๆ และระหว่างภูมิภาค
- 3 พื้นของฟิลด์; พื้นอ่อนที่สถานะนั่งอยู่
- 4 การควบคุมที่ยกขึ้น; พื้นที่ที่ถูกชี้
- 5 การ์ด บล็อก — และขอบที่ละเอียดอ่อน
- 6 ขอบ
- 7 ขอบระหว่างสองภูมิภาค
- 8 ขอบที่แข็งแรง วงแวนที่มีจุดสนใจ
- 9 สีทั้งอัน เติมเต็มสิ่งที่มันทำเครื่องหมาย
- 10 เหมือนเดิม ที่ถูกชี้
- 11 สีในฐานะหมึก อ่านได้บนพื้น
- 12 หมึกที่แข็งแรง — สำหรับกลาง ข้อความเอง
พื้นผิว
พื้นดิน จากภูมิภาคไปข้างนอก — แต่ละอันเป็นตำแหน่งบนสเกลกลาง หน้าสว่างของแดชบอร์ดจัดเรียงพวกมันตามความสว่างจนถึงสีขาว หน้าคมจัดเรียงตามระยะที่แต่ละอันยกขึ้นจากพื้น
--surface-zoneพื้นดินที่ภูมิภาคของหน้าเพจตั้งอยู่--surface-pageหน้าเพจเอง และสิ่งที่แสดงระหว่างโซน--surface-shellเมนู, ส่วนหัว, ส่วนท้าย--surface-1ข้อมูลนำเข้าและฟิลด์--surface-2ปุ่ม, แถบเครื่องมือ--surface-3บล็อก, การ์ด, โมดัล--surface-invertการควบคุมที่โดดเด่นโดยการใช้สีของข้อความข้อความ
ระดับความสนใจสามระดับ — กลาง 12, 11 และ 9: สิ่งที่ถูกอ่าน สิ่งที่มีคุณสมบัติ และสิ่งที่มีอยู่เพียงเมื่อมองหา
--text-color-default — สิ่งที่กำลังอ่าน
--text-color-muted — ป้ายชื่อ, ข้อมูลเมตา, ซับไตเติล
--text-color-subtle — ตัวแยกและสถานะว่าง
ขอบ
น้ำหนักสี่แบบ บอกความแตกต่างจากสิ่งที่มันแยก — กลาง 5 ถึง 8: สองสิ่งภายในภูมิภาคหนึ่ง ฟิลด์จากสิ่งที่อยู่ข้างหลังมัน สองภูมิภาคของหน้า และวงแหวนของสิ่งที่มีจุดสนใจ
--border-color-discreet
--border-color-default
--border-color-region
--border-color-strong
หมวดหมู่
สีสิบสามสีที่ไม่มีความหมายอื่นนอกจาก "ไม่ใช่สีที่อยู่ข้างๆ": ชุดของแผนภูมิ ส่วนของการกระจาย ขั้นตอนของการทำงาน แอปจะเลือก `cat-mint` เพราะมันดูเหมือนมินต์ — และแต่ละอันเป็นสเกลเหมือนคนอื่นๆ ดังนั้นหมวดหมู่จะสวมใส่เหมือนสถานะ: พื้นที่ของมันที่ 3 หมึกของมันที่ 11 และเต็มที่ 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