# HarmoniQ slide guide

Version 0.9.0 · 2026-11-04 · generated from https://design.harmoniq.solutions (tokens and docs). Do not edit; regenerate with `npm run ai`.

This file is the HarmoniQ design language for anyone — person or AI assistant — making slides. It is complete: colors, type, grid, the 65-template library, voice, Persian writing rules and chart rules. When a rule here conflicts with a general habit, this file wins. Persian sections are quoted from the site as written.

## 1. How to build a HarmoniQ slide

1. One message per slide; the title states the finding (an action title).
2. Pick the template by content (section 5, "کدام قالب؟"), then copy its HTML (`templates/<code>.html`, or https://design.harmoniq.solutions/dist/ai/templates/<code>.txt) and replace text and images only. Layout, positions, sizes, colors and the right-to-left order stay as they are.
3. Canvas 1920×1080 px; the 12-column grid starts at the right. In PowerPoint/Keynote 1 pt = 2 px.
4. Fonts: Ravi (Regular, Bold, Black) for Persian; IBM Plex Serif Bold for the pale Latin ghost title; Arial only for the footer's Latin line. Ravi files: https://design.harmoniq.solutions/fonts/ravi/Ravi-<Weight>.woff2 (web) and https://design.harmoniq.solutions/fonts/ravi/ttf/Ravi-<Weight>.ttf (PowerPoint, Keynote), all eight weights in https://design.harmoniq.solutions/dist/fonts/harmoniq-fonts.zip. HarmoniQ holds an unrestricted licence.
5. Only colors from section 3. One accent per slide.
6. Persian text: right-aligned, never letter-spaced; Persian digits; a right-to-left mark (`&#8207;`) after trailing punctuation.
7. Footer on every content slide: small logo bottom-left, "|    All rights reserved.    © 2026" next to it, page number bottom-right (the template code shown there is for finding templates and is removed in a final deck).

## 2. Brand

- Name: «هارمونیک» in Persian text, "HarmoniQ" in English. Products SOS and ScaleLab are always written in Latin.
- Tagline: «ایستاده بر آغاز.» (Standing at the start.) · Promise: «تا نتیجه، کنار شما.» · Invitation: «برای تحول آماده‌اید؟»
- Logo: primary on white and light grounds, reversed on dark navy, mono versions for one-color use. Never recolor, stretch, rotate, add effects, or place the primary logo on a dark or busy ground. Minimum width 80 px (20 mm in print). Details: https://design.harmoniq.solutions/foundations/logo/

## 3. Colors

Semantic roles (use these names when you reason; write the hex in slides):

| Token | Light | Dark | Role |
|---|---|---|---|
| `surface` | #FFFFFF | #061727 | پس‌زمینهٔ پیش‌فرض صفحه. در حالت تیره Cyan 100، سرمه‌ای عمیق برند. |
| `surface-alt` | #F2F4F8 | #012749 | پس‌زمینهٔ جایگزین برای بخش‌ها و پنل‌ها (Cool Gray 10). در حالت تیره Cyan 90. |
| `surface-raised` | #FFFFFF | #012749 | کارت‌ها و کاشی‌ها. در حالت روشن، کارت سفید با خط مرزی روی surface-alt. |
| `surface-inverse` | #061727 | #FFFFFF | بلوک معکوس: پنل سرمه‌ای روی صفحهٔ روشن، مثل جمع‌بندی یا کارت برگزیده. |
| `field` | #FFFFFF | #012749 | زمینهٔ فیلدهای فرم. |
| `ink` | #012749 | #FFFFFF | تیترها، عنوان‌ها، عددهای کلیدی و برچسب‌های مهم. |
| `text` | #343A3F | #DDE1E6 | متن اصلی روی همهٔ سطح‌ها. |
| `text-secondary` | #697077 | #C1C7CD | زیرعنوان، توضیح و متن با اهمیت کمتر. |
| `text-muted` | #878D96 | #A2A9B0 | فقط زیرنویس، منبع و پانویس. در حالت روشن کنتراست ۳٫۴:۱ دارد و برای متن ضروری مناسب نیست. |
| `text-on-inverse` | #FFFFFF | #061727 | متن روی surface-inverse. |
| `border` | #DDE1E6 | #003A6D | خط‌های مویی، دور کارت و خط‌های جدول. |
| `border-strong` | #C1C7CD | #00539A | خط زیر سرستون جدول و جداکننده‌هایی که وزن بیشتری لازم دارند. |
| `border-control` | #878D96 | #878D96 | خط دور کنترل‌های فرم (فیلد، چک‌باکس، رادیو). دست‌کم ۳:۱ با زمینه، طبق WCAG برای اجزای رابط. |
| `brand` | #33B1FF | #33B1FF | فیروزه‌ای امضای هارمونیک: Q لوگو، موج و عددها روی زمینهٔ تیره. روی سفید فقط پرکننده یا متن ۲۴ پیکسل و بزرگ‌تر. |
| `brand-deep` | #061727 | #061727 | رنگ لوگو و شروع گرادیان تیرهٔ برند. هرگز تغییر نمی‌کند. |
| `accent` | #0F62FE | #78A9FF | تنها تاکید در هر صفحه: لینک، سری برجسته، مرحلهٔ جاری یا واژهٔ کلیدی. |
| `accent-subtle` | #EDF5FF | #001D6C | پس‌زمینهٔ کارت برجسته، مرحلهٔ جاری یا ردیف انتخاب‌شده. |
| `on-accent` | #FFFFFF | #061727 | متن روی پرکنندهٔ accent. |
| `focus` | #0F62FE | #33B1FF | حلقهٔ فوکوس: ۲ پیکسل توپر با فاصلهٔ ۲ پیکسل. |
| `accent-hover` | #0043CE | #A6C8FF | رنگ accent هنگام قرار گرفتن نشانگر روی دکمه یا لینک. |
| `accent-active` | #002D9C | #D0E2FF | رنگ accent هنگام فشردن. |
| `disabled` | #DDE1E6 | #003A6D | پرکنندهٔ کنترل غیرفعال. |
| `on-disabled` | #878D96 | #A2A9B0 | متن کنترل غیرفعال. کنتراست کم عمدی است؛ کنترل غیرفعال قابل استفاده نیست. |
| `positive` | #005D5D | #08BDBA | وضعیت مثبت و نشان «انجام بده». سبزآبی به جای سبز. همیشه همراه واژه یا آیکن. |
| `positive-subtle` | #D9FBFB | #022B30 | پس‌زمینهٔ برچسب‌ها و فراخوان‌های مثبت. |
| `warning` | #F1C21B | #F1C21B | نشان‌ها و پرکننده‌های هشدار. هرگز رنگ متن روی سفید نیست (۱٫۷:۱)؛ روی آن از ink استفاده کنید. |
| `warning-subtle` | #FCF4D6 | #302400 | پس‌زمینهٔ اعلان‌ها و فراخوان‌های هشدار. |
| `negative` | #DA1E28 | #FF8389 | وضعیت منفی، نشان «انجام نده» و فراخوان‌های ریسک. همیشه همراه واژه یا آیکن. |
| `negative-hover` | #A2191F | #FFB3B8 | رنگ negative هنگام قرار گرفتن نشانگر روی دکمهٔ خطرناک. |
| `on-negative` | #FFFFFF | #061727 | متن روی پرکنندهٔ negative. |
| `negative-subtle` | #FFF1F1 | #520408 | پس‌زمینهٔ برچسب‌ها و فراخوان‌های منفی. |
| `info` | #0F62FE | #78A9FF | وضعیت اطلاع‌رسانی. |
| `info-subtle` | #EDF5FF | #001D6C | پس‌زمینهٔ اعلان‌های اطلاع‌رسانی. |
| `neutral-status` | #878D96 | #A2A9B0 | نشان وضعیت خنثی یا بدون تغییر. |
| `chart-1` | #1192E8 | #1192E8 | سری ۱ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت. |
| `chart-2` | #B28600 | #B28600 | سری ۲ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت. |
| `chart-3` | #0F62FE | #0F62FE | سری ۳ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت. |
| `chart-4` | #009D9A | #009D9A | سری ۴ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت. |
| `chart-5` | #8A3FFC | #8A3FFC | سری ۵ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت. |
| `chart-other` | #C1C7CD | #C1C7CD | سری «سایر»، داده‌های کم‌اهمیت و زمینه. |
| `chart-seq-1` | #33B1FF | #33B1FF | گام ۱ از ۶ در طیف ترتیبی (Cyan 40 تا 90). |
| `chart-seq-2` | #1192E8 | #1192E8 | گام ۲ از ۶ در طیف ترتیبی (Cyan 40 تا 90). |
| `chart-seq-3` | #0072C3 | #0072C3 | گام ۳ از ۶ در طیف ترتیبی (Cyan 40 تا 90). |
| `chart-seq-4` | #00539A | #00539A | گام ۴ از ۶ در طیف ترتیبی (Cyan 40 تا 90). |
| `chart-seq-5` | #003A6D | #003A6D | گام ۵ از ۶ در طیف ترتیبی (Cyan 40 تا 90). |
| `chart-seq-6` | #012749 | #012749 | گام ۶ از ۶ در طیف ترتیبی (Cyan 40 تا 90). |
| `sos-field` | #DA1E28 | #DA1E28 | زمینهٔ امضای SOS، فقط در صفحه‌های تمام‌عرض محصول. |
| `sos-ink` | #FFFFFF | #FFFFFF | متن روی sos-field (۵:۱). |
| `scalelab-field` | #33B1FF | #33B1FF | زمینهٔ امضای ScaleLab، فقط در صفحه‌های تمام‌عرض محصول. |
| `scalelab-ink` | #061727 | #061727 | متن روی scalelab-field (۷٫۷:۱). متن سفید روی Cyan 40 مردود است (۲٫۴:۱). |

Full palette (IBM colors):

| Token | Hex | Note |
|---|---|---|
| `white` | #FFFFFF | سفید. |
| `black` | #000000 | سیاه خالص؛ فقط برای چاپ و سند تک‌رنگ، مثل نسخهٔ سیاه لوگو و آیکن‌ها. |
| `cyan-10` | #E5F6FF | خانوادهٔ اصلی (برند). IBM Cyan 10. |
| `cyan-20` | #BAE6FF | خانوادهٔ اصلی (برند). IBM Cyan 20. |
| `cyan-30` | #82CFFF | خانوادهٔ اصلی (برند). IBM Cyan 30. |
| `cyan-40` | #33B1FF | خانوادهٔ اصلی (برند). IBM Cyan 40. |
| `cyan-50` | #1192E8 | خانوادهٔ اصلی (برند). IBM Cyan 50. |
| `cyan-60` | #0072C3 | خانوادهٔ اصلی (برند). IBM Cyan 60. |
| `cyan-70` | #00539A | خانوادهٔ اصلی (برند). IBM Cyan 70. |
| `cyan-80` | #003A6D | خانوادهٔ اصلی (برند). IBM Cyan 80. |
| `cyan-90` | #012749 | خانوادهٔ اصلی (برند). IBM Cyan 90. |
| `cyan-100` | #061727 | خانوادهٔ اصلی (برند). IBM Cyan 100. |
| `blue-10` | #EDF5FF | خانوادهٔ تاکید. IBM Blue 10. |
| `blue-20` | #D0E2FF | خانوادهٔ تاکید. IBM Blue 20. |
| `blue-30` | #A6C8FF | خانوادهٔ تاکید. IBM Blue 30. |
| `blue-40` | #78A9FF | خانوادهٔ تاکید. IBM Blue 40. |
| `blue-50` | #4589FF | خانوادهٔ تاکید. IBM Blue 50. |
| `blue-60` | #0F62FE | خانوادهٔ تاکید. IBM Blue 60. |
| `blue-70` | #0043CE | خانوادهٔ تاکید. IBM Blue 70. |
| `blue-80` | #002D9C | خانوادهٔ تاکید. IBM Blue 80. |
| `blue-90` | #001D6C | خانوادهٔ تاکید. IBM Blue 90. |
| `blue-100` | #001141 | خانوادهٔ تاکید. IBM Blue 100. |
| `gray-10` | #F2F4F8 | خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 10. |
| `gray-20` | #DDE1E6 | خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 20. |
| `gray-30` | #C1C7CD | خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 30. |
| `gray-40` | #A2A9B0 | خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 40. |
| `gray-50` | #878D96 | خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 50. |
| `gray-60` | #697077 | خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 60. |
| `gray-70` | #4D5358 | خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 70. |
| `gray-80` | #343A3F | خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 80. |
| `gray-90` | #21272A | خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 90. |
| `gray-100` | #121619 | خانوادهٔ خنثی (IBM Cool Gray). IBM Cool Gray 100. |
| `red-10` | #FFF1F1 | کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 10. |
| `red-20` | #FFD7D9 | کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 20. |
| `red-30` | #FFB3B8 | کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 30. |
| `red-40` | #FF8389 | کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 40. |
| `red-50` | #FA4D56 | کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 50. |
| `red-60` | #DA1E28 | کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 60. |
| `red-70` | #A2191F | کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 70. |
| `red-80` | #750E13 | کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 80. |
| `red-90` | #520408 | کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 90. |
| `red-100` | #2D0709 | کاربرد محدود: وضعیت منفی و رنگ امضای SOS. IBM Red 100. |
| `teal-10` | #D9FBFB | کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 10. |
| `teal-20` | #9EF0F0 | کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 20. |
| `teal-30` | #3DDBD9 | کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 30. |
| `teal-40` | #08BDBA | کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 40. |
| `teal-50` | #009D9A | کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 50. |
| `teal-60` | #007D79 | کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 60. |
| `teal-70` | #005D5D | کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 70. |
| `teal-80` | #004144 | کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 80. |
| `teal-90` | #022B30 | کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 90. |
| `teal-100` | #081A1C | کاربرد محدود، به جای سبز: وضعیت مثبت و نمودار. IBM Teal 100. |
| `yellow-10` | #FCF4D6 | کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 10. |
| `yellow-20` | #FDDC69 | کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 20. |
| `yellow-30` | #F1C21B | کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 30. |
| `yellow-40` | #D2A106 | کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 40. |
| `yellow-50` | #B28600 | کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 50. |
| `yellow-60` | #8E6A00 | کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 60. |
| `yellow-70` | #684E00 | کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 70. |
| `yellow-80` | #483700 | کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 80. |
| `yellow-90` | #302400 | کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 90. |
| `yellow-100` | #1C1500 | کاربرد محدود: وضعیت هشدار و نمودار. IBM Yellow 100. |
| `purple-10` | #F6F2FF | کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 10. |
| `purple-20` | #E8DAFF | کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 20. |
| `purple-30` | #D4BBFF | کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 30. |
| `purple-40` | #BE95FF | کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 40. |
| `purple-50` | #A56EFF | کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 50. |
| `purple-60` | #8A3FFC | کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 60. |
| `purple-70` | #6929C4 | کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 70. |
| `purple-80` | #491D8B | کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 80. |
| `purple-90` | #31135E | کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 90. |
| `purple-100` | #1C0F30 | کاربرد محدود: فقط سری پنجم نمودار. IBM Purple 100. |

## 4. Type and grid

Slide type scale (px on the 1920×1080 canvas):

| Style | Size | Line height | Weight |
|---|---|---|---|
| `slide-display` | 100px | 120px | 700 |
| `slide-stat` | 86px | 92px | 900 |
| `slide-title` | 66px | 82px | 700 |
| `slide-heading` | 32px | 44px | 700 |
| `slide-lead` | 32px | 52px | 400 |
| `slide-body` | 24px | 40px | 400 |
| `slide-small` | 20px | 34px | 400 |
| `slide-caption` | 16px | 26px | 400 |

Slide grid:

| Token | Value |
|---|---|
| `grid-slide-columns` | 12 |
| `grid-slide-column` | 100px |
| `grid-slide-gutter` | 48px |
| `grid-slide-margin` | 96px |
| `grid-slide-content-top` | 264px |

## اسلاید

قاعده‌های اسلاید از برندبوک آمده‌اند. کتابخانهٔ قالب‌ها دو نسخه دارد که یکی‌اند: فایل پاورپوینت برندبوک (`HarmoniQ-Brandbook-Slide-Templates.pptx`) و عرشهٔ **«قالب اسلاید هارمونیک»** در Claude Slides. هر قالب یک کد دارد (مثلا `L04`) که در پابرگ اسلاید و در جدول‌های همین صفحه آمده است.

### بوم و گرید

- **بوم:** ۱۹۲۰×۱۰۸۰ پیکسل. در پاورپوینت و کی‌نوت، هر پوینت برابر دو پیکسل است (عنوان ۶۶ پیکسل = ۳۳ پوینت).
- **گرید:** ۱۲ ستون ۱۰۰ پیکسلی با فاصلهٔ ۴۸ و حاشیهٔ ۹۶؛ محتوا از ۲۶۴ پیکسل شروع می‌شود و تا ۹۵۳ ادامه دارد. اولین ستون سمت راست است. [جزییات گرید](https://design.harmoniq.solutions/foundations/grid/)
- **سربرگ اسلاید:** عنوان فارسی بالا راست با `slide-title` و رنگ `ink`؛ عنوان لاتین کم‌رنگ بالا چپ با IBM Plex Serif؛ زیرعنوان در ۲۰ پیکسل زیر عنوان.
- **پابرگ:** لوگوی کوچک و «All rights reserved. © 2026» پایین چپ، کد قالب و شمارهٔ صفحه پایین راست. کد قالب فقط برای پیدا کردن قالب است و در ارایهٔ نهایی پاک می‌شود.
- **متن:** سبک‌های `slide-*`. [مقیاس نویسه‌نگاری](https://design.harmoniq.solutions/foundations/typography/)

### کدام قالب؟

| محتوا | قالب |
|---|---|
| یک عدد مهم است | N01 · N06 |
| چند عدد یا شاخص | N02 · N03 · N04 |
| فهرست یا توضیح متنی | L01 · L02 · L10 |
| دو یا چند موضوع هم‌وزن | L03 · L06 · L07 · C01 |
| یک موضوع اصلی و چند فرعی | L04 · L08 · L09 |
| خدمت، مزیت، ویژگی | C02 · C05 · C07 |
| گزینه‌ها و پیشنهاد | C06 · P03 |
| یک تصویر قوی | M01 · M03 · M07 |
| چند تصویر | G01 تا G06 |
| حرف مشتری یا مصاحبه | Q01 تا Q04 |
| یک جملهٔ کلیدی | H01 · H02 · H05 |
| زمان، فرایند، ساختار | P01 · P02 · P08 |

### همیشه

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


## 5. Template library

Every template, its use, and its layout note. The HTML files are in Claude Slides section format.

### D · جلد، دیوایدر و پایان

| Code | Template | Use for | Layout note | HTML |
|---|---|---|---|---|
| D01 | جلد تیره | جلد پروپوزال، گزارش و ارایهٔ رسمی | D01 جلد تیره: جلد پروپوزال، گزارش و ارایهٔ رسمی. زمینهٔ سرمه‌ای با موج، لوگوی معکوس بالا راست. عنوان کامل و کنشی؛ زیرعنوان نوع سند و مرحله؛ پایین تاریخ و سطح محرمانگی. | `templates/d01.html` · https://design.harmoniq.solutions/dist/ai/templates/d01.txt |
| D02 | جلد روشن | گزارش‌های چاپی و اسناد طولانی | D02 جلد روشن: گزارش‌های چاپی و اسناد طولانی. زمینهٔ سفید با موج Cyan 20، لوگوی اصلی بالا راست، عنوان در نیمهٔ پایین. | `templates/d02.html` · https://design.harmoniq.solutions/dist/ai/templates/d02.txt |
| D03 | جلد با Q | اسناد معرفی شرکت و رویدادها | D03 جلد با Q: اسناد معرفی شرکت و رویدادها. گرافیک Q بزرگ و بریده‌شده روی گرادیان سرمه‌ای؛ یک Q در هر اسلاید و هرگز همراه موج. | `templates/d03.html` · https://design.harmoniq.solutions/dist/ai/templates/d03.txt |
| D04 | دیوایدر اصلی (بخش) | شروع هر بخش اصلی؛ ارایهٔ کمتر از ۱۵ اسلاید فقط همین را لازم دارد | D04 دیوایدر اصلی: شروع هر بخش اصلی سند. زمینهٔ تیره با موج، عنوان ۱۰۰ پیکسل وسط‌چین، کیکر «بخش ۲» بالا و عنوان لاتین زیر آن. شماره‌گذاری: بخش با عدد صحیح (۲)، زیربخش با یک ممیز (۲٫۱)، سرفصل با دو ممیز (۲٫۱٫۱). ارایه‌های کمتر از ۱۵ اسلاید فقط D04 لازم دارند. | `templates/d04.html` · https://design.harmoniq.solutions/dist/ai/templates/d04.txt |
| D05 | ساب‌دیوایدر سطح ۱ | زیربخش‌های یک بخش اصلی (۲٫۱) | D05 ساب‌دیوایدر سطح ۱: زیربخش‌های یک بخش اصلی. زمینهٔ خاکستری با موج؛ شمارهٔ ۲٫۱ با راوی Black در Cyan 40؛ عنوان ۸۰ پیکسل و یک جملهٔ توضیح. | `templates/d05.html` · https://design.harmoniq.solutions/dist/ai/templates/d05.txt |
| D06 | ساب‌دیوایدر سطح ۲ | سرفصل‌های داخل یک زیربخش (۲٫۱٫۱) | D06 ساب‌دیوایدر سطح ۲: سرفصل‌های داخل یک زیربخش. زمینهٔ سفید؛ مسیر بخش بالای عنوان، عنوان ۶۰ پیکسل و میلهٔ Cyan 40 در سمت راست. | `templates/d06.html` · https://design.harmoniq.solutions/dist/ai/templates/d06.txt |
| D07 | فهرست مطالب | اسناد بیش از ۱۵ اسلاید | D07 فهرست مطالب: برای اسناد بیش از ۱۵ اسلاید. شمارهٔ بخش با راوی Black در Cyan 40، عنوان بخش و شمارهٔ صفحه. تصویر عمودی سمت چپ اختیاری است. | `templates/d07.html` · https://design.harmoniq.solutions/dist/ai/templates/d07.txt |
| D08 | پایان و دعوت | آخرین اسلاید ارایه و پروپوزال | D08 پایان و دعوت: آخرین اسلاید ارایه و پروپوزال. جملهٔ پایانی ثابت «برای تحول آماده‌اید؟» با ایمیل و نشانی وب. | `templates/d08.html` · https://design.harmoniq.solutions/dist/ai/templates/d08.txt |
| D09 | اطلاعات تماس | پیش از اسلاید پایان در پروپوزال‌ها | D09 اطلاعات تماس: پیش از اسلاید پایان در پروپوزال‌ها. تلفن و نشانی همان سربرگ رسمی‌اند؛ اگر عوض شدند، هر دو جا را با هم به‌روز کنید. دایرهٔ Blue 10 جای آیکن Carbon است. | `templates/d09.html` · https://design.harmoniq.solutions/dist/ai/templates/d09.txt |

### L · چیدمان متن

| Code | Template | Use for | Layout note | HTML |
|---|---|---|---|---|
| L01 | تک‌ستون | متن کوتاه یا یک فهرست، وقتی محتوا تقسیم‌پذیر نیست | L01 تک‌ستون: متن کوتاه یا یک فهرست؛ وقتی محتوا تقسیم‌پذیر نیست. یک جملهٔ سرآغاز، فهرست چهار موردی و یک جملهٔ جمع‌بندی زیر خط. | `templates/l01.html` · https://design.harmoniq.solutions/dist/ai/templates/l01.txt |
| L02 | ستون خواندنی | متن بلندتر؛ عرض ۸ ستون خوانا می‌ماند | L02 ستون خواندنی: متن بلندتر؛ عرض ۸ ستون خوانا می‌ماند و ۴ ستون چپ برای یادداشت کناری یا خالی است. | `templates/l02.html` · https://design.harmoniq.solutions/dist/ai/templates/l02.txt |
| L03 | دوستون ۶|۶ | دو موضوع هم‌وزن، دو گروه، دو حالت | L03 دوستون ۶·۶: دو موضوع هم‌وزن، دو گروه یا دو حالت. خط زیر عنوان ستون مطلوب Blue 60 است و ستون موجود Cool Gray 40؛ همین تنها تاکید رنگی اسلاید است. | `templates/l03.html` · https://design.harmoniq.solutions/dist/ai/templates/l03.txt |
| L04 | دوستون ۸|۴ | توضیح اصلی و نکتهٔ کلیدی، عدد یا جمع‌بندی | L04 دوستون ۸·۴: توضیح اصلی در ۸ ستون و نکتهٔ کلیدی، عدد یا جمع‌بندی در کارت سرمه‌ای ۴ستونه. | `templates/l04.html` · https://design.harmoniq.solutions/dist/ai/templates/l04.txt |
| L05 | عنوان کناری ۴|۸ | اسلایدهای متنی با عنوان بلند یا پرسشی | L05 عنوان کناری ۴·۸: اسلایدهای متنی با عنوان بلند یا پرسشی. عنوان در ۴ ستون راست و متن در ۸ ستون چپ، هر دو از بالای صفحه. | `templates/l05.html` · https://design.harmoniq.solutions/dist/ai/templates/l05.txt |
| L06 | سه‌ستون ۴|۴|۴ | سه موضوع هم‌سطح | L06 سه‌ستون ۴·۴·۴: سه موضوع هم‌سطح، سه گزینه یا سه مرحله. شمارهٔ هر ستون با IBM Plex Serif در Cyan 40. | `templates/l06.html` · https://design.harmoniq.solutions/dist/ai/templates/l06.txt |
| L07 | چهارستون ۳|۳|۳|۳ | چهار مورد کوتاه، مثل مراحل 4D | L07 چهارستون ۳·۳·۳·۳: چهار مورد کوتاه، مثل مراحل 4D (کشف، طراحی، تحویل، استقرار). نوار بالای هر ستون از روشن به تیره در طیف Cyan، از راست به چپ. | `templates/l07.html` · https://design.harmoniq.solutions/dist/ai/templates/l07.txt |
| L08 | ترکیبی ۶|۳|۳ | یک مورد مهم‌تر از بقیه | L08 ترکیبی ۶·۳·۳: یک مورد مهم‌تر از بقیه. پیام اصلی در کارت سفید ۶ستونه، دو موضوع فرعی در دو ستون ۳تایی. | `templates/l08.html` · https://design.harmoniq.solutions/dist/ai/templates/l08.txt |
| L09 | ردیف سرآغاز و سه‌ستون | جملهٔ کلیدی با سه پشتوانه | L09 ردیف سرآغاز و سه‌ستون: جملهٔ کلیدی با سه پشتوانه. هر ستون یک عدد کوتاه در Blue 60 دارد؛ عددها باید واقعی و منبع‌دار باشند. | `templates/l09.html` · https://design.harmoniq.solutions/dist/ai/templates/l09.txt |
| L10 | نامتقارن ۵|۷ | فهرست کوتاه و توضیح بلند | L10 نامتقارن ۵·۷: فهرست کوتاه شماره‌دار در ۵ ستون راست و توضیح بلند در کارت ۷ستونه. نشان شماره دایرهٔ ink با رقم فارسی سفید است. | `templates/l10.html` · https://design.harmoniq.solutions/dist/ai/templates/l10.txt |

### M · متن و تصویر

| Code | Template | Use for | Layout note | HTML |
|---|---|---|---|---|
| M01 | تصویر نیمه‌صفحه راست | معرفی موضوع با تصویر قوی | M01 تصویر نیمه‌صفحه راست: معرفی موضوع با تصویر قوی. عکس واقعی از کار هارمونیک تا لبهٔ صفحه؛ عنوان و متن در نیمهٔ چپ. برچسب کد این قالب M01 است. | `templates/m01.html` · https://design.harmoniq.solutions/dist/ai/templates/m01.txt |
| M02 | تصویر نیمه‌صفحه چپ | مثل M01، برای تنوع در توالی اسلایدها | M02 تصویر نیمه‌صفحه چپ: مثل M01؛ برای تنوع در توالی اسلایدها. وقتی تصویر سمت چپ است، پابرگ لوگو روی تصویر نمی‌آید. | `templates/m02.html` · https://design.harmoniq.solutions/dist/ai/templates/m02.txt |
| M03 | تصویر تمام‌صفحه با متن | شروع داستان یا اسلاید احساسی؛ متن روی لایهٔ تیره | M03 تصویر تمام‌صفحه با متن: شروع داستان یا اسلاید احساسی. متن روی عکس همیشه روی لایهٔ brand-deep با پوشش حدود ۷۵٪ (طبق برندبوک). یادداشت: فایل قالب پاورپوینت روی این لایه «۲۵٪ شفافیت» نوشته که همان ۷۵٪ پوشش است. | `templates/m03.html` · https://design.harmoniq.solutions/dist/ai/templates/m03.txt |
| M04 | ستون تصویر ۴|۸ | متن مفصل با یک تصویر پشتیبان | M04 ستون تصویر ۴·۸: متن مفصل با یک تصویر پشتیبان. تصویر عمودی با گوشهٔ radius-md (۱۶ پیکسل) در ۴ ستون چپ. | `templates/m04.html` · https://design.harmoniq.solutions/dist/ai/templates/m04.txt |
| M05 | بنر تصویر و سه‌ستون | معرفی پروژه، رویداد یا مکان | M05 بنر تصویر و سه‌ستون: معرفی پروژه، رویداد یا مکان. نوار تصویر پهن (حدود ۲۱:۹) بالای سه ستون چالش، رویکرد و نتیجه. | `templates/m05.html` · https://design.harmoniq.solutions/dist/ai/templates/m05.txt |
| M06 | تصویر قاب‌دار و فهرست | اسلایدهای راهکار و خدمات | M06 تصویر قاب‌دار و فهرست: اسلایدهای راهکار و خدمات، به سبک Credentials. یک تصویر پهن و دو تصویر کوچک قاب‌دار در ۶ ستون چپ، متن و فهرست در ۶ ستون راست. | `templates/m06.html` · https://design.harmoniq.solutions/dist/ai/templates/m06.txt |
| M07 | تصویر روی کارت | نمایش یک خروجی، محصول یا لحظه | M07 تصویر روی کارت: نمایش یک خروجی، محصول یا لحظه. یک تصویر بزرگ ۱۶:۹ با زیرنویس در ستون باریک چپ. | `templates/m07.html` · https://design.harmoniq.solutions/dist/ai/templates/m07.txt |

### G · گالری

| Code | Template | Use for | Layout note | HTML |
|---|---|---|---|---|
| G01 | گالری سه‌تایی | سه لحظه، سه پروژه، سه محصول | G01 گالری سه‌تایی: سه لحظه، سه پروژه یا سه محصول. تصاویر هم‌اندازه با گوشهٔ ۱۶ پیکسل و یک زیرنویس کوتاه. | `templates/g01.html` · https://design.harmoniq.solutions/dist/ai/templates/g01.txt |
| G02 | گالری ۲×۲ | چند تصویر هم‌وزن با توضیح کلی | G02 گالری ۲×۲: چند تصویر هم‌وزن با توضیح کلی در ستون راست. | `templates/g02.html` · https://design.harmoniq.solutions/dist/ai/templates/g02.txt |
| G03 | گالری موزاییک | یک تصویر شاخص با تصاویر پشتیبان | G03 گالری موزاییک: یک تصویر شاخص در ۶ ستون راست با چهار تصویر پشتیبان در سمت چپ. | `templates/g03.html` · https://design.harmoniq.solutions/dist/ai/templates/g03.txt |
| G04 | گالری شش‌تایی | مستندسازی رویداد یا کارگاه | G04 گالری شش‌تایی: مستندسازی رویداد یا کارگاه؛ شبکهٔ ۳×۲ با برچسب سفید روی هر تصویر. برای عکس، جای زمینهٔ خاکستری هر خانه را با تصویر عوض کنید. | `templates/g04.html` · https://design.harmoniq.solutions/dist/ai/templates/g04.txt |
| G05 | تیم | معرفی تیم پروژه یا راهبران | G05 تیم: معرفی تیم پروژه یا راهبران. عکس پرسنلی فقط با رضایت فرد؛ نام و نقش زیر هر عکس. | `templates/g05.html` · https://design.harmoniq.solutions/dist/ai/templates/g05.txt |
| G06 | پیش و پس (تصویری) | نمایش تغییر فیزیکی یا بصری | G06 پیش و پس: نمایش تغییر فیزیکی یا بصری. برچسب «پس» با Blue 60، تنها تاکید رنگی اسلاید. جای دو خانهٔ خاکستری عکس بگذارید و برچسب‌ها را روی عکس نگه دارید. | `templates/g06.html` · https://design.harmoniq.solutions/dist/ai/templates/g06.txt |

### Q · نقل‌قول

| Code | Template | Use for | Layout note | HTML |
|---|---|---|---|---|
| Q01 | نقل‌قول بزرگ | یک جملهٔ کلیدی از مشتری، مدیر یا مصاحبه | Q01 نقل‌قول بزرگ: یک جملهٔ کلیدی از مشتری، مدیر یا مصاحبه روی گرادیان سرمه‌ای. فقط حرف واقعی با نام و رضایت گوینده؛ متن نمونه را با نقل‌قول واقعی عوض کنید. | `templates/q01.html` · https://design.harmoniq.solutions/dist/ai/templates/q01.txt |
| Q02 | نقل‌قول با تصویر | توصیه‌نامه با چهرهٔ گوینده | Q02 نقل‌قول با تصویر: توصیه‌نامه با چهرهٔ گوینده. عکس فقط با رضایت؛ نام و سمت زیر خط کوتاه Blue 60. | `templates/q02.html` · https://design.harmoniq.solutions/dist/ai/templates/q02.txt |
| Q03 | سه توصیه‌نامه | صفحهٔ اعتبار در پروپوزال و وب | Q03 سه توصیه‌نامه: صفحهٔ اعتبار در پروپوزال و وب. هر کارت یک جملهٔ کوتاه واقعی، نام و سمت گوینده و جای عکس گرد. | `templates/q03.html` · https://design.harmoniq.solutions/dist/ai/templates/q03.txt |
| Q04 | نقل‌قول درون‌متنی | گزارش‌ها؛ شاهد کیفی از مصاحبه کنار تحلیل | Q04 نقل‌قول درون‌متنی: گزارش‌ها؛ شاهد کیفی از مصاحبه کنار تحلیل. میلهٔ Cyan 40 بین نقل‌قول و متن؛ نقش و موقعیت گوینده بدون نام. | `templates/q04.html` · https://design.harmoniq.solutions/dist/ai/templates/q04.txt |

### N · عدد و آمار

| Code | Template | Use for | Layout note | HTML |
|---|---|---|---|---|
| N01 | عدد قهرمان | یک عدد که کل پیام اسلاید است | N01 عدد قهرمان: یک عدد که کل پیام اسلاید است. عدد با راوی Black در Blue 60، توضیح یک‌خطی زیر آن و منبع همیشه زیر عدد. عدد نمونه است؛ عدد واقعی و منبع‌دار بگذارید. | `templates/n01.html` · https://design.harmoniq.solutions/dist/ai/templates/n01.txt |
| N02 | سه عدد | نتایج پروژه یا کارنامه | N02 سه عدد: نتایج پروژه یا کارنامه. سه عدد هم‌وزن با خط Blue 60 بالای هر کدام. عددها نمونه‌اند؛ با منبع جایگزین کنید. | `templates/n02.html` · https://design.harmoniq.solutions/dist/ai/templates/n02.txt |
| N03 | شبکهٔ شش عدد | کارنامهٔ شرکت در معرفی | N03 شبکهٔ شش عدد: کارنامهٔ شرکت در اسلایدهای معرفی. ترتیب خانه‌ها راست به چپ است. عددهای نمونه از قالب برندبوک‌اند؛ پیش از استفاده با کارنامهٔ روز تطبیق دهید. | `templates/n03.html` · https://design.harmoniq.solutions/dist/ai/templates/n03.txt |
| N04 | ردیف شاخص با تغییر | گزارش دوره‌ای و پیگیری پروژه | N04 ردیف شاخص با تغییر: گزارش دوره‌ای و پیگیری پروژه. نشان تغییر همیشه کلمه دارد (افزایش، بهبود، کاهش)، نه فقط رنگ: Teal برای خوب، Red برای بد. در قالب پاورپوینت این نشان با پیکان ▲/▼ آمده؛ این‌جا به‌جای پیکان کلمه آمده چون پیکان‌ها در فونت راوی نیستند. زیر ردیف جای یک نمودار روند است. | `templates/n04.html` · https://design.harmoniq.solutions/dist/ai/templates/n04.txt |
| N05 | عدد و میله | وقتی عدد به مقایسهٔ کوچک نیاز دارد | N05 عدد و میله: وقتی عدد به مقایسهٔ کوچک نیاز دارد. میله‌ها از راست به چپ رشد می‌کنند؛ میلهٔ «پس» با Blue 60 و «پیش» با Cool Gray 30. طول میله‌ها را به نسبت واقعی عددها تنظیم کنید. | `templates/n05.html` · https://design.harmoniq.solutions/dist/ai/templates/n05.txt |
| N06 | عدد روی زمینهٔ تیره | عدد پایانی یا تاکیدی در میان ارایه | N06 عدد روی زمینهٔ تیره: عدد پایانی یا تاکیدی در میان ارایه. روی سرمه‌ای، عدد با Cyan 40 (brand) و توضیح سفید. | `templates/n06.html` · https://design.harmoniq.solutions/dist/ai/templates/n06.txt |

### C · کارت‌ها

| Code | Template | Use for | Layout note | HTML |
|---|---|---|---|---|
| C01 | کارت متنی | سه موضوع با توضیح کوتاه | C01 کارت متنی: سه موضوع با توضیح کوتاه. کارت سفید با خط مویی روی زمینهٔ خاکستری، گوشهٔ ۱۶ پیکسل، بدون سایه، ارتفاع برابر. | `templates/c01.html` · https://design.harmoniq.solutions/dist/ai/templates/c01.txt |
| C02 | کارت آیکون | خدمات، مزیت‌ها، ویژگی‌ها | C02 کارت آیکون: خدمات، مزیت‌ها، ویژگی‌ها. یک آیکن Carbon برای هر ایده در گوشهٔ بالا راست، رنگ accent (Blue 60) روی زمینهٔ روشن. آیکن‌ها همان فایل‌های قالب برندبوک‌اند؛ آیکن تازه را از کتابخانهٔ آیکن سایت زبان طراحی بردارید. | `templates/c02.html` · https://design.harmoniq.solutions/dist/ai/templates/c02.txt |
| C03 | کارت تصویری | پروژه‌ها، نمونه‌ها، مقاله‌ها | C03 کارت تصویری: پروژه‌ها، نمونه‌ها و مقاله‌ها. تصویر بالای کارت، برچسب صنعت، عنوان و یک جملهٔ نتیجه. | `templates/c03.html` · https://design.harmoniq.solutions/dist/ai/templates/c03.txt |
| C04 | کارت شماره‌دار | فرایند ۳ تا ۵ مرحله‌ای | C04 کارت شماره‌دار: فرایند ۳ تا ۵ مرحله‌ای، از راست به چپ. شمارهٔ هر مرحله با IBM Plex Serif؛ مرحلهٔ جاری با زمینهٔ Blue 10 و خط Blue 60. | `templates/c04.html` · https://design.harmoniq.solutions/dist/ai/templates/c04.txt |
| C05 | کارت فهرستی افقی | فهرست ۳ تا ۵ موردی با توضیح | C05 کارت فهرستی افقی: فهرست ۳ تا ۵ موردی با توضیح. آیکن Carbon در Blue 60 سمت راست، عنوان و یک جملهٔ توضیح. | `templates/c05.html` · https://design.harmoniq.solutions/dist/ai/templates/c05.txt |
| C06 | کارت تیره و روشن | پیشنهاد، بستهٔ خدمت، گزینهٔ برتر | C06 کارت تیره و روشن: پیشنهاد، بستهٔ خدمت یا گزینهٔ برتر. فقط یک کارت سرمه‌ای (inverse) برای گزینهٔ پیشنهادی، با برچسب «پیشنهاد ما» در Cyan 40. | `templates/c06.html` · https://design.harmoniq.solutions/dist/ai/templates/c06.txt |
| C07 | کارت راهکار | معرفی خدمات و راهکارها روی زمینهٔ تیره | C07 کارت راهکار: معرفی خدمات و راهکارها به سبک Credentials. کارت سرمه‌ای با خط Blue 50 روی گرادیان تیره و آیکن Carbon در Cyan 40 (brand). ترتیب: ستون راست اول، از بالا به پایین. | `templates/c07.html` · https://design.harmoniq.solutions/dist/ai/templates/c07.txt |

### H · متن برجسته

| Code | Template | Use for | Layout note | HTML |
|---|---|---|---|---|
| H01 | جملهٔ بزرگ تیره | پیام کلیدی، گذار بین بخش‌ها | H01 جملهٔ بزرگ تیره: پیام کلیدی یا گذار بین بخش‌ها. فقط یک جمله روی گرادیان سرمه‌ای، بدون عنوان. | `templates/h01.html` · https://design.harmoniq.solutions/dist/ai/templates/h01.txt |
| H02 | جملهٔ بزرگ با تاکید | یک جمله با یک واژهٔ رنگی | H02 جملهٔ بزرگ با تاکید: یک جمله با یک واژهٔ رنگی. فقط یک واژه یا عبارت رنگی؛ Blue 60 روی سفید، Cyan 40 روی تیره. خط راهنمای زیر جمله را در ارایه پاک کنید. | `templates/h02.html` · https://design.harmoniq.solutions/dist/ai/templates/h02.txt |
| H03 | پرسش بزرگ | شروع بحث یا بخش با پرسش مخاطب | H03 پرسش بزرگ: شروع بحث یا بخش با پرسش مخاطب. روی گرافیک Q روشن (Cyan 10 روی سفید)؛ Q هرگز همراه موج روی زمینهٔ روشن نمی‌آید. | `templates/h03.html` · https://design.harmoniq.solutions/dist/ai/templates/h03.txt |
| H04 | نکتهٔ کلیدی | تاکید بر یک نکته، هشدار یا نتیجه درون اسلاید | H04 نکتهٔ کلیدی: تاکید بر یک نکته درون اسلاید. سه نوع کادر: نکته (Blue)، هشدار (Red)، نتیجه (Teal). برچسب همیشه کلمه است تا معنا فقط به رنگ نباشد. در هر اسلاید یک کادر کافی است؛ این اسلاید هر سه را نشان می‌دهد. | `templates/h04.html` · https://design.harmoniq.solutions/dist/ai/templates/h04.txt |
| H05 | جملهٔ امضا | بستن بخش یا ارایه با شعار برند | H05 جملهٔ امضا: بستن بخش یا ارایه با شعار برند «ایستاده بر آغاز.» روی گرادیان سرمه‌ای با موج Cyan 80 در نیمهٔ پایین. | `templates/h05.html` · https://design.harmoniq.solutions/dist/ai/templates/h05.txt |
| H06 | عنوان و بیانیه | ماموریت، چشم‌انداز، ارزش‌ها | H06 عنوان و بیانیه: بیانیه‌ها مثل ماموریت، چشم‌انداز و ارزش‌ها. برچسب کوچک در Blue 60، بیانیه در ink و یک خط کوتاه Blue 60 زیر آن. | `templates/h06.html` · https://design.harmoniq.solutions/dist/ai/templates/h06.txt |

### P · فرایند، زمان، ساختار

| Code | Template | Use for | Layout note | HTML |
|---|---|---|---|---|
| P01 | تایم‌لاین افقی | زمان‌بندی پروژه و نقاط عطف | P01 تایم‌لاین افقی: زمان‌بندی پروژه و نقاط عطف، از راست به چپ. مرحلهٔ جاری با Blue 60 پر می‌شود؛ بقیه دایرهٔ سفید با خط Cyan 40. | `templates/p01.html` · https://design.harmoniq.solutions/dist/ai/templates/p01.txt |
| P02 | فرایند شِورون | فرایند خطی ۳ تا ۵ مرحله | P02 فرایند شِورون: فرایند خطی ۳ تا ۵ مرحله، از راست به چپ و از روشن به تیره در طیف Cyan (۲۰، ۴۰، ۶۰، ۸۰). متن روی Cyan 20 و 40 تیره، روی Cyan 60 و 80 سفید. | `templates/p02.html` · https://design.harmoniq.solutions/dist/ai/templates/p02.txt |
| P03 | مقایسهٔ دو گزینه | پیش و پس، گزینهٔ الف و ب، ما و دیگران | P03 مقایسهٔ دو گزینه: پیش و پس، گزینهٔ الف و ب، ما و دیگران. ستون معیارها در راست؛ گزینهٔ پیشنهادی در چپ با Blue 60 و متن پررنگ. | `templates/p03.html` · https://design.harmoniq.solutions/dist/ai/templates/p03.txt |
| P04 | ماتریس ۲×۲ | اولویت‌بندی و جایگاه‌یابی | P04 ماتریس ۲×۲: اولویت‌بندی و جایگاه‌یابی. ناحیهٔ «اول اجرا» در بالا راست با Blue 10 و عنوان Blue 60؛ نام هر ناحیه فعل یا تصمیم است. محور اهمیت از چپ به راست زیاد می‌شود. | `templates/p04.html` · https://design.harmoniq.solutions/dist/ai/templates/p04.txt |
| P05 | نمونهٔ موردی سه‌ستون | نمونه‌های موردی در پروپوزال و Credentials | P05 نمونهٔ موردی سه‌ستون: نمونه‌های موردی در پروپوزال و Credentials. سه ستون مساله، معماری راهکار (چهار مرحلهٔ 4D) و دستاوردها؛ سرستون‌ها از Cyan 10 تا Cyan 30. | `templates/p05.html` · https://design.harmoniq.solutions/dist/ai/templates/p05.txt |
| P06 | جدول با جمع‌بندی | داده‌های دقیق با تفسیر، طبق قواعد جدول | P06 جدول با جمع‌بندی: داده‌های دقیق با تفسیر، طبق قواعد جدول برندبوک (سرستون نیمه‌پررنگ خاکستری، خط‌های مویی افقی، بدون خط عمودی و راه‌راه). پیام اسلاید یک جملهٔ کامل در ستون راست است. ستون شاخص در راست است و سال‌ها به سمت چپ پیش می‌روند. عددهای جدول نمونه‌اند. | `templates/p06.html` · https://design.harmoniq.solutions/dist/ai/templates/p06.txt |
| P07 | دیاگرام چرخه یا هاب | روابط اجزا با یک هسته | P07 دیاگرام چرخه یا هاب: روابط اجزا با یک هسته، مثل خدمات حول یک ارزش. هسته دایرهٔ ink با متن سفید؛ بخش‌ها دایرهٔ سفید با خط Cyan 40 و خط اتصال Cyan 20. | `templates/p07.html` · https://design.harmoniq.solutions/dist/ai/templates/p07.txt |
| P08 | ساختار سازمانی | ساختار تیم پروژه یا سازمان پیشنهادی | P08 ساختار سازمانی: ساختار تیم پروژه یا سازمان پیشنهادی در سه سطح. خطوط ساده و زاویه‌دار، سطح اول ink. در قالب پاورپوینت، کارت‌های سطح دوم در ستون‌های ۴·۴·۴·۴ از راست چیده شده‌اند. | `templates/p08.html` · https://design.harmoniq.solutions/dist/ai/templates/p08.txt |
| P09 | دستور جلسه | کارگاه‌ها و جلسه‌های کارفرما | P09 دستور جلسه: کارگاه‌ها و جلسه‌های کارفرما. زمان با Blue 60، موضوع با ink و مسوول در برچسب Cyan 10؛ استراحت خاکستری و بدون برچسب. | `templates/p09.html` · https://design.harmoniq.solutions/dist/ai/templates/p09.txt |
| P10 | فقط عنوان | بوم آزاد برای نمودار، دیاگرام یا تصویر خاص | P10 فقط عنوان: بوم آزاد برای نمودار، دیاگرام یا تصویر خاص. عنوان کنشی بالا راست، عنوان لاتین کم‌رنگ بالا چپ؛ ناحیهٔ محتوا ۱۲ ستون از ۲۶۴ پیکسل. کادر نقطه‌چین راهنماست و در ارایه پاک می‌شود. نمودارها طبق فصل نمودارهای برندبوک. | `templates/p10.html` · https://design.harmoniq.solutions/dist/ai/templates/p10.txt |


## 6. Brand assets used by the templates

- `backgrounds/bg-dark-plain.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/backgrounds/bg-dark-plain.png
- `backgrounds/bg-dark-wave.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/backgrounds/bg-dark-wave.png
- `backgrounds/bg-gray-wave.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/backgrounds/bg-gray-wave.png
- `backgrounds/bg-light-wave.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/backgrounds/bg-light-wave.png
- `backgrounds/bg-q-dark.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/backgrounds/bg-q-dark.png
- `backgrounds/bg-q-light.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/backgrounds/bg-q-light.png
- `backgrounds/wave-dark.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/backgrounds/wave-dark.png
- `icons/c02-1.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/icons/c02-1.png
- `icons/c02-2.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/icons/c02-2.png
- `icons/c02-3.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/icons/c02-3.png
- `icons/c02-4.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/icons/c02-4.png
- `icons/c05-1.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/icons/c05-1.png
- `icons/c05-2.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/icons/c05-2.png
- `icons/c05-3.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/icons/c05-3.png
- `icons/c05-4.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/icons/c05-4.png
- `icons/c07-1.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/icons/c07-1.png
- `icons/c07-2.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/icons/c07-2.png
- `icons/c07-3.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/icons/c07-3.png
- `icons/c07-4.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/icons/c07-4.png
- `icons/c07-5.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/icons/c07-5.png
- `icons/c07-6.png` — https://design.harmoniq.solutions/dist/brand/graphics/slides/icons/c07-6.png
- `wordmark/harmoniq-logo-primary.svg` — https://design.harmoniq.solutions/dist/brand/logo/wordmark/harmoniq-logo-primary.svg
- `wordmark/harmoniq-logo-reversed.svg` — https://design.harmoniq.solutions/dist/brand/logo/wordmark/harmoniq-logo-reversed.svg

## صدا و لحن

هارمونیک در همه‌جا یک صدا دارد و دو لحن. محصولات (SOS و ScaleLab) صدای جداگانه ندارند.

### صدا: پنج ویژگی

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

آزمون سریع: متن را بلند بخوانید. اگر شبیه کسی است که دوست دارید با او کار کنید، صدا درست است.

### دو لحن

| | رسمی | حرفه‌ای و گرم |
|---|---|---|
| کاربرد | قرارداد، گزارش، نامهٔ رسمی، صورت‌جلسه، سند مالی | پیشنهاد و ارایهٔ فروش، وب‌سایت، شبکه‌های اجتماعی، ایمیل به کارفرما |
| راوی و مخاطب | «هارمونیک» یا «ما»؛ «شما»ی محترمانه یا عنوان سازمان | «ما» و «شما»؛ گاهی پرسش مستقیم |
| فعل | شکل کامل نوشتاری: «است»، «می‌شود» | شکل ساده‌تر نوشتاری؛ هرگز محاوره‌ای («میشه»، «داریم میریم») |
| طول جمله | حداکثر ۲۵ واژه | حداکثر ۲۰ واژه؛ کوتاه‌تر بهتر |
| پرسش و تعجب | پرسش فقط در عنوان بخش؛ هرگز «!» | پرسش برای شروع؛ حداکثر یک «!» در هر متن |
| استعاره | پرهیز | کم و آشنا، مثل «شانه به شانه» |
| اصطلاح انگلیسی | معادل فارسی، انگلیسی در پرانتز | فقط اصطلاح‌های جاافتاده (KPI، BI) |
| ایموجی و هشتگ | هرگز | بدون ایموجی؛ حداکثر سه هشتگ در شبکه‌های اجتماعی |

لحن را با مخاطب تنظیم کنید: مدیرعامل و هیات‌مدیره رسمی‌تر؛ جامعهٔ بنیان‌گذاران و دانشجویان گرم‌تر. اگر شک دارید، رسمی‌تر بنویسید.

### یک پیام، دو لحن

- **رسمی:** «راهکار SOS برای شرایطی طراحی شده است که تاخیر در تصمیم‌گیری، پیامد بلندمدت برای کسب‌وکار دارد.»
- **گرم:** «وقتی یک ساعت تاخیر هم مجاز نیست، SOS کنار شماست.»

### عنوان‌ها

- **اسلاید و گزارش:** عنوان کنشی که یافته را می‌گوید: «حاشیهٔ سود با وجود رشد هزینه‌ها بالا رفت».
- **وب و پیشنهاد:** سود یا پرسش خواننده، حداکثر هشت واژه: «برای تحول آماده‌اید؟».
- **شبکه‌های اجتماعی:** سطر اول قلاب است: یک عدد، یک پرسش یا یک جملهٔ صریح. هرگز «با افتخار اعلام می‌کنیم».

### جمله‌های امضا

| جمله | فارسی | انگلیسی | جایگاه |
|---|---|---|---|
| شعار برند | ایستاده بر آغاز. | Standing at the start. | جلد، صفحهٔ اصلی، اسلاید پایانی |
| وعده | تا نتیجه، کنار شما. | With you, all the way to results. | پیشنهاد، صفحهٔ دربارهٔ ما، امضای ایمیل فروش |
| مکان | مستقر در تهران؛ به وسعت ایران؛ اثرگذار در منطقه. | Based in Tehran. Across Iran. Impact in the region. | صفحهٔ تماس، معرفی شرکت، رویدادها |
| دعوت | برای تحول آماده‌اید؟ | Ready for transformation? | پایان ارایه و پیشنهاد، دکمه، بنر |

### انگلیسی

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


## راهنمای هارمونیکی نوشتن

نوشتهٔ هارمونیک سه لایه دارد: **صدا** (چه کسی هستیم؛ ثابت)، **لحن** (رسمی یا گرم؛ به مخاطب بستگی دارد) و **نگارش** (املا، نشانه و عدد؛ همیشه یکسان). صدا و لحن در صفحهٔ [لحن](https://design.harmoniq.solutions/voice/tone/) آمده‌اند؛ این صفحه دربارهٔ خود نوشتن است.

قاعده‌ها از برندبوک هارمونیک‌اند. هر جا قاعده‌ای از دستور خط فرهنگستان یا عرف ویرایش فارسی آمده و برندبوک دربارهٔ آن چیزی نگفته، با برچسب **«پیشنهاد»** مشخص شده تا پس از تایید جزو قاعده شود.

### پیش از نوشتن

چهار پرسش، پیش از اولین جمله:

1. **مخاطب کیست؟** مدیرعامل و هیات‌مدیره رسمی‌تر، بنیان‌گذاران و دانشجویان گرم‌تر. اگر مطمئن نیستید، رسمی‌تر بنویسید.
2. **پیام اصلی در یک جمله چیست؟** اگر در یک جمله نمی‌آید، هنوز آمادهٔ نوشتن نیستید.
3. **از خواننده چه می‌خواهیم؟** تصمیم، تایید، تماس یا فقط آگاهی.
4. **کدام لحن؟** قرارداد، گزارش و نامهٔ رسمی: رسمی. پروپوزال، وب، ایمیل و شبکه‌های اجتماعی: حرفه‌ای و گرم.

### ساختار متن

- **اول نتیجه، بعد توضیح.** خواننده‌ای که فقط سطر اول را می‌خواند هم باید پیام را بگیرد.
- **یک پیام در هر اسلاید، صفحه یا پست.** دو پیام یعنی دو اسلاید.
- **پاراگراف** حداکثر چهار جمله؛ روی اسلاید حداکثر دو جمله.
- **فهرست** برای سه تا هفت مورد هم‌وزن؛ بیشتر از آن گروه‌بندی یا جدول. [راهنمای فهرست‌ها](https://design.harmoniq.solutions/components/list/)

#### عنوان در هر کانال

| کانال | عنوان | نمونه |
|---|---|---|
| اسلاید و گزارش | عنوان کنشی: یک جملهٔ کامل که یافته را می‌گوید | «حاشیهٔ سود با وجود رشد هزینه‌ها بالا رفت» |
| وب و پروپوزال | سود یا پرسش خواننده، حداکثر هشت واژه | «برای تحول آماده‌اید؟» |
| شبکهٔ اجتماعی | سطر اول قلاب است: یک عدد، یک پرسش یا یک جملهٔ صریح | «قدم بعدی کسب‌وکار شما چه باید باشد؟» |

هرگز عنوان موضوعی («حاشیهٔ سود») روی اسلاید، و هرگز «با افتخار اعلام می‌کنیم» در شبکه‌های اجتماعی.

### جمله

- یک ایده در هر جمله. جملهٔ رسمی حداکثر ۲۵ واژه، جملهٔ گرم حداکثر ۲۰ واژه؛ کوتاه‌تر بهتر.
- **معلوم، نه مجهول.** کننده را بگویید.
- **عدد و نمونه به جای صفت.**
- بدون تاکید تکراری («تنها و تنها»)؛ حداکثر سه اسم پشت سر هم.

| ننویسید | بنویسید |
|---|---|
| بررسی‌های لازم توسط تیم پروژه به عمل آمد. | تیم پروژه بررسی کرد. |
| در راستای ارتقای بهره‌وری، اقدام به بازطراحی فرایند گردید. | برای بالا بردن بهره‌وری، فرایند را بازطراحی کردیم. |
| نتایج چشمگیری حاصل شد. | فروش در شش ماه ۲۳٪ بیشتر شد. |
| این مساله تنها و تنها با همکاری حل می‌شود. | این مساله فقط با همکاری حل می‌شود. |
| ارزیابی وضعیت فرایندهای مدیریت منابع انسانی سازمان | ارزیابی فرایندهای منابع انسانی |

### واژه

| به جای | بنویسید |
|---|---|
| می‌باشد | است |
| نمود، می‌نماید | کرد، می‌کند |
| گردید | شد |
| جهت، به منظور، در راستای | برای |
| لذا | برای همین، بنابراین |
| مورد بررسی قرار گرفت (پیشنهاد) | بررسی شد |
| اقدام به طراحی نمود (پیشنهاد) | طراحی کرد |
| می‌بایست (پیشنهاد) | باید |

- **ترجیح بدهید:** مساله، راهکار، اقدام، نتیجه، همراهی، هم‌آفرینی، داده، تصمیم، مسیر، اثر.
- **پرهیز کنید:** بی‌نظیر، بهترین، انقلابی، پیشروترین، تضمینی، جادویی، سینرژی، حرفه‌ای‌ترین، ۳۶۰ درجه، منحصربه‌فرد. این واژه‌ها ادعا می‌کنند و ثابت نمی‌کنند.
- **فعل نوشتاری کامل:** «است»، «می‌شود»؛ هرگز محاوره‌ای («میشه»، «داریم میریم»)، حتی در لحن گرم.

#### نام‌ها و اصطلاح‌ها

- **نام شرکت:** «هارمونیک» در متن فارسی؛ دقیقاً «HarmoniQ» در متن انگلیسی، با Q بزرگ. هرگز «هارمونیک کیو» یا «Harmoniq».
- **نام محصولات:** همیشه لاتین: SOS، ScaleLab. در متن فارسی همان‌طور که هستند: «راهکار SOS».
- **اصطلاح تخصصی:** بار اول فارسی با انگلیسی در پرانتز، بعد فقط فارسی: «مسالهٔ بنیادین (Core Problem)».
- **سرواژه‌های جاافتاده** لاتین می‌مانند: KPI، BI، OKR.
- **واژه‌های روش 4D** همیشه با همین نام‌ها و همین ترتیب: کشف، طراحی، تحویل، استقرار. [واژه‌نامه](https://design.harmoniq.solutions/voice/glossary/)

### املا

#### بدون کرسی همزهٔ عربی

| بنویسید | ننویسید |
|---|---|
| مساله | مسئله |
| ارایه | ارائه |
| رییس | رئیس |
| هیات | هیئت |
| تاخیر | تأخیر |
| تایید | تأیید |
| مسوول | مسئول |
| جزییات | جزئیات |
| سوال | سؤال |
| موثر | مؤثر |
| علایم | علائم |
| تاثیر | تأثیر |

قاعدهٔ کلی: هر جا همزه روی کرسی «ئ» یا «ؤ» یا «أ» می‌نشیند، شکل فارسی بی‌همزه را بنویسید: «ی» به جای «ئ»، «و» به جای «ؤ»، «ا» به جای «أ».

#### کسرهٔ اضافه بعد از «ه» ناملفوظ

تنها جای همزه در نوشتهٔ هارمونیک: **«هٔ»**. «نقشهٔ راه»، «خانهٔ دوست»، «برنامهٔ اجرایی». هرگز «نقشه‌ی راه» یا «نقشۀ راه».

#### حرف‌ها

همیشه «ی» و «ک» فارسی؛ هرگز «ي» و «ك» عربی. متنی که از جای دیگر کپی می‌شود را پیش از انتشار با جست‌وجو و جایگزینی پاک کنید.

#### نیم‌فاصله

نیم‌فاصله (ZWNJ) جزهای یک واژه را کنار هم نگه می‌دارد بی‌آن‌که به هم بچسبند.

| جا | نمونه |
|---|---|
| «می» و «نمی» پیش از فعل | می‌شود، نمی‌دانیم، می‌سازیم |
| «ها» ی جمع | پروژه‌ها، داده‌ها، شاخص‌ها |
| «تر» و «ترین» | کوتاه‌تر، مهم‌ترین |
| واژه‌های مرکب | کسب‌وکار، داده‌محور، هم‌آفرینی، راست‌به‌چپ |
| «ای»، «ام»، «ات»، «اش» بعد از «ه» | خانه‌ای، نامه‌اش، پروژه‌ام |
| «ی» نکره یا صفت بعد از «ا» و «و» | جای خالی، گفت‌وگویی |

> **پیشنهاد**
«ها» ی جمع **همیشه** با نیم‌فاصله، حتی وقتی حرف پیش از آن به بعد نمی‌چسبد («کتاب‌ها»، «سازمان‌ها»)؛ تا هیچ‌وقت نگران انتخاب نباشید. «به» و «را» همیشه جدا: «به کار»، «به‌روز» (با نیم‌فاصله)، «آن را». این دو مورد از دستور خط فرهنگستان آمده‌اند و برندبوک هنوز دربارهٔ آن‌ها چیزی نگفته است.

### نشانه‌گذاری

| نشانه | نام | کاربرد |
|---|---|---|
| ، | ویرگول | جدا کردن بخش‌های جمله و موردهای پشت سر هم |
| ؛ | نقطه‌ویرگول | میان دو جملهٔ مستقل که به هم مربوط‌اند |
| . | نقطه | پایان جمله؛ موردهای فهرست که جملهٔ کامل‌اند |
| ؟ | علامت سوال | پایان پرسش |
| « » | گیومه | نقل‌قول و نام سند یا گزاره |
| ( ) | پرانتز | معادل انگلیسی و توضیح فرعی کوتاه |
| : | دونقطه | پیش از توضیح یا فهرست؛ بعد از برچسب («منبع: …») |
| – | خط تیرهٔ کوتاه | بازه، بدون فاصله: ۱۴۰۳–۱۴۰۵ |
| · | نقطهٔ میانی | جدا کردن موردهای یک سطر: «پروپوزال همکاری · آبان ۱۴۰۵» |
| ٪ | درصد | چسبیده به عدد: ۲۳٪ |
| ٫ | ممیز | اعشار: ۳٫۵ |
| ٬ | جداکنندهٔ هزارگان | ۱۲٬۵۰۰ |

- همیشه نشانهٔ فارسی، هرگز `,` و `?` و `"` انگلیسی در متن فارسی.
- بدون فاصله پیش از نشانه، یک فاصله بعد از آن؛ بدون فاصله درون «» و ().
- علامت تعجب: هرگز در متن رسمی؛ حداکثر یکی در متن گرم؛ هرگز «!!» یا «؟!». جملهٔ SOS تنها جای ثابت آن است.

### عدد، تاریخ و واحد

- **رقم فارسی** در متن فارسی: ۲۳٪، ۱۴۰۵، ۳٫۵. رقم لاتین فقط درون نام‌ها و نشانی‌های لاتین: چارچوب 4D، ISO 9001، harmoniq.solutions.
- **دقت:** حداکثر یک رقم اعشار؛ درصد معمولاً بدون اعشار. در یک جدول یا نمودار یک دقت.
- **واحد یک بار:** در عنوان فرعی یا سرستون («میلیارد تومان»)، نه کنار هر عدد.
- **کاهش و افزایش در متن** با واژه: «۱۲٪ کاهش»، نه «−۱۲٪».
- **تاریخ** خورشیدی در متن فارسی. در متن روان «۳ آبان ۱۴۰۵»؛ در جدول، سربرگ و سند «۱۴۰۵/۰۸/۰۳» (مثل سربرگ اسناد رسمی هارمونیک). تاریخ میلادی فقط در متن انگلیسی.
- **تلفن و نشانی** در متن فارسی با رقم فارسی؛ ایمیل و نشانی وب لاتین.

### لحن در هر کانال

| کانال | لحن | نکته |
|---|---|---|
| قرارداد، گزارش، نامهٔ رسمی، صورت‌جلسه | رسمی | «هارمونیک» یا «ما»؛ «شما» با احترام یا عنوان سازمان؛ پرسش فقط در عنوان بخش |
| پروپوزال و ارایهٔ فروش | گرم | «ما» و «شما»؛ پرسش برای شروع؛ استعارهٔ کم و آشنا («شانه به شانه») |
| وب و ایمیل مشتری | گرم | جمله‌های کوتاه؛ حداکثر یک «!» در کل متن |
| شبکه‌های اجتماعی | گرم | بدون ایموجی؛ حداکثر سه هشتگ؛ سطر اول قلاب |

یک پیام در دو لحن:

- رسمی: «راهکار SOS برای شرایطی طراحی شده است که تاخیر در تصمیم‌گیری، پیامد بلندمدت برای کسب‌وکار دارد.»
- گرم: «وقتی یک ساعت تاخیر هم مجاز نیست، SOS کنار شماست.»

### متن انگلیسی

بازنویسی، نه ترجمهٔ واژه‌به‌واژه. املای آمریکایی، عنوان‌ها با حرف بزرگ فقط در آغاز (sentence case)، جملهٔ معلوم و کوتاه، بدون اغراق («world-class solutions»، «ultimate»). عنوان با IBM Plex Serif، متن با IBM Plex Sans.

### پیش از انتشار

- [ ] پیام اصلی در سطر اول یا عنوان آمده است.
- [ ] عنوان اسلاید یا گزارش یک جملهٔ کامل است.
- [ ] هیچ «می‌باشد»، «گردید»، «نمود»، «جهت» یا «لذا» نمانده است.
- [ ] املای بی‌همزه، «هٔ» و نیم‌فاصله‌ها درست‌اند.
- [ ] «ی» و «ک» فارسی‌اند؛ نشانه‌ها فارسی‌اند.
- [ ] عددها فارسی‌اند، با یک دقت و با منبع.
- [ ] نام‌ها درست‌اند: هارمونیک، HarmoniQ، SOS، ScaleLab.
- [ ] جمله‌ها کوتاه و معلوم‌اند و هیچ صفت تبلیغی نمانده است.

> **تصمیم‌های باز**
- **تنوین:** «مثلاً» یا «مثلا»، «دقیقاً» یا «دقیقا». در متن‌های فعلی هر دو دیده می‌شود و برندبوک دربارهٔ آن چیزی نگفته است.
- **عدد با حروف:** آیا عددهای کوچک در متن روان با حروف نوشته شوند («سه مرحله» در برابر «۳ مرحله»).
- **«ها» و «به»:** دو مورد پیشنهادی بخش نیم‌فاصله.


## واژه‌نامه

### واژه‌های روش 4D

| فارسی | انگلیسی |
|---|---|
| کشف | Discover |
| طراحی | Design |
| تحویل | Deliver |
| استقرار | Deploy |
| مسالهٔ بنیادین | Core Problem |
| ریشه‌های بروز مساله | Root Causes |
| عوامل موفقیت | Success Factors |
| نتایج کلیدی | Key Results |
| ارزش‌های خلق‌شده | Created Values |

### حوزه‌های خدمت

| فارسی | انگلیسی |
|---|---|
| ارزیابی و تشخیص | Assessment & Diagnosis |
| طراحی کسب‌وکار و نوآوری | Business Design & Innovation |
| استراتژی کسب‌وکار و آینده‌نگری | Business Strategy & Foresight |
| توانمندسازی و بهینه‌سازی سازمانی | Organizational Enablement & Optimization |
| داده و هوش مصنوعی | Data & AI |

واژه‌های دیگر در ادامه اضافه می‌شوند.


## اصول نمودار

نمودار برای اثبات یک نکته است، نه نمایش همهٔ داده‌ها. این فصل از فصل نمودار برندبوک می‌آید و نمونه‌ها با دادهٔ نمایشی همان فصل ساخته شده‌اند. نمودارهای این سایت با کتابخانهٔ [ECharts](https://echarts.apache.org) و رنگ‌های توکن کشیده می‌شوند؛ در Keynote و PowerPoint همین قواعد با نمودار خود نرم‌افزار اجرا می‌شود.

### هر نمودار، یک پرسش

- **یک پرسش:** پیش از ساختن بنویسید نمودار به چه پرسشی جواب می‌دهد. اگر دو پرسش است، دو نمودار.
- **عنوان یعنی نتیجه:** عنوان یک جملهٔ کامل است که مخاطب باید به خاطر بسپارد (Action Title).
- **حذف هرچه داده نیست:** حاشیه، سایه، خط اضافه و رنگ بی‌معنا را حذف کنید تا داده دیده شود.
- **صداقت:** مقیاس، محور، دورهٔ زمانی و منبع درست؛ نمودار نباید چیزی بیش از داده بگوید.

### آناتومی

هفت جزء ثابت در همهٔ نمودارهای هارمونیک:

1. **عنوان-نتیجه:** راوی Bold، یک جمله، نتیجهٔ نمودار؛ بالا-راست کارت.
2. **زیرعنوان:** سنجه، واحد، بازهٔ زمانی و مبنا؛ راوی Regular با Cool Gray 60.
3. **راهنما:** برای دو سری یا بیشتر، همیشه؛ بالای نمودار و هم‌ترتیب با سری‌ها.
4. **محور و خط راهنما:** خطوط افقی مویی Cool Gray 20؛ ۴ تا ۶ درجه با اعداد گرد.
5. **توضیح (annotation):** رویداد یا نکته روی خود نمودار، نزدیک داده، با زمینهٔ Blue 10.
6. **برچسب‌های محور:** کوتاه و افقی؛ هرگز چرخیده یا مایل.
7. **منبع و یادداشت:** زیر خط جداکننده: منبع، تاریخ، و «دادهٔ نمایشی» در صورت نیاز.

### انتخاب نمودار

از پرسش شروع کنید، نه از نوع نمودار.

| می‌خواهم… | نمودار |
|---|---|
| مقدار در چند دسته را مقایسه کنم | [میله‌ای افقی](https://design.harmoniq.solutions/charts/comparison/#میلهای-افقی)، [ستونی](https://design.harmoniq.solutions/charts/comparison/#ستونی)، [نقطه‌ای](https://design.harmoniq.solutions/charts/comparison/#نقطهای) |
| دو یا سه سری را کنار هم مقایسه کنم | [میله‌ای گروهی](https://design.harmoniq.solutions/charts/comparison/#میلهای-گروهی)، [دمبلی](https://design.harmoniq.solutions/charts/comparison/#دمبلی) |
| عملکرد را در برابر هدف نشان دهم | [بولت](https://design.harmoniq.solutions/charts/comparison/#بولت)، یا میله با خط هدف |
| روند را در زمان نشان دهم | [خطی](https://design.harmoniq.solutions/charts/time/#خطی)؛ ستونی برای دوره‌های کم؛ [ناحیه‌ای](https://design.harmoniq.solutions/charts/time/#ناحیهای) |
| تغییر بین دو زمان را نشان دهم | [شیب](https://design.harmoniq.solutions/charts/time/#شیب)، دمبلی |
| از یک عدد به عدد دیگر برسم | [آبشاری](https://design.harmoniq.solutions/charts/time/#آبشاری) |
| سهم اجزا از کل را نشان دهم | [انباشته](https://design.harmoniq.solutions/charts/composition/#میلهای-انباشته)، [انباشتهٔ ۱۰۰٪](https://design.harmoniq.solutions/charts/composition/#انباشتهٔ-۱۰۰)، [دونات](https://design.harmoniq.solutions/charts/composition/#دایرهای-و-دونات) (تا ۴ بخش)، [درختی](https://design.harmoniq.solutions/charts/composition/#نقشهٔ-درختی) |
| سهم را در دو بعد نشان دهم | [مکو](https://design.harmoniq.solutions/charts/composition/#مکو) |
| پراکندگی و توزیع را نشان دهم | [هیستوگرام](https://design.harmoniq.solutions/charts/distribution/#هیستوگرام)، [جعبه‌ای](https://design.harmoniq.solutions/charts/distribution/#جعبهای) |
| رابطهٔ دو یا سه متغیر را ببینم | [پراکنش](https://design.harmoniq.solutions/charts/distribution/#پراکنش)، [حبابی](https://design.harmoniq.solutions/charts/distribution/#حبابی) |
| امتیاز چند بعد را ارزیابی کنم | [نقشهٔ حرارتی](https://design.harmoniq.solutions/charts/distribution/#نقشهٔ-حرارتی)؛ [راداری](https://design.harmoniq.solutions/charts/distribution/#راداری) با احتیاط |
| جریان، تبدیل یا ریزش را نشان دهم | [قیفی](https://design.harmoniq.solutions/charts/flow/#قیفی)، [سنکی](https://design.harmoniq.solutions/charts/flow/#سنکی) |
| برنامهٔ زمانی را نشان دهم | [گانت](https://design.harmoniq.solutions/charts/time/#گانت-و-خط-زمانی) |
| پراکندگی جغرافیایی را نشان دهم | [نقشهٔ کاشی ایران](https://design.harmoniq.solutions/charts/flow/#نقشهٔ-ایران) |
| فقط یک عدد مهم است | [کارت KPI](https://design.harmoniq.solutions/charts/flow/#کارت-kpi-و-نمودار-کوچک)؛ نمودار لازم نیست |

### رنگ در نمودار

چهار نقش رنگ؛ هر نقش یک قاعده. ترتیب‌ها با ابزار سنجش کوررنگی آزموده شده‌اند.

- **دسته‌ای، هویت سری‌ها:** `chart-1` تا `chart-5` (Cyan 50، Yellow 50، Blue 60، Teal 50، Purple 60) با ترتیب ثابت، هرگز چرخشی. از دستهٔ ششم به بعد در «سایر» با `chart-other` (Cool Gray 30). همین ترتیب روی زمینهٔ تیره هم معتبر است.
- **برجسته‌سازی، یک نکته:** سری یا میلهٔ مورد بحث `accent` (Blue 60) و بقیه `chart-other`. بیشتر نمودارهای ارایه به این شکل‌اند.
- **پیوسته، شدت:** یک فام از روشن به تیره، `chart-seq-1` تا `chart-seq-6` (Cyan 40 تا Cyan 90). روشن‌ترین پله باید روی سفید دیده شود.
- **واگرا، دو قطب:** قرمز برای منفی، Cyan برای مثبت و Cool Gray 20 برای مرز. هرگز فام رنگی در وسط.
- **وضعیت، معنا:** `positive`، `warning` و `negative` فقط برای خوب، هشدار و بد؛ همیشه با برچسب یا آیکن. هرگز برای «سری چهارم».

> **به‌روزرسانی فصل رنگ**
ترتیب دسته‌ای فصل نمودار جایگزین ترتیب قبلی فصل رنگ شده است؛ آن ترتیب در آزمون روشنایی و کوررنگی رد شد. در نسخهٔ ۰٫۷ رنگ دوم (`chart-2`) از Yellow 60 به Yellow 50 تغییر کرد.

### نوشتار و اعداد

هر عدد در نمودار باید بدون محاسبه خوانده شود.

| جزء | Keynote / PPT (pt) | وزن و رنگ |
|---|---|---|
| عنوان-نتیجه | ۳۲ / ۱۶ | Bold · Cyan 90 |
| زیرعنوان | ۲۰ / ۱۰ | Regular · Cool Gray 60 |
| برچسب داده | ۲۰ / ۱۰ | SemiBold · Cool Gray 80 |
| برچسب محور | ۱۸ / ۹ | Regular · Cool Gray 60 |
| راهنما | ۱۸ / ۹ | Regular · Cool Gray 80 |
| توضیح | ۱۸ / ۹ | SemiBold · Blue 60 |
| منبع | ۱۶ / ۸ | Regular · Cool Gray 50 |

عدد اول برای اسلاید ۱۹۲۰ در ۱۰۸۰ و عدد دوم برای اسلاید ۹۶۰ در ۵۴۰ است.

- **ارقام:** فارسی. در نرم‌افزار با ارقام لاتین وارد می‌شوند و نسخهٔ FaNum راوی آن‌ها را فارسی نشان می‌دهد. در وب، `toLocaleString('fa-IR')`.
- **واحد یک بار:** واحد و مقیاس در زیرعنوان («میلیارد تومان»)، نه کنار هر عدد.
- **گرد کردن:** حداکثر یک رقم اعشار؛ درصدها معمولاً بدون اعشار. همهٔ اعداد یک نمودار با یک دقت.
- **جداکننده‌ها:** هزارگان «٬» و اعشار «٫»؛ درصد «٪» چسبیده به عدد.
- **مقدارهای منفی:** در نمودار، جهت و رنگ میله منفی بودن را نشان می‌دهد؛ در متن بنویسید «۱۲٪ کاهش».
- **متن داخل رنگ:** متن هرگز هم‌رنگ سری نیست؛ هویت را مربع یا خط رنگی کنار متن می‌گوید.

### محورها و خطوط راهنما

محور ابزار خواندن است، نه تزیین.

- **صفر برای میله:** محور میله‌ای و ستونی همیشه از صفر. محور نمودار خطی می‌تواند از صفر شروع نشود، ولی این را در زیرعنوان بنویسید.
- **درجه‌ها:** ۴ تا ۶ درجه با اعداد گرد (۰، ۲۵، ۵۰…).
- **خط راهنما:** مویی، یکپارچه و Cool Gray 20؛ فقط در جهت خواندن مقدار.
- **جهت:** محور زمان از چپ به راست؛ میله‌های افقی از راست رشد می‌کنند و برچسب‌ها سمت راست‌اند.
- **ترتیب دسته‌ها:** بر اساس مقدار، مگر ترتیب طبیعی داشته باشند (زمان، مرحله، رده).
- **برچسب طولانی:** به جای چرخاندن برچسب، نمودار را افقی کنید.
- **مقیاس لگاریتمی:** فقط وقتی داده چند مرتبهٔ بزرگی دارد؛ همیشه با عبارت «مقیاس لگاریتمی».
- **حذف محور:** اگر همهٔ مقدارها برچسب دارند، محور عددی و خطوط راهنما حذف می‌شوند.

### برجسته‌سازی و توضیح

چشم مخاطب را مستقیم به نکته ببرید.

- یک سری Blue 60 و بقیه Cool Gray 30.
- برچسب مستقیم کنار سری مهم، به جای راهنمای جدا.
- نوار پس‌زمینهٔ Cyan 10 برای یک بازهٔ زمانی (پایلوت، بحران، فصل).
- خط هدف یا میانگین: خط‌چین Cool Gray 70 با برچسب «هدف».
- متن توضیح کوتاه، نزدیک داده، بدون فلش‌های بلند.

**قاعده:** در هر نمودار یک نکتهٔ اصلی؛ دو نکته یعنی دو نمودار. رنگ برجسته‌سازی با رنگ سری‌ها رقابت نکند: اگر برجسته می‌کنید، بقیه خاکستری‌اند. توضیح‌ها جزء نمودارند؛ در Keynote و PowerPoint با نمودار گروه شوند.

- **Do:** یک سری Blue 60، بقیه خاکستری و یک توضیح کوتاه کنار داده.
- **Don't:** فلش و دایرهٔ قرمز دستی روی نمودار، یا برجسته کردن با قرمز و سبز وقتی معنای خوب یا بد ندارد.

### نمودارهای ممنوع و پرخطر

این‌ها داده را تحریف می‌کنند یا خواندن را سخت می‌کنند.

| نمودار | وضعیت | چرا | به جایش |
|---|---|---|---|
| سه‌بعدی | ممنوع | عمق و پرسپکتیو اندازه‌ها را تحریف می‌کند؛ میلهٔ جلویی بزرگ‌تر دیده می‌شود. | همان نمودار دوبعدی |
| دومحوره | ممنوع | هم‌ترازی دو محور دلخواه است و رابطه‌ای می‌سازد که در داده نیست. | دو نمودار کنار هم، یا هر دو سری با مبنای ۱۰۰ |
| عقربه‌ای (Gauge) | ممنوع | فضای زیاد برای یک عدد و مقایسه‌ناپذیر. | [کارت KPI](https://design.harmoniq.solutions/charts/flow/#کارت-kpi-و-نمودار-کوچک) یا [بولت](https://design.harmoniq.solutions/charts/comparison/#بولت) |
| دایره‌ای پرتکه | ممنوع | بیش از ۴ تکه یا تکه‌های نزدیک به هم قابل مقایسه نیستند. | میله‌ای افقی |
| راداری | با احتیاط | مساحت و شکل به ترتیب محورها بستگی دارد و اغراق می‌کند. | میله‌ای گروهی یا حرارتی |
| ابر کلمات | ممنوع | اندازهٔ کلمه به طول آن هم بستگی دارد و چیزی را نمی‌سنجد. | میله‌ای افقی فراوانی |

### جدول‌ها

وقتی خواننده باید عدد دقیق را پیدا کند، جدول بهتر از نمودار است. کامپوننت آن [جدول](https://design.harmoniq.solutions/components/table/) است.

- متن راست‌چین، عددها با رقم هم‌عرض و یک دقت در هر ستون.
- واحد در سرستون یا زیرعنوان.
- سرستون با راوی SemiBold و رنگ `text-secondary` و خط ۲ پیکسلی زیر آن؛ ردیف‌ها با خط مویی؛ بدون خط عمودی و بدون راه‌راه.
- ردیف جمع Bold، با خط `ink` بالای آن.
- برای برجسته کردن ستون یا خانه، زمینهٔ `accent-subtle`، نه رنگ متن.


## نمودارهای مفهومی

نمودار مفهومی ایده را نشان می‌دهد، نه عدد را: چطور یک مساله شکسته می‌شود، گزینه‌ها کجا می‌نشینند، کار به چه ترتیبی جلو می‌رود. این صفحه قواعد فصل نمودار برندبوک برای چارچوب‌ها را با کامپوننت‌های وب اجرا می‌کند؛ هر کدام قالب اسلاید هم‌نامی در [قالب اسلاید](https://design.harmoniq.solutions/formats/slides/) دارد.

### قاعده‌های مشترک (از برندبوک)

- **مجاز:** ماتریس ۲×۲ (هر خانه یک اقدام)، نقشهٔ جایگاه، درخت مساله (MECE)، نقشهٔ فرایند و swimlane، بوم‌های کسب‌وکار، فرایند و چرخه.
- **جهت:** فرایند و چرخه از راست به چپ؛ گام فعلی با `accent`.
- **رنگ:** خانوادهٔ Cyan برای ساختار (خط‌ها Cyan 40، حلقه‌ها Cyan 20)، `ink` برای هسته یا ریشه، و `accent` فقط برای جایی که باید دیده شود.
- **ممنوع:** SmartArt، پیکان سه‌بعدی، شِورون‌های رنگین‌کمانی، سایه و گرادیان.
- **چارچوب دیگران** نام خودش را نگه می‌دارد و منبعش نوشته می‌شود: «ماتریس BCG (Boston Consulting Group)».
- **عنوان** نتیجه را می‌گوید، مثل نمودارهای داده.

### ماتریس ۲×۲

برای اولویت‌بندی و جایگاه. هر خانه یک **اقدام** است، نه یک برچسب؛ خانه‌ای که باید اول دیده شود (بالا و راست، مثل اسلاید P04، جایی که هر دو محور بیشترند) `accent-subtle` می‌گیرد. محور افقی از چپ به راست زیاد می‌شود و محور عمودی از پایین به بالا؛ برچسب محورها پیکان دارند.

### درخت مساله

برای شکستن یک پرسش به اجزای MECE (بی‌هم‌پوشانی و کامل). ریشه پرسش است، با `ink`؛ شاخه‌ای که فرضیهٔ اصلی است `accent` می‌گیرد. ریشه در راست و شاخه‌ها به سمت چپ باز می‌شوند. بیشتر از سه سطح در یک صفحه نه.

### فرایند

گام‌های پشت سر هم، از راست به چپ، با شِورون‌های تک‌رنگ از Cyan 20 تا Cyan 80 (اسلاید P02). بیشتر از شش گام نه؛ در موبایل زیر هم می‌روند.

### خط زمانی

برای برنامهٔ پروژه و نقطه‌های عطف (اسلاید P01). گام‌های گذشته Cyan 40 پر، گام فعلی `accent`، گام‌های آینده سفید با خط Cyan 40. برای برنامهٔ دقیق با هم‌پوشانی، [گانت](https://design.harmoniq.solutions/charts/time/) درست است.

### نمودار هسته‌ای

برای یک مفهوم مرکزی و اجزای هم‌ارز آن (اسلاید P07): هسته `ink`، اجزا سفید با خط Cyan 40، حلقهٔ پیوند Cyan 20. بین چهار تا هشت جزء؛ ترتیب از بالا و در جهت ساعت.

- **Do:** شورون‌های تک‌رنگ Cyan با گام فعلی در accent.
- **Don't:** SmartArt با پیکان‌های سه‌بعدی و هر گام یک رنگ.


## تصویر و گرافیک

<figcaption style="font-size:var(--hq-type-caption-font-size);color:var(--hq-text-secondary)">${label}</figcaption>
</figure>`;

تصویر در هارمونیک کمتر از متن و داده حرف می‌زند، اما باید راست بگوید: کار واقعی، آدم‌های واقعی، جای واقعی. گرافیک‌های برند فقط دو تا هستند، موج و Q، و هرکدام قاعدهٔ روشن دارد.

بخش‌هایی که با «(پیشنهاد)» مشخص شده‌اند هنوز در برندبوک نیامده‌اند و تا تایید برند پیشنهادند.

### عکاسی

#### اصل‌ها (از برندبوک)

- عکس‌های واقعی از کار واقعی: کارگاه‌ها، تیم‌ها، محل کار کارفرما.
- نور طبیعی و بدون فیلترهای سنگین.
- تصویرهای قاب‌دار گوشهٔ `radius-md` دارند.
- متن روی عکس همیشه روی لایهٔ `brand-deep` با شفافیت حدود ۷۵٪ می‌نشیند.
- بدون عکس‌های کلیشه‌ای (دست دادن، مهرهٔ شطرنج، لامپ)، بدون واترمارک، بدون عکس بی‌مجوز و بدون چهره بدون رضایت.

- **Do:** تیم مشتری دور میز کارگاه، با یادداشت‌های واقعی روی دیوار، در نور روز.
- **Don't:** عکس استوک دو دست در حال دست دادن، یا مهرهٔ شطرنج روی صفحه به نشانهٔ «استراتژی».

#### دسته‌ها (پیشنهاد)

| دسته | چه چیزی | کجا |
|---|---|---|
| کارگاه | تیم مشتری در حال کار، دیوار یادداشت، تخته | صفحهٔ خدمت، نمونه‌کار، اسلاید |
| محل کار مشتری | کارخانه، فروشگاه، دفتر؛ جایی که تغییر اتفاق می‌افتد | نمونه‌کار، گزارش |
| چهره | مشاوران هارمونیک، با زمینهٔ ساده و نور نرم | دربارهٔ ما، امضای مقاله، رویداد |
| جزییات | دست‌ها روی نقشه، صفحهٔ گزارش، ابزار کار | مقاله، شبکه‌های اجتماعی |

#### نسبت و قاب (پیشنهاد)

#### متن روی عکس

متن فقط روی لایهٔ `brand-deep` با شفافیت `opacity-overlay` می‌نشیند؛ نه روی خود عکس، نه روی سایهٔ متن و نه روی نوار سیاه. کلاس `hq-cover` همین لایه را می‌سازد.

#### چهره و رضایت (پیشنهاد)

- پیش از انتشار عکس هر فرد، رضایت کتبی او (و برای عکس محل کار مشتری، رضایت سازمان) گرفته می‌شود.
- اسناد، صفحه‌های نمایش و تخته‌ها در عکس نباید اطلاعات محرمانهٔ مشتری را نشان دهند؛ پیش از انتشار تار یا حذف شوند.
- چهرهٔ مشاوران با زمینهٔ ساده و قاب ۱:۱، از شانه به بالا.

#### متن جایگزین

- هر عکسی که معنا دارد `alt` دارد و همان چیزی را می‌گوید که عکس نشان می‌دهد: «تیم مدیریت یک تولیدکنندهٔ پوشاک در کارگاه نقشهٔ ارزش».
- عکس تزیینی و گرافیک‌های برند (موج، Q) `alt=""` می‌گیرند.
- متن جایگزین با «عکسِ» یا «تصویرِ» شروع نمی‌شود.

### موج

موج گرافیک امضای هارمونیک است: خط‌های موازی و ظریف در حرکت، نماد رشد متوازن.

- روی زمینهٔ تیره نسخهٔ Cyan 80 (`wave.svg`) و روی زمینهٔ روشن نسخهٔ Cyan 20 (`wave-cyan20.svg`).
- به‌صورت افقی در نیمهٔ پایین یا وسط، و از هر دو لبه بیرون‌زده.
- هرگز چرخانده، با رنگی بیرون از خانوادهٔ Cyan رنگ‌آمیزی، کوچک و شناور، با جلوه (سایه، درخشش) یا دوتایی روی هم استفاده نمی‌شود.
- برای ابزارهایی که SVG نمی‌پذیرند، نسخهٔ PNG هر دو در پوشهٔ `graphics/png` هست.
- موج متحرک قاعدهٔ خودش را در [حرکت](https://design.harmoniq.solutions/foundations/motion/) دارد.

فایل‌ها همان‌طور که از برندبوک آمده‌اند در [دانلودها](https://design.harmoniq.solutions/resources/downloads/) هستند و دست‌کاری نمی‌شوند.

### گرافیک Q

Q لوگو، بسیار بزرگ و بریده‌شده با لبهٔ صفحه: Cyan 80 با شفافیت `opacity-supergraphic` (۵۰٪) روی گرادیان سرمه‌ای، یا Cyan 10 روی سفید. یکی در هر صفحه، و هرگز همراه موج روی زمینهٔ روشن.

### زمینه‌ها

| زمینه | کاربرد |
|---|---|
| `surface` (سفید) | صفحه‌ها و اسلایدهای محتوا |
| `surface-alt` (Cool Gray 10) | اسلایدها و پنل‌های جایگزین؛ کارت روی آن سفید است |
| گرادیان سرمه‌ای | جلد، جداکنندهٔ بخش، نقل‌قول و اسلاید پایانی |
| گرادیان سرمه‌ای با موج | جلد و جداکنندهٔ بخش |
| سفید یا خاکستری با موج | جلد و جداکنندهٔ روشن |
| گرافیک Q | جلد و صفحهٔ پایانی؛ یکی در هر صفحه |
| `accent` تمام‌صفحه | یک جملهٔ کلیدی یا نقشه؛ حداکثر یک بار در هر مجموعه |

زمینه‌های آمادهٔ قالب اسلاید، به اندازهٔ ۱۹۲۰×۱۰۸۰:

> **تصویرسازی**
برندبوک برای تصویرسازی (illustration) قاعده‌ای ندارد و هارمونیک از تصویرسازی تزیینی استفاده نمی‌کند. برای توضیح یک ایده، [نمودار مفهومی](https://design.harmoniq.solutions/charts/frameworks/) بسازید و برای نشانه از [آیکن‌های Carbon](https://design.harmoniq.solutions/foundations/icon-library/) استفاده کنید.


## گرید و چیدمان

### گرید اسلاید

اسلایدها روی گرید ۱۲ستونی بوم ۱۹۲۰×۱۰۸۰ چیده می‌شوند. در چیدمان راست‌به‌چپ، اولین ستون سمت راست است.

ترکیب‌های استاندارد ستون‌ها: ۱۲ · ۸|۴ · ۶|۶ · ۴|۸ · ۴|۴|۴ · ۳|۳|۳|۳ · ۶|۳|۳ · ۵|۷.

### گرید وب

نقطه‌های شکست از IBM Carbon گرفته شده‌اند، چون پالت و آیکن‌های هارمونیک هم از خانوادهٔ IBM هستند. تعداد ستون‌ها در دسکتاپ ۱۲ است، نه ۱۶ستونی Carbon، تا ترکیب‌های ستونی وب و اسلاید یکی باشند: چیدمان ۸|۴ در اسلاید همان ۸|۴ در وب است. همهٔ فاصله‌ها و حاشیه‌ها از [مقیاس فاصله‌ها](https://design.harmoniq.solutions/foundations/spacing/) می‌آیند و مقدار تازه‌ای اضافه نمی‌کنند.

| اندازه | کاربرد | ستون‌ها |
|---|---|---|
| `sm` | موبایل | ۴ |
| `md` | تبلت | ۸ |
| `lg` | دسکتاپ | ۱۲ |
| `xl` | دسکتاپ بزرگ | ۱۲، با فاصله‌های بزرگ‌تر |

#### ستون‌ها

اندازهٔ پنجره را تغییر دهید تا تعداد ستون‌ها عوض شود. در موبایل، ۱۲ خانه در سه ردیف ۴تایی می‌شکنند.

`hq-demo-cell` فقط برای نمایش خانه‌ها در این صفحه است و جزو کامپوننت‌ها نیست.

#### چیدمان پاسخ‌گو

هر فرزند گرید به‌صورت پیش‌فرض تمام عرض را می‌گیرد. کلاس `hq-col-N` تعداد ستون را از موبایل به بالا تعیین می‌کند، و `hq-col-md-N`، `hq-col-lg-N` و `hq-col-xl-N` از همان اندازه به بالا. این نمونه در موبایل دو ردیف تمام‌عرض است، در تبلت ۴|۴ و در دسکتاپ ۸|۴.

#### ظرف صفحه

`hq-container` حاشیه‌های هر اندازه را اعمال می‌کند و پهنای صفحه را به `grid-web-max-width` (همان بیشینهٔ Carbon) محدود می‌کند؛ در صفحه‌های پهن‌تر، محتوا وسط می‌ماند.

```html
<main class="hq-container">
  <div class="hq-grid">
    <article class="hq-col-md-6 hq-col-lg-8">…</article>
    <aside class="hq-col-md-2 hq-col-lg-4">…</aside>
  </div>
</main>
```


## حرکت

حرکت در هارمونیک مثل خود کار مشاوره است: از یک نقطهٔ درست شروع می‌شود، مسیر روشنی دارد و به نتیجه می‌رسد. هر حرکت کاری انجام می‌دهد؛ توجه را می‌برد، رابطه‌ای را نشان می‌دهد یا تغییری را توضیح می‌دهد. حرکتی که فقط تزیین است، حذف می‌شود.

### اصول

1. **هدفمند:** هر حرکت به یک پرسش جواب می‌دهد: این عنصر از کجا آمد، به کجا رفت، چه تغییر کرد؟
2. **پیوسته:** هیچ چیز ناگهان ظاهر یا ناپدید نمی‌شود؛ هر شکل از شکل قبلی می‌آید. حرکت لوگو همین را نشان می‌دهد: نقطه خط می‌شود و خط، شکل.
3. **آرام و دقیق:** شتاب نرم، بدون جهش و لرزش. در رابط کاربری، حرکت کوتاه است و دیده نمی‌شود مگر وقتی لازم است.
4. **یک لحظهٔ بیانی:** در هر صفحه، اسلاید یا ویدیو فقط یک حرکت بزرگ؛ بقیه ساکت‌اند.
5. **ضرباهنگ برند:** حرکت‌های برند (لوگو، موج، صدا) روی **۱۰۵ ضرب در دقیقه** ساخته می‌شوند؛ هر ضرب `motion-duration-beat` (۵۷۱ میلی‌ثانیه) است. ویدیوها و تدوین‌ها هم برش‌هایشان را روی همین ضرب می‌گذارند.

### دو حالت حرکت

| | کاربردی (productive) | بیانی (expressive) |
|---|---|---|
| کجا | رابط کاربری: دکمه، منو، مودال، زبانه، اعلان | برند: لوگو، موج، صفحهٔ معرفی، ویدیو، ارایه، رویداد |
| مدت | `fast-01` تا `slow-01` (۷۰ تا ۴۰۰ میلی‌ثانیه) | `slow-02` و ضرب (۷۰۰ میلی‌ثانیه به بالا) |
| منحنی | `standard`، `entrance`، `exit` | `expressive`، `smooth` |
| هدف | کار کاربر سریع‌تر و روشن‌تر شود | پیام برند دیده و به خاطر سپرده شود |

مقدارهای حالت کاربردی از زبان طراحی IBM (Carbon) آمده‌اند که پایهٔ رنگ و نوشتار هارمونیک هم هست.

### توکن‌ها

#### مدت

نقطه‌ها با دو برابر مدت هر توکن رفت و برگشت می‌کنند تا تفاوت‌ها دیده شود.

#### منحنی شتاب

- **ورود** (`entrance`) برای عنصری که می‌آید و **خروج** (`exit`) برای عنصری که می‌رود؛ خروج همیشه کوتاه‌تر از ورود است.
- **استاندارد** (`standard`) برای عنصری که روی صفحه می‌ماند و فقط جا یا اندازه‌اش عوض می‌شود.
- `overshoot` فقط مال نقطهٔ آغاز در حرکت لوگوست و در رابط کاربری به کار نمی‌رود.

#### مدت بر اساس اندازه

| حرکت | مدت | منحنی |
|---|---|---|
| تغییر رنگ، حالت hover و focus | `fast-01` | `standard` |
| راهنمای ابزار، تیک، تغییر آیکن | `fast-02` | `standard` |
| منوی بازشو، اعلان | `moderate-01` | ورود `entrance`، خروج `exit` |
| آکاردئون، زبانه، ورود کارت | `moderate-02` | `standard` یا `entrance` |
| مودال، پنل کناری | `slow-01` | ورود `entrance`، خروج `exit` با `moderate-02` |
| ورود بخش‌های صفحهٔ معرفی | `slow-02` | `expressive` |

هرچه عنصر بزرگ‌تر است یا راه بیشتری می‌رود، مدت بیشتر؛ هیچ حرکت رابط کاربری از ۴۰۰ میلی‌ثانیه بیشتر نیست.

### جهت در چیدمان راست‌به‌چپ

- **پیش رفتن** یعنی حرکت به سمت چپ: مرحلهٔ بعد، اسلاید بعد و صفحهٔ بعد از چپ وارد می‌شوند و قبلی به راست می‌رود.
- **پنل کناری** از لبهٔ پایان (`inline-end`، سمت چپ) باز می‌شود؛ منوی اصلی از لبهٔ آغاز (سمت راست).
- **نوار پیشرفت** از راست به چپ پر می‌شود.
- **زمان** در نمودار و گانت از چپ به راست است، مثل [قواعد نمودار](https://design.harmoniq.solutions/charts/).
- **لوگوی لاتین** از چپ به راست خوانده می‌شود؛ در حرکت لوگو، Harmoni از پشت Q به سمت چپ بیرون می‌آید.
- در CSS از ویژگی‌های منطقی استفاده کنید (`inset-inline-start`، `translate` با علامت وابسته به `dir`) تا جهت خودکار درست شود.

### کاهش حرکت

کاربرانی که در سیستم‌عامل «کاهش حرکت» را روشن کرده‌اند (`prefers-reduced-motion: reduce`) هیچ حرکت جابه‌جایی، بزرگ‌شدن یا چرخشی نمی‌بینند:

- همهٔ حرکت‌ها به یک محو شدن ساده با `fast-02` تبدیل می‌شوند، یا بی‌حرکت انجام می‌شوند.
- حرکت لوگو به یک ظاهر شدن ۲۰۰ میلی‌ثانیه‌ای از لوگوی کامل تبدیل می‌شود.
- موج ساکن می‌ماند.
- هیچ اطلاعاتی فقط با حرکت منتقل نمی‌شود؛ وضعیت همیشه در متن یا آیکن هم هست.

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}
```

### حرکت لوگو: نقطه، خط، Q

لوگو از یک نقطه شروع می‌شود؛ نقطه خط دور Q می‌شود، خط ضخیم می‌شود و Q را پر می‌کند، و بعد نام کامل از پشت Q آشکار می‌شود. همان شعار برند در حرکت: «ایستاده بر آغاز.» نمونهٔ زندهٔ بالای صفحه را می‌توانید روی زمینهٔ روشن، آهسته و با صدا ببینید.

| ضرب | زمان | مرحله | منحنی |
|---|---|---|---|
| ۰ | ۰ | نقطهٔ فیروزه‌ای در مرکز قاب با یک جهش کوچک روشن می‌شود | `overshoot` |
| ۱ تا ۳ | ۰٫۵۷ تا ۱٫۷۱ ثانیه | نقطه نرم به خط دور Q تبدیل می‌شود؛ حفرهٔ میانی از دل خط باز می‌شود | `smooth` |
| ۳ | ۱٫۷۱ تا ۲٫۴ ثانیه | خط از همهٔ لبه‌ها به درون ضخیم می‌شود تا Q پر شود | `smooth` |
| ۴ تا ۶ | ۲٫۲۹ تا ۳٫۴۳ ثانیه | Q کوچک می‌شود و به جایش می‌رود؛ Harmoni از پشت آن به چپ بیرون می‌لغزد | `expressive` |

- **مدت:** ۶ ضرب، ۳٫۴ ثانیه؛ در ویدیو یک ثانیه هم روی لوگوی کامل می‌ماند.
- **رنگ:** همان نسخه‌های لوگو؛ روی سرمه‌ای نسخهٔ معکوس و روی سفید نسخهٔ اصلی. Q در هر دو فیروزه‌ای (Cyan 40).
- **حالت پایانی** همیشه خود فایل لوگوست؛ حرکت هیچ‌وقت روی شکل نهایی اثر نمی‌گذارد.
- **اندازه:** لوگو در پایان حدود ۴۴٪ عرض قاب ویدیو و ۶۰٪ عرض صفحهٔ آغاز اپ.

#### کجا به کار می‌رود

- شروع و پایان ویدیوهای برند، معرفی و آموزشی
- صفحهٔ آغاز اپ و محصولات
- اسلاید اول و آخر ارایه‌های رسمی، به صورت ویدیو روی اسلاید
- نمایشگرهای رویداد، بین بخش‌ها

#### کجا به کار نمی‌رود

- هر بار باز شدن صفحه‌های سایت؛ لوگوی سربرگ سایت ساکن است.
- کنار حرکت دیگری در همان قاب، از جمله موج.
- کوچک‌تر از ۲۴۰ پیکسل عرض؛ در اندازهٔ کوچک فقط لوگوی ساکن.

- **Do:** حرکت را کامل و با همان مدت پخش کنید و بگذارید لوگوی کامل دست‌کم یک ثانیه دیده شود.
- **Don't:** حرکت را تند یا کند نکنید، مرحله‌ای را حذف نکنید، رنگ نقطه یا Q را عوض نکنید و جلوهٔ دیگری (نور، سایه، لرزش) به آن اضافه نکنید.

### صدای برند

همراه حرکت لوگو یک امضای صوتی کوتاه برای **ارکستر کوچک** است، روی همان ۱۰۵ ضرب در دقیقه و در گام ر ماژور. ضربه‌های اصلی صدا دقیقاً روی مرحله‌های حرکت می‌نشیند:

| ضرب | حرکت | صدا |
|---|---|---|
| ۰ | نقطه | سلستا |
| ۱ تا ۳ | تبدیل به خط | زهی‌ها که آرام اوج می‌گیرند |
| ۳ | پر شدن Q | ضربهٔ تیمپانی و آکورد کامل |
| ۴٫۵ تا ۶ | آشکار شدن نام | آرپژیوی چنگ رو به بالا |
| ۶ | لوگوی کامل | یک نُت سلستا که آرام محو می‌شود |

- صدا همیشه اختیاری است. در وب و اپ هرگز خودکار پخش نمی‌شود؛ فقط با کار کاربر.
- در ویدیو، بلندی صدا زیر صدای گوینده یا موسیقی اصلی؛ امضای صوتی روی صدای دیگری پخش نمی‌شود.
- با هر طول دیگری از حرکت پخش نمی‌شود؛ صدا و حرکت با هم ساخته شده‌اند.

> **نسخهٔ فعلی صدا**
فایل صدای فعلی با سازهای ساخته‌شده در رایانه تولید شده و جهت و زمان‌بندی تاییدشده را نشان می‌دهد. نسخهٔ نهایی را آهنگ‌ساز با سازهای واقعی و با همین جدول ضرب‌ها می‌سازد و جایگزین همین فایل می‌شود.

### حرکت موج

رشته‌های موج برند یکی‌یکی از چپ به راست کشیده می‌شوند و بعد موج آرام و بی‌پایان نفس می‌کشد: هر رشته با کمی تاخیر نسبت به کناری‌اش بالا و پایین می‌رود و کل موج آهسته جلو و عقب می‌لغزد.

- **ورود:** ۲٫۴ ثانیه؛ ۲۳ رشته با فاصلهٔ ۴۰ میلی‌ثانیه، منحنی `smooth`.
- **حلقه:** ۱۲ ثانیه، بی‌درز؛ دامنهٔ حرکت کم است تا متن روی موج خوانا بماند.
- **رنگ:** همان نسخه‌های برندبوک؛ Blue 80 روی سرمه‌ای و Cyan 20 روی سفید.
- **کاربرد:** پس‌زمینهٔ ویدیو و تیتراژ، صفحهٔ آغاز، نمایشگر رویداد، جلد و دیوایدرهای متحرک اسلاید.
- **قاعده:** موج همیشه پس‌زمینه است. موج و Q هرگز با هم در یک قاب حرکت نمی‌کنند؛ لوگو روی موج ساکن می‌ماند، یا حرکت لوگو روی زمینهٔ ساده پخش می‌شود.
- موج حلقه‌ای وقتی از دید خارج می‌شود متوقف می‌شود و کاربر می‌تواند آن را نگه دارد.

### حرکت در اسلاید و ویدیو

- **انتقال بین اسلایدها:** فقط محو شدن (Dissolve یا Fade) با حدود ۰٫۴ ثانیه، یا جابه‌جایی جادویی (Magic Move، Morph) برای عنصری که در دو اسلاید هست.
- **ورود اجزا:** محو شدن یا بالا آمدن کوتاه، به ترتیب خواندن؛ حداکثر یک ورود برای هر اسلاید.
- **ممنوع:** پرواز، چرخش، جهش، بزرگ‌شدن از صفر، تایپ‌نویسی حرف‌به‌حرف و هر انتقال سه‌بعدی.
- **جلد و دیوایدر:** ویدیوی موج حلقه‌ای به جای تصویر زمینه؛ ویدیوی حرکت لوگو روی اسلاید اول یا آخر.
- **تدوین ویدیو:** برش‌ها روی ضرب ۱۰۵؛ متن روی تصویر با محو شدن و `expressive`.

### فایل‌ها

| فایل | توضیح |
|---|---|
| [حرکت لوگو، زمینهٔ تیره (MP4)](https://design.harmoniq.solutions/motion/harmoniq-logo-motion-dark.mp4) | ۱۹۲۰×۱۰۸۰، ۶۰ فریم در ثانیه، ۴٫۴ ثانیه، با صدای برند |
| [حرکت لوگو، زمینهٔ روشن (MP4)](https://design.harmoniq.solutions/motion/harmoniq-logo-motion-light.mp4) | ۱۹۲۰×۱۰۸۰، ۶۰ فریم در ثانیه، ۴٫۴ ثانیه، با صدای برند |
| [حلقهٔ موج، زمینهٔ تیره (MP4)](https://design.harmoniq.solutions/motion/harmoniq-wave-loop-dark.mp4) | ۱۹۲۰×۱۰۸۰، ۳۰ فریم در ثانیه، ۱۲ ثانیه، بی‌درز و بی‌صدا |
| [حلقهٔ موج، زمینهٔ روشن (MP4)](https://design.harmoniq.solutions/motion/harmoniq-wave-loop-light.mp4) | ۱۹۲۰×۱۰۸۰، ۳۰ فریم در ثانیه، ۱۲ ثانیه، بی‌درز و بی‌صدا |
| [صدای برند (WAV)](https://design.harmoniq.solutions/motion/harmoniq-logo-sound.wav) | ۴۸ کیلوهرتز، استریو، ۶٫۵ ثانیه |

این فایل‌ها از همان موتور حرکتی ساخته می‌شوند که نمونه‌های این صفحه را پخش می‌کند (`npm run motion`)، پس همیشه با این صفحه یکی‌اند.

### CSS

```css
.hq-panel {
  transition:
    transform var(--hq-motion-duration-slow-01) var(--hq-motion-easing-entrance),
    opacity var(--hq-motion-duration-moderate-02) var(--hq-motion-easing-standard);
}
.hq-panel[hidden] {
  transition-duration: var(--hq-motion-duration-moderate-02);
  transition-timing-function: var(--hq-motion-easing-exit);
}
```

### JavaScript

```js
const css = getComputedStyle(document.documentElement);
const token = (name) => css.getPropertyValue(`--hq-motion-${name}`).trim();
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;

card.animate(
  reduce ? [{ opacity: 0 }, { opacity: 1 }]
         : [{ opacity: 0, transform: 'translateY(16px)' }, { opacity: 1, transform: 'none' }],
  { duration: parseFloat(token('duration-moderate-02')), easing: token('easing-entrance'), fill: 'both' },
);
```


## Checklist before delivering a deck

- Every slide is a template from section 5, with its layout untouched.
- Only colors from section 3 appear; one accent per slide.
- Type sizes come from the slide scale; text fits its box.
- Action titles; one message per slide.
- Spelling: hamza-less forms, «هٔ», ZWNJ, Persian digits and punctuation; none of می‌باشد، نمود، گردید، جهت، لذا.
- Logo unaltered, on the right ground. Image sources noted; no watermarked images.
- Charts: brand order, one highlight, zero baseline for bars, source line.