مبانی طراحی

منبع واحد مقادیر طراحی، فایل packages/design-tokens/tokens.json است. برای بازسازی خروجی‌ها از ریشه:

pnpm --filter @taghvimam/design-tokens gen

خروجی‌ها: وب src/styles/tokens.css؛ موبایل core/design/.../color/schemes/Generated*Scheme.kt و TokenColors.kt؛ مستندات src/css/tokens-generated.css. هیچ‌کدام دستی ویرایش نمی‌شوند.

رنگ و تم

نقش‌های اصلی:

نقش	روشن / تاریک
برند وب	#2563EB / #8FB4FF
پشت صفحه	#FBFBFC / #101318
سطح اصلی	#FFFFFF / #181C22
تعطیلات	#D41317 / #FF8A80
خطا	#BA1A1A / #FFB4AB
هشدار	#9A5B00 / #F5C064
موفقیت	#067A57 / #8AD8B4

قواعد استفاده: از نقش‌های موجود (--surface-1..3، --fg/--muted، --border و --ev-1..8) استفاده کنید و رنگ خام تازه نسازید. رویداد، رنگ تقویم والدش را به ارث می‌برد؛ نگاشت پالت در حالت تاریک را از JSON بخوانید و ترتیب رنگ‌های روشن را فرض نکنید. رنگ تعطیلات با رنگ خطای سیستم فرق دارد و وضعیت را فقط با رنگ منتقل نکنید.

مکانیزم تم: وب با data-theme="dark" عوض می‌شود؛ انتخاب کاربر در darkMode ذخیره و در نبودش، تم سیستم خوانده می‌شود. در Compose، اسکیما از seed تولید می‌شود (primary روشن #004AC6، تاریک #B4C5FF)؛ یکی‌بودن منبع به معنی یکی‌بودن hex نقش‌ها در وب و اندروید نیست.

قلم، شکل و حرکت

• قلم: Dana هدف مشترک است؛ وب وزن‌های ۴۰۰–۷۰۰ را در src/index.css self-host می‌کند. اندروید هنوز منابع sans_* را در FaTheme می‌خواند و تطابق خانواده/مقیاس با Dana تأیید نشده است. مقیاس ماشین‌خوان در type.sizes است؛ جدول دستی موازی نسازید. حروف فارسی tracking اضافی نمی‌گیرند؛ ارقام نمایشی فارسی، ساعت ۲۴تایی با صفر ابتدایی و نرمال‌سازی دادهٔ ورودی، قواعد ثابت‌اند.
• فاصله و شکل: فاصله بر پایهٔ ۴px و هدف لمس واقعی حداقل ۴۴×۴۴. شعاع‌های وب ۸/۱۲/۱۶/۲۴ و shape.xl مشترک ۲۸ است — نقش این دو را جابه‌جا نکنید.
• سایه و SVG: سایه فقط برای عناصر شناور و خط برای جداسازی درون صفحه؛ حداکثر یک اکشن اصلی پررنگ در هر نما. SVG با ابعاد صریح و currentColor؛ ایموجی فقط دادهٔ کاربر است.
• حرکت: انیمیشن با transform/opacity و easing توکن انجام می‌شود و تنظیم reduced-motion کاربر محترم است.

معیارهای مشترک (الزام، نه گزارش ممیزی کامل): کنتراست متن ≥۴٫۵:۱، حلقهٔ فوکوس آشکار ۲px و نام فارسی کنترل‌ها.

RTL و جلالی

از ویژگی‌های منطقی start/end و text-align:start استفاده کنید؛ فیلدهای تلفن/OTP/ساعت با LTR هدفمند. تقویم: هفته از شنبه شروع می‌شود، جمعه/تعطیل متمایز است، امروز با دایره و انتخاب با حلقه مشخص می‌شود.

ابزارهای وب: src/utils/persianUtils.ts و jalaliUtils.ts. دقت کنید که J.* و J.HOLIDAYS در پروتوتایپ‌ها API محصول یا مرجع رسمی تعطیلات نیستند.

دموی مبانی · پذیرش واقعی · مرزهای چیدمان