{
  "title": "تایپوگرافی — مستندات سیستم طراحی",
  "slug": "team/frontend/design-system/typography",
  "url": "/docs/team/frontend/design-system/typography",
  "frontmatter": {
    "layout": "doc",
    "title": "تایپوگرافی (Typography)",
    "description": "قانون سلسله‌مراتب تایپوگرافی و مقیاس به‌ازای هر محصول در سیستم طراحی نانس",
    "version": "1.0.0",
    "status": "PRIVATE",
    "author": "xoxxel",
    "owner": "xoxxel",
    "created_at": "2026-07-11",
    "updated_at": "2026-07-11",
    "tags": "",
    "reviewers": ""
  },
  "sections": [
    {
      "level": 1,
      "heading": "تایپوگرافی — مستندات سیستم طراحی",
      "content": "**Typography — Design System Documentation**\n\n---"
    },
    {
      "level": 2,
      "heading": "فهرست محتوا",
      "content": "1. [قانون سلسله‌مراتب (Hierarchy Rule)](#قانون-سلسله‌مراتب-hierarchy-rule)\n2. [نسبت تایپوگرافی (استاندارد سازمان)](#نسبت-تایپوگرافی-استاندارد-سازمان)\n3. [قوانین مشتق‌شده از نسبت](#قوانین-مشتق‌شده-از-نسبت)\n\n---"
    },
    {
      "level": 2,
      "heading": "قانون سلسله‌مراتب (Hierarchy Rule)",
      "content": "نقش‌های تایپوگرافی یک آبشار نزولیِ سخت‌گیرانه می‌سازند. هر نقش باید در سطح درست خود قرار\nگیرد. **ترتیب از اندازهٔ دقیق مهم‌تر است.**\n\n```text\nDisplay\n   ↓\nTitle\n   ↓\nSubtitle\n   ↓\nBody\n   ↓\nUtility   (Label / Navigation / Button)\n   ↓\nMeta      (Caption / Placeholder)\n```\n\n| سطح | نقش‌ها | هدف |\n|-------|-------|---------|\n| Display | `display.*` | هیروها، تیترهای صفحه، متریک‌های بزرگ |\n| Title | `title.*` | تیتر بخش / کارت / آیتم |\n| Subtitle | `subtitle.*` | متن پشتیبان دقیقاً زیر یک تیتر |\n| Body | `body.*` | متن خواندنی / UI پیش‌فرض |\n| Utility | `label`, `navigation`, `button` | متن تعاملی / ساختاری UI |\n| Meta | `caption`, `placeholder` | کوچک‌ترین متن توصیفی / راهنما |\n\nیک نقش **هرگز** نباید از سطح بالاتر از خود بزرگ‌تر باشد. وقتی یک محصول به یک گام بزرگ‌تر\nنیاز دارد، یک بسط (`xl`، `hero`، `lg`) *بالای* سطح خود اضافه می‌کند — آبشار را نمی‌شکند.\n\n---"
    },
    {
      "level": 2,
      "heading": "نسبت تایپوگرافی (استاندارد سازمان)",
      "content": "اندازه‌ها بر اساس حس انتخاب **نمی‌شوند**. هر نقش مقدار ثابتی به‌ازای هر تم دارد که از یک\nمقیاس متناسب واحد مشتق شده است تا سه محصول از نظر بصری هم‌گون باقی بمانند.\n\n| نقش | Dashboard | Shop | Blog |\n|------|-----------|------|------|\n| Display | ۳۰ | ۳۶ | ۴۲ |\n| Title LG | ۲۲ | ۲۴ | ۳۲ |\n| Title MD | ۱۷ | ۲۰ | ۲۴ |\n| Subtitle | ۱۵ | ۱۶ | ۱۸ |\n| Body | ۱۴ | ۱۴ | ۱۴ |\n| Label | ۱۳ | ۱۳ | ۱۳ |\n| Button | ۱۴ | ۱۴ | ۱۴ |\n| Caption | ۱۲ | ۱۲ | ۱۲ |"
    },
    {
      "level": 3,
      "heading": "قوانین مشتق‌شده از نسبت",
      "content": "* **توکن‌های پایدار** — `Body`، `Label`، `Button`، `Caption` در همهٔ محصولات یکسان‌اند.\n  آن‌ها الگوهای UI مشترک را نمایندگی می‌کنند و فقط با دلیل usability قوی تغییر می‌کنند.\n* **توکن‌های مقیاس‌یافته** — `Display` / `Title` / `Subtitle` با شخصیت هر محصول رشد\n  می‌کنند (Dashboard = فشرده، Blog = گسترده) در حالی که همان گام متناسب را حفظ می‌کنند.\n* **بسط‌ها (Extensions)** — `display.hero`، `title.xl`، `subtitle.xl`، `body.lg` بالای\n  سطح پایهٔ خود نشسته‌اند و همان گام را دنبال می‌کنند (مثلاً `title.xl` > `title.lg` > `title.md`).\n* **نام مستعار (Alias)** — `placeholder` نام مستعارِ `caption` است (هم‌اندازه/هم‌وزن؛ فقط\n  opacity متفاوت است که توسط توکن‌های رنگ مدیریت می‌شود). یک اندازهٔ جداگانه نیست.\n* **بدون مقادیر خام در تم‌ها** — هر مقدار به یک اولیهٔ Registry ارجاع می‌دهد\n  (`fs-*`، `fw-*`، `lh-*`، `ls-*`). یک تنظیم مجدد (retune) واحد در Registry، هر سه محصول را\n  دگرسازی (re-skin) می‌کند."
    }
  ]
}