5.7 KiB
نظام طراحی — رادار آینده دانشگاه اصفهان
مرجع طراحی دیداری سامانه. پیادهسازی در src/index.css و کامپوننتهای
src/components/ui/ (shadcn/ui روی Tailwind v4) است.
۱. پایه
| مورد | مقدار |
|---|---|
| فریمورک CSS | Tailwind CSS v4 (@tailwindcss/vite) |
| کتابخانه اجزا | shadcn/ui روی Radix |
| جهت | RTL (dir="rtl" روی <html>) |
| قلم | Vazirmatn (وزنهای ۴۰۰، ۵۰۰، ۶۰۰، ۷۰۰) |
| حالت نمایش | روشن و تیره، با کلاس .dark روی <html> |
۲. رنگ
همه رنگها متغیر 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روی<html>قرار میگیرد و همه انتقالها را موقتاً غیرفعال میکند. prefers-reduced-motionرعایت میشود.
۶. نگارش متن
- متن رابط کاربری توصیفی است، نه تبلیغاتی. برچسب کوتاه و دقیق.
- عنوانها بدون پسوند انگلیسی داخل پرانتز.
- هیچ عدد، تاریخ یا نتیجهگیریای در متن ثابت کدنویسی نمیشود؛ همه از داده محاسبه میشوند.
- افق زمانی همیشه از
src/utils/horizon.tsخوانده میشود (۱۴۰۵ تا ۱۴۱۵)، نه بهصورت دستی.
۷. دسترسپذیری
- تمرکز صفحهکلید با حلقه
--ringدیده میشود. - هر کنترل بدون متن،
aria-labelدارد. - ناوبری روی موبایل به کشوی کناری (Sheet) تبدیل میشود و با صفحهکلید قابل استفاده است.