مبانی دیزاین
توکنها کوچکترین واحدهای سیستماند: رنگ، قلم، فاصله، شعاع، سایه، آیکون و حرکت. هیچ مقدار خامی خارج از این توکنها در کد محصول نباید ظاهر شود — نمونههای این صفحه با همان توکنها رندر میشوند، پس با تغییر پوسته (دکمه خورشید/ماه بالا) همهچیز زنده عوض میشود.
۱رنگها
پالت از شش نقش ساخته شده: پسزمینه، سطح، متن، خط، برند و معنایی — بهعلاوه یک پالت ۸رنگی مقولهای برای تقویمها و رویدادها. هر توکن در پوسته تاریک معادل روشنشده خودش را دارد؛ کامپوننتها هرگز رنگ خام نمیبینند.
برند — آبی واحد #2563EB
یک آبی واحد در کل محصول (وب و موبایل). آبی برند رنگ کنش است: دکمه اصلی، حالت فعال، لینک — و هیچجای دیگری.
--brand · #2563EB--brand-deep · #004AC6--brand-container · ۱۱٪--on-brand-container · #0B2E6B--brand · #8FB4FFسطوح — نردبان پنجپله
بوم تا عمیقترین سطح. جداسازی سطحها با خط انجام میشود، نه سایه؛ سایه فقط برای لایههای شناور (§سایه).
--bg--surface--surface-1--surface-2--surface-3| توکن | روشن | تاریک | کاربرد نمونه |
|---|---|---|---|
| --bg | #FBFBFC | #101318 | پشت صفحه اصلی و ستونهای تقویم |
| --surface | #FFFFFF | #181C22 | کارت، دیالوگ، نوار بالا |
| --surface-1 | #F5F6F8 | #1F242B | هاور دکمه outline، زمینه فرمهای داخل دیالوگ |
| --surface-2 | #EFEFF2 | #262B33 | هاور آیکونباتن، سلولهای خالی ماه |
| --surface-3 | #E8E9ED | #2E343D | سوییچ خاموش، ریلهای عقبتر |
متن و خط
--fg · #1B1E24--muted · #565D6A--faint · #8A909C--border--border-strongرنگهای معنایی
قرمز تعطیلات با قرمز خطا عمداً متفاوتاند: تعطیلات داده تقویم است، خطا پیام سیستم.
--holiday · #D41317--error · #BA1A1A--warn--ok--ok-dot| توکن | روشن | تاریک | فقط کجا |
|---|---|---|---|
| --holiday | #D41317 | #FF8A80 | روز جمعه و تعطیلات، تاریخ موعد گذشته، دکمه حذف |
| --error | #BA1A1A | #FFB4AB | خطای اعتبارسنجی فرم، شکست عملیات |
| --warn + --warn-container | #9A5B00 | #F5C064 | بنر تعارض همگامسازی، پیامهای احتیاطی |
| --ok | #067A57 | #8AD8B4 | وضعیت «انجامشده»، تأیید موفق |
پالت مقولهای تقویمها — ۸ رنگ
هر تقویمِ کاربر یکی از این هشت رنگ را میگیرد؛ رویدادها، نقطهها و چکباکسها همه از رنگ تقویم والد رنگ میگیرند. در پوسته تاریک همین رنگها با color-mix روشن میشوند.
--ev-1--ev-2--ev-3--ev-4--ev-5--ev-6--ev-7--ev-8بایدر
- آبی برند فقط برای اکشن اصلی و حالت فعال — در هر نما حداکثر یک دکمه پر.
- قرمز تعطیلات فقط روی داده تقویم (روز، تاریخ، موعد) و دکمه حذف.
- همه رنگهای جدید از توکنها یا color-mix روی توکنها ساخته میشوند.
نبایدر
- هگز خام جدید در کامپوننتها — پوسته تاریک را میشکند.
- قرمز تعطیلات برای برچسب «جدید»، بج تخفیف یا دکوراسیون.
- گرادیان روی سطوح بزرگ؛ سایهدادن بهجای خط برای جداسازی کارتهای درونصفحه.
۲تایپوگرافی
یک خانواده واحد: دانا (DanaFaNum). برای محصول دادهمحورِ راستچین، خانوادهٔ تک هم سادهتر است و هم رندر ارقام فارسی را در همه وزنها یکدست نگه میدارد؛ تمایز سلسلهمراتب با اندازه و وزن ساخته میشود، نه فونت دوم.
قواعد ارقام فارسی
| قاعده | مثال درست | ابزار |
|---|---|---|
| همه اعداد نمایشی فارسیاند | ۷ شهریور · ۰۹:۳۰ · ۱۵ رویداد | J.fa(n) — رقمفرد |
| اعداد دورقمی با صفر ابتدایی | ۰۹:۰۵ | J.fa2(n) |
| ورودی کاربر با رقم فارسی پذیرفته و نرمال میشود | «۰۹۱۲…» → 0912… | J.en(str) |
| اعداد جدولی (ساعت، شمارنده) همعرض میمانند | 08:00 ← 09:00 ← 10:00 | کلاس .num (tabular-nums) |
| letter-spacing در متن فارسی هرگز افزایش نمییابد | — | — |
۳فاصله و شکل
واحد پایه ۴ پیکسل است؛ همه فاصلهها مضرب آناند. عمق احساس فضا از فاصله میآید، نه از خط و سایه اضافه.
نردبان فاصله
۴ و ۸: داخل کامپوننت (گپ آیکون-متن) · ۱۲ و ۱۶: بین فیلدها و بخشها · ۲۰ و ۲۴: پدینگ بدنه دیالوگ و کارت · ۳۲+: بین بخشهای صفحه · ۴۴: حداقل هدف لمسی
شعاع گوشهها
| شعاع | توکن | کجا |
|---|---|---|
| 8 | --r-sm | آیتم منو، بلاک کد، سواچ |
| 10 | — | فیلد ورودی، سلکت، جعبه OTP |
| 12 | --r-md | دکمه، کارت، منو، توست (پیشفرض کامپوننتها) |
| 16 | --r-lg | دیالوگ دسکتاپ |
| 24 | --r-xl | گوشههای بالای برگه پایین موبایل |
| کامل | 99px | چیپ، تب قرصی، نشان، دکمه آیکونی، روزهای تقویم |
قاعده ترکیب: یک نما حداکثر سه شعاع متفاوت همزمان نشان میدهد؛ نزدیکترین شعاع به مقیاس نردبان رند میشود، مقدار سافارشی ساخته نمیشود.
۴سایه و عمق
عمق در تقویمم معنادار است: هرچیز «شناور روی صفحه» سایه دارد، هرچیز «داخل صفحه» با خط جدا میشود. سه سطح سایه + یک اسکریم:
بایدر
- سایه فقط وقتی عنصر روی محتوا شناور میشود (منو، دیالوگ، FAB، توست).
- با بازشدن لایه شناور، پشتصحنه با اسکریم + بلور ملایم کمرنگ میشود.
نبایدر
- سایه روی کارتهای داخل صفحه — خط ۱px --border کافی است.
- سایههای رنگی یا چندلایه نمایشی برای «جلب توجه».
۵آیکونوگرافی
آیکونها SVG درونخطیاند با این قرارداد ثابت: شبکه ۲۴×۲۴، ضخامت خط ۱٫۸، انتهای گرد، بدون پرشدگی، رنگ از currentColor. هیچوقت ایموجی جای آیکون رابط نمینشیند (ایموجی فقط داده کاربر است — نام تقویمها).
| اندازه | کجا |
|---|---|
| 24 | FAB، ریل ناوبری |
| 20 | دکمه آیکونی استاندارد (40px) |
| 17 | آیکون داخل دکمه متنی و آیتم منو |
| 16 | دکمه آیکونی کوچک (30px) و متادیتای فشرده |
همیشه width و height صریح روی SVG بنویسید — SVG بدون ابعاد درون چیدمان فلکس به ابعاد پیشفرض عناصر جایگزین باد میکند.
<!-- قرارداد آیکون --> <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">…</svg>
۶حرکت
حرکت باید کارِ رابط را توضیح دهد: از کجا آمد، کجا میرود. یک منحنی واحد برای همه:
| مقدار | کاربرد |
|---|---|
| --ease: cubic-bezier(.2,0,0,1) | همه ترنزیشنها — شتابگیری سریع، فرود نرم (امضای MD3) |
| 80–120ms · transform | فشردن دکمه (translateY 1px)، مقیاس FAB |
| 150–160ms · رنگ/خط/پسزمینه | هاور چیپ، دکمه، آیکونباتن |
| 180–240ms · transform+opacity | باز/بستهشدن دیالوگ (14px جابهجایی + محو)، توست، اسکریم |
| 800ms · چرخش خطی | اسپینر بارگذاری |
۷جهت و تقویم جلالی
این بخش تفاوت تقویمم با یک دیزاینسیستم عمومی است: راستچین بودن و تقویم جلالی جزو بنیادها هستند، نه تنظیمات منطقهای.
راستچین اصیل
| بهجای | بنویس | چرا |
|---|---|---|
| margin-left / right | margin-inline-start / end | با جهت سند خودکار برمیگردد |
| left / right (position) | inset-inline-start / end | مثل بالا |
| text-align: right | text-align: start | پیشفرض RTL خودش درست است |
| آیکون جهتدار بدون قرینه | قرینه در RTL | فلشهای «بعدی/قبلی» ماه باید به چپ/راست معنی درست بدهند |
| رقم و ساعت بهارث از جهت متن | .ltr یا unicode-bidi هدفمند | 09:30 در جمله فارسی نباید به 30:09 برسد |
شبکه هفته و تعطیلات
هفته از شنبه شروع میشود و سرستونها ش ی د س چ پ ج است (آرایه J.WD_SHORT). جمعه همیشه قرمز است و روزهای تعطیل ثابت شمسی هم — با همان توکن --holiday.
قرمز = جمعه/تعطیل · توپ آبی = امروز (پر برند) · حلقه = انتخابشده — نمونه زنده کامپوننت شبکه ماه
تعطیلات ثابت شمسی
جدول J.HOLIDAYS این روزها را نگه میدارد (ماه-روز به حساب جلالی): ۱ تا ۴ فروردین (نوروز) · ۱۲ و ۱۳ فروردین (جمهوری اسلامی و طبیعت) · ۱۵ خرداد · ۱۳ آبان · ۲۲ بهمن · ۱۴ اسفند · ۲۹ اسفند (ملی شدن نفت). J.isHoliday(date) جمعهها را هم شامل میشود.
API موتور جلالی
| تابع | خروجی | مثال |
|---|---|---|
| J.dateToJ(date) | {jy, jm, jd} | → ۱۴۰۵/۶/۷ |
| J.jToDate(j) | Date میلادی | برای محاسبات و مقایسه |
| J.todayJ() | امروز جلالی | لنگر «امروز» در همه نماها |
| J.fmtJ(j) / fmtJMed / fmtJFull | رشته تاریخ | «۷ شهریور ۱۴۰۵» / «۷ شهریور» / «شنبه ۷ شهریور ۱۴۰۵» |
| J.isHoliday(j) · isFriday(j) | boolean | رنگکردن روز و خطخوردن موعد |
| J.jDaysInMonth(jy, jm) | ۲۹/۳۰/۳۱ | ساخت شبکه ماه با کبیس دقیق |
| J.jAddDays(j, n) · cmpJ(a, b) | جابهجایی / مقایسه | رویدادهای چندروزه و مرتبسازی |
سال کبیسی با الگوریتم ۳۳ساله محاسبه میشود و در برابر تاریخهای مرجع (مثل ۱ فروردین ۱۴۰۵ = 21 March 2026) تست شده است.