نمای کلی کامپوننت‌ها
کامپوننت‌های هارمونیک با HTML و CSS ساده ساخته می‌شوند و به هیچ فریم‌ورکی وابسته نیستند. همهٔ مقدارهایشان از توکن‌ها می‌آید، پس با تغییر یک توکن، همهٔ کامپوننت‌ها با هم به‌روز می‌شوند.
ساختار صفحهٔ هر کامپوننت
Section titled “ساختار صفحهٔ هر کامپوننت”هر صفحه یک نمونهٔ زنده دارد و چهار زبانه:
| زبانه | محتوا |
|---|---|
| کاربرد | چه وقت استفاده کنیم و چه وقت نه، گونه‌ها، باید و نباید |
| سبک | آناتومی، توکن‌های هر بخش، حالت تیره |
| کد | HTML آماده و فهرست کلاس‌ها |
| دسترس‌پذیری | نقش‌ها و ویژگی‌های ARIA، صفحه‌کلید، کنتراست |
| کامپوننت | موج | وضعیت |
|---|---|---|
| دکمه (Button) | ۱ | در حال بازبینی |
| لینک (Link) | ۱ | در حال بازبینی |
| فیلد متنی (Text field) | ۱ | در حال بازبینی |
| چک‌باکس و رادیو | ۱ | در حال بازبینی |
| برچسب (Tag) | از برندبوک و ۱ | در حال بازبینی |
| اعلان (Notification) | ۱ | در حال بازبینی |
| فراخوان (Callout) | از برندبوک | در حال بازبینی |
| کارت (Card) | از برندبوک | CSS آماده؛ صفحه در راه است |
| نشان شماره (Number badge) | از برندبوک | CSS آماده؛ صفحه در راه است |
| آمار (Stat) | از برندبوک | CSS آماده؛ صفحه در راه است |
| نقل‌قول (Pull quote) | از برندبوک | CSS آماده؛ صفحه در راه است |
| نشان باید و نباید (Verdict) | از برندبوک | CSS آماده؛ صفحه در راه است |
| جدول، تب، منو و ناوبری، مودال، مسیر صفحه (breadcrumb)، صفحه‌بندی | ۲ | برنامه‌ریزی شده |
الگوهایی مثل فرم کامل، سربرگ و پابرگ و صفحهٔ خطا در بخش الگوها می‌آیند.