رنگ‌ها
رنگ‌ها
هیچ نام مؤلفه‌ای رنگی ندارد. رنگ در پالت وجود دارد، به‌عنوان مقیاس‌های دوازده‌تایی که برای چهره روشن و تیره ارائه شده‌اند؛ طرح رنگی مشخص می‌کند که صفحه چگونه خوانده می‌شود؛ یک مؤلفه نقشی می‌خواند — یک سطح، یک حاشیه، یک متن — که در یک مکان روی یک مقیاس قرار دارد. پوست هرگز رنگی را نمی‌گوید. طرح را از هدر تغییر دهید و هر رنگ زیر بدون اینکه هیچ‌کدام دوباره تعریف شوند، جابه‌جا می‌شود.
مقیاس‌ها
یک پالت یک خنثی، یک تأکید — برند — و چهار حالت، هرکدام یک مقیاس از دوازده رنگ، به‌گونه‌ای که موضوعات رادیکس و متریال ۳ رنگ‌ها را مرتب می‌کنند. یک مکان روی یک مقیاس در هر مقیاس و در هر دو چهره به یک معناست: عددهای زیر برای چه هستند. یک اپلیکیشن با ارائه تأکیدش پالت خود را می‌آورد؛ هر مقیاس دنبال می‌شود.
--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یک کنترل که با به‌کارگیری رنگ متن، خود را متمایز میکندمتن
سه سطح توجه — خنثی ۱۲، ۱۱ و ۹: چه چیزی خوانده می‌شود، چه چیزی آن را واجد شرایط می‌کند، و چه چیزی فقط زمانی پیدا می‌شود که به دنبالش بگردید.
--text-color-default — آنچه که خوانده می‌شود
--text-color-muted — برچسب‌ها، متا، زیرنویس‌ها
--text-color-subtle — جداکننده‌ها و حالت‌های خالی
حاشیه‌ها
چهار وزن، که با چیزی که جدا می‌کنند تمایز ایجاد می‌شود — خنثی ۵ تا ۸: دو چیز در یک ناحیه، یک میدان از آنچه پشت آن است، دو ناحیه از یک صفحه، و حلقه‌ای که فوکوس دارد.
--border-color-discreet
--border-color-default
--border-color-region
--border-color-strong
دسته‌بندی‌ها
سیزده رنگ که هیچ معنایی جز "نه آن یکی که در کنار آن است" ندارند: سری یک نمودار، بخش‌های یک توزیع، مراحل یک گردش کار. نام‌گذاری شده، نه شماره‌گذاری شده — یک اپلیکیشن `cat-mint` را انتخاب می‌کند زیرا شبیه نعنا است — و هرکدام مقیاسی مانند دیگران دارند، بنابراین یک دسته به‌گونه‌ای پوشیده می‌شود که یک حالت است: زمینه‌اش در ۳، جوهرش در ۱۱، پر شده در ۹.
--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