93 lines
8.0 KiB
Markdown
93 lines
8.0 KiB
Markdown
# نظام طراحی سامانه هوشمندی راهبردی دانشگاه اصفهان (Design System Specification)
|
||
|
||
این سند مرجع رسمی و استانداردهای طراحی دیداری، سلسلهمراتب تایپوگرافی، پالت رنگ، الگوهای کامپوننت و راهنمای نگارش سامانه **«رادار آینده دانشگاه اصفهان»** است.
|
||
|
||
---
|
||
|
||
## ۱. تایپوگرافی (Typography Standard)
|
||
|
||
### ۱.۱. قلم واحد سازمانی (Universal Font Family)
|
||
- تمام متون، اعداد، نشانها، دکمهها و عناصر واسط کاربری باید منحصراً از قلم **Vazirmatn** استفاده کنند.
|
||
- استفاده از فونتهای مونو یا سیستمی (`font-mono`, `Consolas`, `Courier`) برای اعداد و برچسبهای فارسی **اکیداً ممنوع** است. اعداد فارسی باید با وزن متناسب قلم وزیرمتن نمایش داده شوند.
|
||
|
||
```css
|
||
*, ::before, ::after {
|
||
font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif !important;
|
||
}
|
||
```
|
||
|
||
### ۱.۲. مقیاس و سلسلهمراتب تیترها (Heading Hierarchy & Contrast)
|
||
- **قاعده اساسی**: تیترها و عناوین باید به رنگ **مشکی کامل** (`#0f172a` یا `#000000`)، با وزن **بسیار ضخیم (Bold 800 - Black 900)** و با اندازه چشمگیر نسبت به متن بدنه باشند تا سلسلهمراتب بصری در یک نگاه درک شود.
|
||
|
||
| سطح عنصر | نام کلاس | اندازه فونت (rem / px) | وزن قلم | رنگ متن | کاربرد |
|
||
|---|---|---|---|---|---|
|
||
| **Display / Hero** | `.text-display` | `2.25rem` (36px) | 900 (Black) | `#0f172a` | ارقام کلیدی داشبورد و شاخصهای آمادگی ۱۴۱۵ |
|
||
| **Heading 1** | `.heading-1` / `h1` | `1.75rem` (28px) | 900 (Black) | `#0f172a` | عنوان اصلی هر صفحه |
|
||
| **Heading 2** | `.heading-2` / `h2` | `1.25rem` (20px) | 800 (ExtraBold) | `#0f172a` | تیتر بخشهای اصلی و سرفصلها |
|
||
| **Heading 3** | `.heading-3` / `h3` | `1.00rem` (16px) | 800 (ExtraBold) | `#0f172a` | عنوان کارتهای رادار و پنلهای تحلیلی |
|
||
| **Heading 4** | `.heading-4` / `h4` | `0.875rem` (14px) | 700 (Bold) | `#1e293b` | عناوین فرعی و آیتمهای لیست |
|
||
| **Body Main** | `.body-main` / `p` | `0.8125rem` (13px) | 500 (Medium) | `#334155` | متن توضیحات و خلاصههای سیاستی |
|
||
| **Caption / Meta**| `.caption` | `0.75rem` (12px) | 600 (SemiBold) | `#64748b` | اطلاعات فراداده، افق زمانی و منابع |
|
||
| **Badge / Chip** | `.badge-label` | `0.6875rem` (11px) | 700 (Bold) | متناسب با دسته | برچسبهای وضعیت و شمارندهها |
|
||
|
||
---
|
||
|
||
## ۲. پالت رنگ و کنتراست (Color Palette)
|
||
|
||
### ۲.۱. بوم و پسزمینهها (Canvas & Surfaces)
|
||
- **بوم اصلی (Canvas Background)**: `#f4f6fb` (خاکستری سرد و ملایم با مش گرادینت سبک)
|
||
- **کارتها (Card Surface)**: `#ffffff` (سفید یکدست با سایه نرم `0 8px 24px -4px rgba(15,23,42,0.04)`)
|
||
- **کارتهای فرعی (Subtle Surface)**: `#f8fafc`
|
||
- **خطوط حاشیه (Borders)**: `#e2e8f0` (خطوط تفکیککننده محکم اما چشمنواز)
|
||
|
||
### ۲.۲. رنگهای موضوعی پاستلی (Pastel Theme Tints)
|
||
برای طبقهبندی هوشمندی آینده و ایجاد زیبایی در ساختار جعبههای بنتو:
|
||
- **روندها (Trends)**: پسزمینه `#eaf3fe` | حاشیه `#c8e0fd` | متن `#0284c7`
|
||
- **فناوریها (Tech)**: پسزمینه `#e6f6f1` | حاشیه `#c4ecdf` | متن `#059669`
|
||
- **سیاستها (Policies)**: پسزمینه `#fef7e6` | حاشیه `#fde8b8` | متن `#d97706`
|
||
- **سیگنالهای آینده (Signals)**: پسزمینه `#fdecf2` | حاشیه `#f9cbd9` | متن `#e11d48`
|
||
- **برنامهریزی ۱۴۱۵ / مثلث آینده**: پسزمینه `#f3effe` | حاشیه `#ded2fd` | متن `#7c3aed`
|
||
|
||
---
|
||
|
||
## ۳. نوار کناری ناوبری (Sidebar Standard)
|
||
|
||
- **بدنه نوار کناری**: پسزمینه سفید خالص (`#ffffff`)، مرز چپ با صفحه `#e2e8f0`، عرض ۲۷۰ پیکسل.
|
||
- **عناوین بخشها**: خاکستری ملایم `#94a3b8`، فونت ۱۰.۵ پیکسل، وزن ۸۰۰، حروف کوچک، با فاصله مناسب از گروه قبلی.
|
||
- **دکمههای ناوبری**:
|
||
- *حالت عادی*: متن `#475569`، آیکون ۲۰ پیکسل با رنگ `#64748b`، گوشههای گرد ۱۲ پیکسل (`rounded-xl`).
|
||
- *حالت شناور (Hover)*: پسزمینه `#f1f5f9`، متن مشکی `#0f172a`.
|
||
- *حالت فعال (Active)*: پسزمینه سرمهای تیره لوکس `#0f172a`، متن سفید خالص `#ffffff`، آیکون روشن، سایه ملایم.
|
||
- **شمارندهها و برچسبها**:
|
||
- نشانهای عددی باید در سمت چپ آیتم قرار گیرند (`align-self: flex-start` در ساختار راستبهچپ).
|
||
- متن شمارنده کاملاً با قلم وزیرمتن فارسی و بدون فونت مونو یا فاصله بیمورد درج شود.
|
||
- **حذف متون دوزبانه زاید**:
|
||
- تمامی پرانتزهای انگلیسی غیرضروری مانند `(Overview)`، `(Trends)`، `(Tech)`، `(Policies)`، `(Signals)`، `(Spider Gap)`، `(PULL/PUSH)` و `(CRUD)` در نوار کناری **ممنوع** بوده و با واژگان حرفهای و فاخر فارسی جایگزین میشوند.
|
||
|
||
---
|
||
|
||
## ۴. استانداردهای هندسی نمودارها و مدلهای بصری
|
||
|
||
### ۴.۱. مثلث هوشمندی آینده (Futures Triangle Geometry)
|
||
- **تناسب ابعادی استاندارد**:
|
||
- از ترسیم مثلثهای عریض، پخ و تخت (نسبت عرض به ارتفاع ۲ به ۱) اکیداً پرهیز شود.
|
||
- نسبت ارتفاع به قاعده مثلث باید بین **۰.۸۵ تا ۰.۹۰** باشد (شبیه به مثلث متساویالاضلاع کشیده و متوازن).
|
||
- اضلاع مثلث باید با خطوط رنگی ضخیم (حداقل ۴ پیکسل) و گرادینتهای جهتدار متصل شوند.
|
||
- گره مرکزی (هوشمندی دانشگاه اصفهان) دقیقاً در گرانیگاه هندسی $(x_c, y_c)$ قرار گیرد.
|
||
|
||
### ۴.۲. رادار دایرهای آیندهپژوهی (Futures Radar)
|
||
- دایره مرکزی سفید مرواریدی، پرههای رنگی ملایم برای ۴ ربع، نقاط سیگنال با حاشیه سفید تمیز و عدد شدت اثر درون نقطه.
|
||
|
||
### ۴.۳. نمودار عنکبوتی ۱۰ بعدی (Spider Gap Chart)
|
||
- چندضلعی هدف دانشگاه اصفهان ۱۴۱۵ به رنگ سبز زمردی (`#00b894`) و چندضلعی وضع موجود به رنگ کهربایی (`#f59e0b`).
|
||
|
||
---
|
||
|
||
## ۵. راهنمای زبان و لحن سازمانی (Content & Tone Standards)
|
||
|
||
1. **حذف واژگان تکراری و عبارات توخالی (Zero AI-Slop)**:
|
||
- حذف برچسبهای آکادمیک گلدرشت مانند `نظریه سوهیل عنایتالله (Sohail Inayatullah)` از هدر صفحات و استفاده از برچسبهای راهبردی خلاصه (`چارچوب آیندهپژوهی`).
|
||
- حذف توضیحات شعاری و کشدار؛ محتوا باید مستقیماً پیامد دانشگاهی، عدد شاخص یا اقدام فوری را گزارش دهد.
|
||
2. **نگارش فارسی معیار و روان**:
|
||
- به کارگیری اصطلاحات دقیق آیندهپژوهی و مدیریت دانشگاهی (مانند: *سیگنالهای ضعیف، افق زمانی، شکاف بلوغ، شایستگیهای نوظهور، آمایش آموزشی*).
|