اصول
چهار قاعده تکلیف هر پرسش باز در این سیستم را روشن می‌کند. وقتی جزء و اصل با هم اختلاف دارند، اصل مقدم است.
پیش‌فرض، آرام
خط مویی و فضا، پیش از کادر و پرکردگی.
یک رنگ تأکید
سبز فقط چیزی را نشان می‌دهد که مهم است.
دوزبانه از پایه
هر چیدمان باید چرخش راست‌چین به چپ‌چین را تاب بیاورد.
داده روی صفحه
عدد بیشترین وزن تایپوگرافیک صفحه را می‌گیرد.
رنگ
شش توکن، دو تم. رنگ هفتمی وجود ندارد؛ هر چه بیشتر لازم دارید ترکیب سبز تأکید با پس‌زمینه است.
حالت فعلی
- --bg
- --bg
- سطح صفحه و کارت
- --fg
- --fg
- تیتر و متن اصلی
- --fg-2
- --fg-2
- متن ثانویه و برچسب مونو
- --line
- --line
- خط مویی، حاشیه، جداکننده
- --accent
- --accent
- لینک، کنش اصلی، دادهٔ زنده
- --btn-fg
- --btn-fg
- متن و آیکون روی سبز
فقط همین پنج ترکیب: 7، 16، 34، 62 و 100 درصد سبز روی پس‌زمینه.
تایپوگرافی
دو قلم در چهار نقش: پینار برای تیترها و اعداد شاخص؛ یکان‌بخ برای متن، رابط و فراداده.
پینار — تمام تیترها، وزن لایت و رگولار.
یکان‌بخ — متن، برچسب رابط، فرم.
پینار — واژه‌نشان و اعداد شاخص.
یکان‌بخ — فراداده و برچسب‌ها؛ متن لاتین چپ‌به‌راست نمایش داده می‌شود.
عنوان‌های اصلی بخش‌های کتاب برند با سبز خوانای برند نمایش داده می‌شوند. از توکن accent-readable استفاده کنید تا در هر دو حالت روشن و تیره کنتراست مناسب حفظ شود؛ عنوان‌های داخل بخش به رنگ متن اصلی می‌مانند.
قلم را امتحان کنید
فاصله و گردی
گردی تودرتو با گام 4 کم می‌شود: کارت 16، فیلد داخلش 12.
شبکه و شکست‌ها
شبکهٔ 12 ستونی درون ظرف 1360 پیکسلی با فاصلهٔ برگرفته از مقیاس. زیر هر شکست، چیدمان ساده می‌شود، نه کوچک.
سطح و عمق
برای زمینه‌های صفحه از خطوط ظریف و رنگ ملایم استفاده کنید. نوارهای چسبان از تاری و پنجره‌ها و منوها از توکن‌های مشترک ارتفاع استفاده می‌کنند.
آیکون‌ها
آیکون به‌تنهایی سبز نمی‌شود؛ رنگ متنِ کنارش را می‌گیرد.
اجزا
هر جزء زیر به‌صورت زنده نمایش داده شده و پس از آن وضعیت‌ها و قواعدش آمده است. روی نمونه‌ها هاور و فوکوس کنید؛ دقیقاً مثل محیط واقعی رفتار می‌کنند.
برچسب بالای فیلد، خطا زیر آن و با رنگ تأکید — نه قرمز.
اعداد شاخص با پینار و برچسب‌هایشان با یکان‌بخ نمایش داده می‌شوند.
حرکت
حرکت مثل رشد گیاه است: آرام شروع، نرم تمام. هیچ چیز در میدان دید خواننده تکرار نمی‌شود، جز یک نقطهٔ دانه.
دسترس‌پذیری
این‌ها الزام‌اند، نه توصیه. جزئی که یکی از این‌ها را رد کند منتشر نمی‌شود.
- کنتراست متن4.5:1 / 3:1
- برای متن عادی نسبت 4.5:1 لازم است. برای متن بزرگ با اندازهٔ 24px عادی یا 18.67px ضخیم، نسبت 3:1 کافی است.
- روش بررسیرنگ متن را روی پس‌زمینهٔ واقعی در هر دو حالت روشن و تاریک بسنجید.
- ناحیهٔ لمس44 × 44 px
- حداقل ناحیهٔ لمس ما شامل دکمه‌های آیکونی و کنترل‌های کوچک هم می‌شود؛ خود آیکون می‌تواند کوچک‌تر باشد.
- روش بررسیاندازهٔ ناحیهٔ قابل کلیک را بررسی کنید، نه فقط آیکون را.
- فوکوس صفحه‌کلید2px / 3px
- حاشیهٔ فوکوس 2px با رنگ تأکیدی و فاصلهٔ 3px را حفظ کنید. عناصر چسبان نباید فوکوس را بپوشانند.
- روش بررسیبا Tab و Shift + Tab به تمام کنترل‌ها برسید و آن‌ها را به کار بگیرید.
- خوانایی ورودی‌ها16px
- متن ورودی‌های موبایل حداقل 16px باشد؛ برچسب‌ها همواره دیده شوند و خطاها روشن باشند.
- روش بررسیدر صفحهٔ باریک بررسی کنید؛ راهنمای فیلد نباید فقط متن جای‌نگهدار باشد.
- چیدمان دوزبانهRTL / LTR
- از فاصله‌گذاری و موقعیت‌دهی منطقی استفاده کنید. فلش‌های پیمایش با جهت خواندن هماهنگ شوند؛ فلش‌های عمودی ثابت بمانند.
- روش بررسیزبان را تغییر دهید و ترتیب، تراز و متن‌های ترکیبی را بررسی کنید.
- وضعیت‌های قابل فهمText + color
- برای موفقیت، خطا و انتخاب، رنگ را با برچسب روشن یا آیکون همراه کنید.
- روش بررسیوضعیت باید بدون رنگ هم قابل فهم باشد.