نمای کلی کامپوننت‌ها
کامپوننت‌های هارمونیک با HTML و CSS ساده ساخته می‌شوند و به هیچ فریم‌ورکی وابسته نیستند. همهٔ مقدارهایشان از توکن‌ها می‌آید، پس با تغییر یک توکن، همهٔ کامپوننت‌ها با هم به‌روز می‌شوند.
ساختار صفحهٔ هر کامپوننت
Section titled “ساختار صفحهٔ هر کامپوننت”هر صفحه یک نمونهٔ زنده دارد و چهار زبانه:
| زبانه | محتوا |
|---|---|
| کاربرد | چه وقت استفاده کنیم و چه وقت نه، گونه‌ها، باید و نباید |
| سبک | آناتومی، توکن‌های هر بخش، حالت تیره |
| کد | HTML آماده و فهرست کلاس‌ها |
| دسترس‌پذیری | نقش‌ها و ویژگی‌های ARIA، صفحه‌کلید، کنتراست |
| کامپوننت | موج | وضعیت |
|---|---|---|
| دکمه (Button) | ۱ | در حال بازبینی |
| لینک (Link) | ۱ | در حال بازبینی |
| فیلد متنی (Text field) | ۱ | در حال بازبینی |
| چک‌باکس و رادیو | ۱ | در حال بازبینی |
| برچسب (Tag) | از برندبوک و ۱ | در حال بازبینی |
| اعلان (Notification) | ۱ | در حال بازبینی |
| فراخوان (Callout) | از برندبوک | در حال بازبینی |
| کارت (Card) | از برندبوک | در حال بازبینی |
| نشان شماره (Number badge) | از برندبوک | در حال بازبینی |
| آمار (Stat) | از برندبوک | در حال بازبینی |
| نقل‌قول (Pull quote) | از برندبوک | در حال بازبینی |
| نشان باید و نباید (Verdict) | از برندبوک | در حال بازبینی |
| جدول (Table) | ۲ | در حال بازبینی |
| فهرست (List) | از برندبوک و ۳ | در حال بازبینی |
| زبانه (Tabs) | ۲ | پیش‌نویس |
| منو و ناوبری (Menu, Navigation) | ۲ | پیش‌نویس |
| مودال (Modal) | ۲ | پیش‌نویس |
| مسیر صفحه (Breadcrumb) | ۲ | پیش‌نویس |
| صفحه‌بندی (Pagination) | ۲ | پیش‌نویس |
| کلید (Toggle) | ۴ (فرم) | پیش‌نویس |
| جست‌وجو (Search) | ۴ (فرم) | پیش‌نویس |
| انتخاب تاریخ (Date picker) | ۴ (فرم) | پیش‌نویس |
| بارگذاری فایل (File upload) | ۴ (فرم) | پیش‌نویس |
وضعیت «پیش‌نویس» یعنی برندبوک هنوز دربارهٔ آن کامپوننت قاعده‌ای ندارد؛ ظاهرش فقط با توکن‌های موجود پیشنهاد شده و بعد از تایید برند عوض می‌شود. جدول قواعد برندبوک دارد.
الگوهایی مثل فرم کامل، صفحهٔ خدمت، مقاله، داشبورد و صفحهٔ خطا در بخش الگوها آمده‌اند. نمودارهای مفهومی (ماتریس، درخت مساله، فرایند) در نمودارها هستند.