سیستم طراحی پیشنهادیِ وب‌سایت معرفی محصول

هویت روشن.
اجزای منسجم.

یک زبان بصری فارسی برای معرفی «استراتژی تعاملات آداک»؛ با تایپوگرافی خوانا، رنگ‌های سبزآبی و مرجانی و کامپوننت‌هایی که در سایت واقعاً استفاده شده‌اند.

01 / FOUNDATION

مبتنی بر محصول؛ نه پروپوزال.

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

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

فارسی و راست‌به‌چپروشن و تیرهبدون وابستگی به فریم‌ورک

02 / COLOR

سبزآبی برای مسیر؛ مرجانی برای تأکید.

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

--brand: #087F73;
--brand-hover: #066B61;
--mint: #D6F3DF;
--coral: #FF8B70;
--ink: #102C2A;
--canvas: #F8FAF7;

حالت تیره، توکن‌های سطح و متن را جایگزین می‌کند. دکمهٔ بالای صفحه هر دو حالت را نشان می‌دهد. رنگ‌های اصلی مهم از نظر نسبت کنتراست در گزارش آزمون بررسی شده‌اند؛ این بررسی گواهی کامل دسترس‌پذیری نیست.

03 / TYPOGRAPHY

شخصیت در تیتر. خوانایی در متن.

ESTEDAD VARIABLE · DISPLAY · 800–900

تعامل بهتر، از یک استراتژی روشن.

VAZIRMATN VARIABLE · BODY · 400–500

از هدف و پرسونا تا تجربه و سفر مشتری؛ طراحی استراتژی، بررسی تصمیم و پایش را در آداک دنبال کنید.

VAZIRMATN VARIABLE · LABEL · 600–650

مدیریت تجربه / بهترین اقدام بعدی / استودیو عامل‌ها / پایش

فونت‌ها به‌صورت آنلاین از Fontsource روی jsDelivr فراخوانی می‌شوند. فایل فونت در بسته قرار ندارد. در نبود دسترسی، Noto Sans Arabic یا Tahoma به کار می‌رود؛ پیش‌نمایش‌های محیط آزمون با قلم جایگزین رندر شده‌اند.

--font-display: "Estedad Variable", "Vazirmatn Variable",
                "Noto Sans Arabic", Tahoma, sans-serif;
--font-body: "Vazirmatn Variable", "Noto Sans Arabic",
             Tahoma, sans-serif;

04 / SPACE & SHAPE

ریتم چهارپیکسلی، فرم‌های نرم.

فاصله‌ها از پایهٔ چهار پیکسل ساخته می‌شوند. شعاع ده پیکسل برای کنترل، شانزده برای پنل و بیست‌وچهار پیکسل برای کارت‌های اصلی به کار می‌رود.

4px

8px

12px

16px

24px

32px

48px

64px

96px

10px16px24px32px

عرض محتوای اصلی حداکثر ۱۲۴۰ پیکسل است. هدر، ویترین، کارت‌ها و مسیر طراحی در موبایل به چیدمان مناسب عرض کوچک تبدیل می‌شوند.

05 / COMPONENTS

همان اجزایی که در سایت می‌بینید.

دکمه‌های نمونه، توکن مربوط را کپی می‌کنند.

نمونهٔ کارت

استراتژی را روشن کنید.

یک کارت با عنوان، توضیح کوتاه و یک اقدام مشخص؛ بدون ادعای عملکرد تأییدنشده.

درخواست دموی استراتژی

عنوان برنامهٔ نمونه

یک نمونهٔ پرسش بازشونده

این جزء با کنترل بومی مرورگر ساخته شده و بدون جاوااسکریپت نیز باز و بسته می‌شود.

06 / INTERACTION

رفتار قابل‌پیش‌بینی.

جزء	رفتار پیاده‌شده
تب‌های محصول و گام‌ها	انتخاب با کلیک و کلیدهای جهت؛ انتخاب فعال با ARIA
جست‌وجوی سایت	Ctrl / Cmd + K؛ جست‌وجوی فارسی و بستن با Esc
دیالوگ‌ها	dialog بومی، بازگشت فوکوس و بستن با Esc
ذخیرهٔ راهنما	فقط پس از اقدام صریح؛ localStorage مرورگر
دریافت راهنما	JSON محلی؛ بدون ارسال به سرور
کاهش حرکت	رعایت prefers-reduced-motion
فونت و شبکه	فونت آنلاین، قلم جایگزین؛ اپ فقط با اقدام کاربر باز می‌شود

07 / HANDOFF

برای ادامهٔ توسعه آماده است.

فایل‌های HTML، CSS و JavaScript جدا هستند. نام‌ها و مسیرهای محصول در site-data.js، توکن‌ها در tokens.css و design-tokens.json قرار دارند. README-fa.md و اسناد داخل docs، روش اجرا، منابع و محدودیت‌های آزمون را شرح می‌دهند.

دریافت توکن‌های JSON

این بسته فرانت‌اند معرفی محصول است؛ روی دامنه منتشر نشده و به API بک‌اند، فرم ارسال، CRM یا موتور هوش مصنوعی متصل نیست.