معرفی

وضعیت: در حال بازبینی

زبان طراحی هارمونیک شیوهٔ دیده‌شدن و شنیده‌شدن همهٔ کارهای هارمونیک است: اسلاید، سند، وب‌سایت، شبکه‌های اجتماعی و محصول. این زبان بر پایهٔ پالت رنگی IBM Design Language، قلم راوی برای فارسی و خانوادهٔ IBM Plex برای لاتین ساخته شده است. فارسی زبان اصلی است و همهٔ چیدمان‌ها راست‌به‌چپ هستند.

برای چه کسانی است

• طراحان که اسلاید، سند یا رابط کاربری طراحی می‌کنند.
• توسعه‌دهندگان که صفحه و محصول وب می‌سازند.
• نویسندگان و مشاوران که متن پیشنهاد، گزارش یا محتوای وب می‌نویسند.

ساختار این سایت

بخش	چه چیزی در آن است
پایه‌ها	تصمیم‌های بنیادی: لوگو، رنگ، نویسه‌نگاری، گرید، فاصله‌گذاری، آیکن، تصویر، مصورسازی داده و حرکت
لحن و نگارش	صدای برند، دو لحن رسمی و گرم، و قواعد نگارش فارسی
کامپوننت‌ها	اجزای رابط کاربری با نمونهٔ زنده، کد و راهنمای دسترس‌پذیری
الگوها	ترکیب کامپوننت‌ها برای کارهای تکرارشونده
برندهای محصول	معماری برند و هویت SOS و ScaleLab
منابع	فایل‌های آمادهٔ استفاده: توکن‌ها، CSS، فونت و لوگو

یک منبع، همه‌جا

همهٔ رنگ‌ها، اندازه‌ها و فاصله‌ها به شکل توکن طراحی در یک جا تعریف شده‌اند. صفحه‌های این سایت، کامپوننت‌ها و هر پروژه‌ای که از فایل‌های بخش منابع استفاده کند، مقدارها را از همین منبع می‌گیرند. اگر یک تصمیم عوض شود، در همهٔ آنها با هم عوض می‌شود.

توکن‌ها دو لایه دارند:

• توکن‌های پایه مقدار خام هستند، مثل cyan-40 یا space-4.
• توکن‌های معنایی نقش را می‌گویند، مثل accent (تنها تاکید صفحه) یا surface (پس‌زمینه). در کار روزمره از توکن معنایی استفاده کنید؛ توکن پایه فقط وقتی که نقش مناسبی وجود ندارد.

استفاده در یک پروژهٔ وب

1. فایل توکن‌ها و استایل کامپوننت‌ها را از منابع به پروژه اضافه کنید.

   <link rel="stylesheet" href="https://design.harmoniq.solutions/dist/tokens.css" />
   <link rel="stylesheet" href="https://design.harmoniq.solutions/dist/components.css" />

2. ریشهٔ صفحه را راست‌به‌چپ کنید: <html lang="fa" dir="rtl">.

3. برای حالت تیره، data-theme="dark" را روی ریشه یا هر بخشی از صفحه بگذارید.

4. در CSS خودتان فقط از متغیرها استفاده کنید، نه مقدار خام:

   .panel { background: var(--hq-surface-alt); color: var(--hq-text); padding: var(--hq-space-4); }

وضعیت صفحه‌ها

بالای هر صفحه وضعیت آن آمده است: پیش‌نویس (هنوز تصمیم نهایی گرفته نشده)، در حال بازبینی (محتوا آماده و منتظر تایید)، پایدار (قابل استفاده در کار واقعی) و منسوخ (جایگزین شده).