نمای کلی الگوها
وضعیت: پیش‌نویس
الگو یعنی راه‌حل پیشنهادی برای یک کار تکرارشونده، ساخته‌شده از چند کامپوننت. کامپوننت می‌گوید یک دکمه چه شکلی است؛ الگو می‌گوید یک فرم کامل چطور چیده می‌شود، پیام خطا کجا می‌آید و دکمهٔ اصلی کجا می‌نشیند.
همهٔ الگوها از کامپوننت‌ها و توکن‌های همین سایت ساخته شده‌اند و چیز تازه‌ای به ظاهر برند اضافه نمی‌کنند. چون برندبوک دربارهٔ صفحه‌های وب قاعدهٔ جداگانه‌ای ندارد، همه پیش‌نویس‌اند تا تایید شوند. عددها و نام‌های نمونه‌ها نمایشی‌اند.
| الگو | کاربرد | ساخته از |
|---|---|---|
| صفحهٔ معرفی خدمت | معرفی یک حوزهٔ خدمت یا محصول | سربرگ صفحه، کارت، آمار، نقل‌قول، فرایند |
| فرم | تماس، درخواست جلسه، ثبت‌نام رویداد | فیلدها، انتخاب تاریخ، بارگذاری فایل، اعلان |
| مقاله | بینش، گزارش، خبر | تایپوگرافی، نقل‌قول، نمودار، قاب عکس |
| داشبورد | گزارش پیشرفت پروژه و شاخص‌ها برای مشتری | کارت KPI، نمودار، جدول، جست‌وجو، فیلتر |
| حالت‌ها | خالی، خطا (۴۰۴ و ۵۰۰)، در حال بارگذاری | آیکن، دکمه، اسکلت |
قاعده‌های مشترک
Section titled “قاعده‌های مشترک”- یک کار اصلی در هر صفحه. فقط یک دکمهٔ اصلی (
hq-button) در هر بخش دیده می‌شود؛ بقیه ثانویه یا شبح‌اند. - فاصله از توکن‌ها. بین بخش‌های صفحه
space-8تاspace-12، داخل بخشspace-3تاspace-4. - زمینه‌ها کم و معنادار. صفحه سفید است؛ بخش‌های جایگزین
surface-altو فقط سربرگ یا دعوت پایانی سرمه‌ای. قواعد زمینه در تصویر و گرافیک. - متن. عنوان‌ها نتیجه یا پیشنهاد را می‌گویند، نه موضوع را؛ قواعد لحن و نگارش برای همهٔ متن‌ها.