رفتن به محتوا
HarmoniQHarmoniQزبان طراحی هارمونیک

استفاده در وب‌سایت

زبان طراحی منبع است و وب‌سایت مصرف‌کننده. harmoniq.solutions، صفحهٔ فرود یک رویداد یا سایت SOS و ScaleLab، همه رنگ، اندازه، فونت، کامپوننت و لحن را از همین‌جا می‌گیرند و چیزی از خودشان به ظاهر برند اضافه نمی‌کنند. این صفحه به ابزار ساخت وابسته نیست: قاعده‌ها برای بلوک‌های گوتنبرگ، صفحه‌سازها (مثل Elementor) و قالب کدنویسی‌شده یکی است و فقط جای وارد کردن مقدارها فرق می‌کند.

سه قاعده

Section titled “سه قاعده”
  1. مقدار دستی ممنوع. هر رنگ، فاصله، اندازهٔ قلم و گوشه از توکن‌ها می‌آید: در کد با متغیر --hq-*، در ویرایشگرهای دیداری با رنگ و اندازهٔ نام‌داری که از توکن‌ها ساخته شده است (پایین‌تر).
  2. نسخهٔ ثابت. سایت به نشانی نسخه‌دار (/dist/0.9.0/) وصل می‌شود، نه به /dist/ بی‌نسخه. هر ارتقا آگاهانه است: تازه‌ها را بخوانید، عدد نسخه را عوض کنید، صفحه‌ها را ببینید.
  3. کمبود، اول به زبان طراحی. اگر سایت چیزی لازم دارد که این‌جا نیست، آن را در سایت نمی‌سازیم؛ اول در زبان طراحی اضافه می‌شود (روال پایین).

وصل کردن فایل‌ها

Section titled “وصل کردن فایل‌ها”

هر سایتی، با هر ابزاری، این چهار فایل را بارگذاری می‌کند. فونت‌ها کنار خود سایت میزبانی می‌شوند: فایل‌های WOFF2 راوی و Plex را از فونت‌ها بردارید و fonts.css را با مسیر همان پوشه کنارشان بگذارید.

HTML
<html lang="fa" dir="rtl">
  <head>
    <link rel="stylesheet" href="/fonts/fonts.css" />
    <link rel="stylesheet" href="https://design.harmoniq.solutions/dist/0.9.0/tokens.css" />
    <link rel="stylesheet" href="https://design.harmoniq.solutions/dist/0.9.0/components.css" />
    <script src="https://design.harmoniq.solutions/dist/0.9.0/components.js" defer></script>
  </head>
</html>

در وردپرس، همین کار در functions.php یک قالب فرزند انجام می‌شود؛ بخش دوم همان فایل‌ها را به ویرایشگر بلوک هم می‌دهد تا پیش‌نمایش ویرایشگر با سایت یکی باشد:

functions.php
// functions.php در قالب فرزند
add_action('wp_enqueue_scripts', function () {
  $v = '0.9.0';
  $base = "https://design.harmoniq.solutions/dist/$v";
  wp_enqueue_style('hq-fonts', get_stylesheet_directory_uri() . '/fonts/fonts.css', [], $v);
  wp_enqueue_style('hq-tokens', "$base/tokens.css", [], null);
  wp_enqueue_style('hq-components', "$base/components.css", ['hq-tokens'], null);
  wp_enqueue_script('hq-components', "$base/components.js", [], null, ['strategy' => 'defer']);
});
// همان فایل‌ها در ویرایشگر بلوک، تا پیش‌نمایش با سایت یکی باشد
add_action('after_setup_theme', function () {
  add_theme_support('editor-styles');
  add_editor_style(['fonts/fonts.css', 'https://design.harmoniq.solutions/dist/0.9.0/tokens.css', 'https://design.harmoniq.solutions/dist/0.9.0/components.css']);
});

رنگ‌ها و اندازه‌های نام‌دار

Section titled “رنگ‌ها و اندازه‌های نام‌دار”

ویرایشگرهای دیداری به جای متغیر CSS، فهرست رنگ و اندازهٔ نام‌دار می‌خواهند. فهرست زیر نقش‌هایی است که یک سایت لازم دارد؛ همین نام‌ها را در هر ابزاری که استفاده می‌کنید وارد کنید و رنگ یا اندازهٔ دیگری اضافه نکنید. مقدارها از توکن‌های نسخهٔ 0.9.0 خوانده شده‌اند.

نامکاربردمقدار
surfaceزمینهٔ صفحه#ffffff
surface-altزمینهٔ جایگزین بخش‌ها#f2f4f8
brand-deepزمینهٔ سرمه‌ای (سربرگ، دعوت پایانی)#061727
inkعنوان‌ها#012749
textمتن#343a3f
text-secondaryمتن فرعی#697077
borderخط‌ها#dde1e6
accentپیوند و دکمهٔ اصلی#0f62fe
accent-hoverدکمه روی نشانگر#0043ce
accent-subtleزمینهٔ برجسته#edf5ff
brandرنگ برند روی زمینهٔ تیره#33b1ff
positiveموفقیت#005d5d
warningهشدار#f1c21b
negativeخطا#da1e28

اندازهٔ قلم‌ها: caption (12px)، body-compact (14px)، body (16px)، lead (20px)، h3 (24px)، h2 (32px)، h1 (40px)، display (56px). فاصله‌ها: space-1 تا space-12 از فاصله‌گذاری.

در وردپرس

Section titled “در وردپرس”

بلوک‌های گوتنبرگ

Section titled “بلوک‌های گوتنبرگ”
  • theme.json: فایل زیر رنگ‌ها، فونت‌ها، اندازه‌ها و فاصله‌های ویرایشگر را به همین فهرست محدود می‌کند و انتخاب رنگ و اندازهٔ دلخواه را می‌بندد. آن را در قالب (یا قالب فرزند) بگذارید.
  • الگوهای بلوک (block patterns): الگوهای این سایت، مثل سربرگ صفحهٔ خدمت یا دعوت پایانی، یک بار به شکل الگوی بلوک ساخته می‌شوند و ویراستار محتوا فقط متن و عکس را عوض می‌کند.
  • کلاس‌ها: هر بلوک در بخش «پیشرفته» جای «کلاس(های) CSS اضافی» دارد؛ کلاس‌های hq-* همان‌جا می‌نشینند (مثلاً hq-card hq-card--tint روی یک بلوک گروه).
theme.json
{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "defaultPalette": false,
      "defaultGradients": false,
      "custom": false,
      "palette": [
        {
          "slug": "surface",
          "name": "surface",
          "color": "#ffffff"
        },
        {
          "slug": "surface-alt",
          "name": "surface-alt",
          "color": "#f2f4f8"
        },
        {
          "slug": "brand-deep",
          "name": "brand-deep",
          "color": "#061727"
        },
        {
          "slug": "ink",
          "name": "ink",
          "color": "#012749"
        },
        {
          "slug": "text",
          "name": "text",
          "color": "#343a3f"
        },
        {
          "slug": "text-secondary",
          "name": "text-secondary",
          "color": "#697077"
        },
        {
          "slug": "border",
          "name": "border",
          "color": "#dde1e6"
        },
        {
          "slug": "accent",
          "name": "accent",
          "color": "#0f62fe"
        },
        {
          "slug": "accent-hover",
          "name": "accent-hover",
          "color": "#0043ce"
        },
        {
          "slug": "accent-subtle",
          "name": "accent-subtle",
          "color": "#edf5ff"
        },
        {
          "slug": "brand",
          "name": "brand",
          "color": "#33b1ff"
        },
        {
          "slug": "positive",
          "name": "positive",
          "color": "#005d5d"
        },
        {
          "slug": "warning",
          "name": "warning",
          "color": "#f1c21b"
        },
        {
          "slug": "negative",
          "name": "negative",
          "color": "#da1e28"
        }
      ]
    },
    "typography": {
      "defaultFontSizes": false,
      "customFontSize": false,
      "fontFamilies": [
        {
          "slug": "fa",
          "name": "Ravi",
          "fontFamily": "Ravi, Vazirmatn, Tahoma, sans-serif"
        },
        {
          "slug": "sans",
          "name": "IBM Plex Sans",
          "fontFamily": "'IBM Plex Sans', Arial, sans-serif"
        }
      ],
      "fontSizes": [
        {
          "slug": "caption",
          "name": "caption",
          "size": "12px"
        },
        {
          "slug": "body-compact",
          "name": "body-compact",
          "size": "14px"
        },
        {
          "slug": "body",
          "name": "body",
          "size": "16px"
        },
        {
          "slug": "lead",
          "name": "lead",
          "size": "20px"
        },
        {
          "slug": "h3",
          "name": "h3",
          "size": "24px"
        },
        {
          "slug": "h2",
          "name": "h2",
          "size": "32px"
        },
        {
          "slug": "h1",
          "name": "h1",
          "size": "40px"
        },
        {
          "slug": "display",
          "name": "display",
          "size": "56px"
        }
      ]
    },
    "spacing": {
      "defaultSpacingSizes": false,
      "customSpacingSize": false,
      "spacingSizes": [
        {
          "slug": "1",
          "name": "space-1",
          "size": "8px"
        },
        {
          "slug": "2",
          "name": "space-2",
          "size": "16px"
        },
        {
          "slug": "3",
          "name": "space-3",
          "size": "24px"
        },
        {
          "slug": "4",
          "name": "space-4",
          "size": "32px"
        },
        {
          "slug": "6",
          "name": "space-6",
          "size": "48px"
        },
        {
          "slug": "8",
          "name": "space-8",
          "size": "64px"
        },
        {
          "slug": "12",
          "name": "space-12",
          "size": "96px"
        }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "var(--hq-surface)",
      "text": "var(--hq-text)"
    },
    "typography": {
      "fontFamily": "var(--hq-font-fa)"
    }
  }
}

صفحه‌سازها (مثل Elementor)

Section titled “صفحه‌سازها (مثل Elementor)”
  • رنگ‌ها و فونت‌های سراسری صفحه‌ساز را با فهرست بالا پر کنید، با همان نام‌ها، و رنگ‌های پیش‌فرض خود صفحه‌ساز را حذف یا غیرفعال کنید.
  • کلاس‌ها: هر ویجت جای «کلاس CSS» دارد؛ برای کامپوننت‌ها از کلاس‌های hq-* استفاده کنید، نه از تنظیمات رنگ و حاشیهٔ خود ویجت.
  • قالب‌های ذخیره‌شده: الگوها یک بار به شکل قالب (template) صفحه‌ساز ساخته و دوباره استفاده می‌شوند.
  • فونت را از تنظیمات صفحه‌ساز بارگذاری نکنید (گوگل فونت و مانند آن)؛ fonts.css کافی است.

قالب کدنویسی‌شده

Section titled “قالب کدنویسی‌شده”

همان HTML کامپوننت‌ها و الگوها را از صفحه‌های این سایت بردارید؛ کد هر نمونه دقیقاً همان چیزی است که در پیش‌نمایش دیده می‌شود.

چیزی کم است؟

Section titled “چیزی کم است؟”
  1. سایت می‌گوید چه چیزی کم است: کامپوننت، الگو، توکن یا قاعدهٔ نگارشی.
  2. آن چیز در مخزن design-language روی شاخهٔ proposal/* ساخته می‌شود، با صفحهٔ مستندات خودش.
  3. بعد از تایید، روی main می‌رود و نسخهٔ تازه منتشر می‌شود.
  4. سایت عدد نسخه را بالا می‌برد و آن را به کار می‌گیرد.
در کار سایت پیدا شد جایش
رنگ، فاصله یا اندازهٔ تازه زبان طراحی، به شکل توکن
کامپوننت تازه (سربرگ و پابرگ سایت، اسلایدر نمونه‌کار) زبان طراحی، کامپوننت‌ها
چیدمان تازهٔ صفحه (دربارهٔ ما، تیم، فهرست مقاله‌ها) زبان طراحی، الگوها
قاعدهٔ نگارشی یا واژهٔ تازه زبان طراحی، لحن و واژه‌نامه
متن صفحه‌ها، عکس‌ها، منو، تنظیمات وردپرس و افزونه‌ها فقط سایت

شروع کار با Claude

Section titled “شروع کار با Claude”

برای کار روی سایت در یک گفت‌وگوی تازه با Claude، این متن را در پیام اول بفرستید. اگر Claude به کد دسترسی دارد، مخزن design-language را هم برای خواندن به آن بدهید.

روی وب‌سایت هارمونیک (harmoniq.solutions) کار می‌کنیم. مرجع همهٔ تصمیم‌های ظاهری و نوشتاری، زبان طراحی هارمونیک است:
https://design.harmoniq.solutions/resources/website/


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


قواعد:
- نسخهٔ ثابت 0.9.0 را استفاده کن (https://design.harmoniq.solutions/dist/0.9.0/tokens.css، components.css و components.js).
- هیچ رنگ، فاصله یا اندازه‌ای را دستی ننویس؛ فقط متغیرهای --hq-* و کلاس‌های hq-*، یا رنگ‌ها و اندازه‌های نام‌داری که این صفحه برای ویرایشگر وردپرس تعیین کرده است.
- اگر چیزی لازم شد که در زبان طراحی نیست (کامپوننت، الگو، توکن یا قاعده)، خودت نسازش. بگو چه چیزی کم است تا اول در زبان طراحی اضافه و منتشر شود.
- متن‌ها طبق «لحن و نگارش» نوشته شوند.