# نظام طراحی — رادار آینده دانشگاه اصفهان مرجع طراحی دیداری سامانه. پیاده‌سازی در `src/index.css` و کامپوننت‌های `src/components/ui/` (shadcn/ui روی Tailwind v4) است. --- ## ۱. پایه | مورد | مقدار | | --------------- | -------------------------------------------------------- | | فریم‌ورک CSS | Tailwind CSS v4 (`@tailwindcss/vite`) | | کتابخانه اجزا | shadcn/ui روی Radix | | جهت | RTL (`dir="rtl"` روی ``) | | قلم | Vazirmatn (وزن‌های ۴۰۰، ۵۰۰، ۶۰۰، ۷۰۰) | | حالت نمایش | روشن و تیره، با کلاس `.dark` روی `` | --- ## ۲. رنگ همه رنگ‌ها متغیر CSS در فضای رنگی `oklch` هستند و در `:root` (روشن) و `.dark` (تیره) تعریف می‌شوند. هیچ رنگ ثابتی نباید مستقیماً در کامپوننت‌ها نوشته شود. ### ۲.۱. نقش‌ها `--background` · `--foreground` · `--card` · `--popover` · `--muted` · `--accent` · `--primary` · `--secondary` · `--destructive` · `--border` · `--input` · `--ring` و مجموعه `--sidebar-*`. ### ۲.۲. رنگ‌های معنایی رنگ فقط برای **معنا** به کار می‌رود، نه تزئین. چهار جریان رصد، هر کدام یک رنگ ثابت دارند که در `src/utils/categories.ts` تعریف شده و در همه‌جا — رادار، نشان‌ها، جدول‌ها و نمودارها — یکسان است: | جریان | متغیر | سطح ملایم | | ----------------- | --------------- | -------------------- | | روندها | `--cat-trend` | `--cat-trend-soft` | | فناوری‌ها | `--cat-tech` | `--cat-tech-soft` | | سیاست‌ها | `--cat-policy` | `--cat-policy-soft` | | سیگنال‌های آینده | `--cat-signal` | `--cat-signal-soft` | جهت تغییر (رشد یا کاهش) با `--positive` و `--negative` نشان داده می‌شود. ### ۲.۳. کنتراست هر جفت رنگ متن/زمینه باید در **هر دو حالت** روشن و تیره حداقل نسبت کنتراست ۴٫۵:۱ برای متن معمولی و ۳:۱ برای متن بزرگ یا ضخیم را داشته باشد. مقادیر روشنایی رنگ‌های معنایی دقیقاً برای رسیدن به همین آستانه تنظیم شده‌اند؛ تغییر آن‌ها بدون سنجش مجدد کنتراست مجاز نیست. --- ## ۳. تایپوگرافی یک مقیاس، چهار وزن. **هیچ متنی ضخیم‌تر از ۷۰۰ نباشد** — وزن‌های ۸۰۰ و ۹۰۰ حفره‌های حروف فارسی را می‌بندند و به‌جای ایجاد سلسله‌مراتب، آن را از بین می‌برند. | کاربرد | اندازه | وزن | | ----------------- | ------------- | --- | | عنوان صفحه | `1.375rem` | ۷۰۰ | | عنوان کارت | `0.9375rem` | ۷۰۰ | | متن بدنه | `0.8125rem` | ۴۰۰ | | برچسب و فراداده | `0.75rem` | ۵۰۰ | | ریزنویس | `0.6875rem` | ۶۰۰ | - ارتفاع خط بدنه `1.75` است؛ فارسی به فضای بیشتری بین سطرها نیاز دارد. - ارقام با کلاس `.tnum` نمایش داده می‌شوند تا در ستون‌ها هم‌تراز بمانند. - اعداد همیشه فارسی‌اند (`toPersianDigits`). --- ## ۴. فاصله، گردی و ارتفاع - گردی از `--radius` (`0.7rem`) مشتق می‌شود: `radius-sm` تا `radius-2xl`. - سایه فقط برای جدا کردن لایه‌های شناور (کارت شناور، منو، دیالوگ). کارت‌های درون صفحه با خط مویین `border` از هم جدا می‌شوند، نه با سایه. - فاصله‌ها از مقیاس Tailwind؛ فاصله استاندارد میان کارت‌ها `gap-3` یا `gap-4`. --- ## ۵. حرکت - انتقال‌ها کوتاه (۱۵۰ تا ۲۰۰ میلی‌ثانیه) و فقط روی ویژگی‌های مشخص. - **`transition-all` استفاده نشود**؛ چون رنگ‌ها متغیر CSS هستند، تغییر حالت روشن/تیره باعث انیمیشن ناخواسته رنگ می‌شود. - هنگام تعویض حالت نمایش، صفت `data-theme-switching` روی `` قرار می‌گیرد و همه انتقال‌ها را موقتاً غیرفعال می‌کند. - `prefers-reduced-motion` رعایت می‌شود. --- ## ۶. نگارش متن - متن رابط کاربری **توصیفی** است، نه تبلیغاتی. برچسب کوتاه و دقیق. - عنوان‌ها بدون پسوند انگلیسی داخل پرانتز. - هیچ عدد، تاریخ یا نتیجه‌گیری‌ای در متن ثابت کدنویسی نمی‌شود؛ همه از داده محاسبه می‌شوند. - افق زمانی همیشه از `src/utils/horizon.ts` خوانده می‌شود (‏۱۴۰۵ تا ۱۴۱۵)، نه به‌صورت دستی. --- ## ۷. دسترس‌پذیری - تمرکز صفحه‌کلید با حلقه `--ring` دیده می‌شود. - هر کنترل بدون متن، `aria-label` دارد. - ناوبری روی موبایل به کشوی کناری (Sheet) تبدیل می‌شود و با صفحه‌کلید قابل استفاده است.