# Design System — المنصة الوطنية للشباب التشادي
**الإصدار:** 1.0 (الجزء 1)
**التاريخ:** مايو 2026
---
## 1. الرؤية
نظام تصميم حكومي حديث يجمع بين:
- ثقة المنصات الدولية (UNDP, World Bank)
- هوية تشاد (ألوان العلم)
- ملاءمة للشباب (مساحات، حركة، وضوح)
---
## 2. Color Palette
| Token | HEX | الاستخدام |
|-------|-----|-----------|
| `--chad-blue` | `#002664` | Primary, أزرار، روابط |
| `--chad-yellow` | `#FECB00` | Accent, CTA, تمييز |
| `--chad-red` | `#C60C30` | Danger, تنبيهات حرجة |
| `--navy` | `#0A1628` | Footer, خلفيات عميقة |
| `--gray-50` | `#F8FAFC` | خلفية الصفحة |
| `--soft-black` | `#0F172A` | نص أساسي |
**شريط العلم:** `.flag-bar` — gradient أزرق / أصفر / أحمر
---
## 3. Typography
| الدور | الخط | الوزن |
|-------|------|-------|
| عربي — body | Tajawal | 400–700 |
| عناوين | Plus Jakarta Sans | 700–800 |
| إنجليزي | Inter | 400–700 |
### Scale
- `--text-xs` → 0.75rem
- `--text-sm` → 0.875rem
- `--text-base` → 1rem
- `--text-lg` → 1.125rem
- `--text-xl` → 1.25rem
- `--text-2xl` → 1.5rem
- `--text-3xl` → 1.875rem
- `--text-4xl` → 2.25rem
- `--text-5xl` → 3rem
---
## 4. Spacing & Radius
- Spacing: scale 4px (`--space-1` … `--space-24`)
- Radius: `--radius-sm` → `--radius-2xl`, `--radius-full`
- Shadows: `--shadow-xs` → `--shadow-xl`
---
## 5. Icons
**Phosphor Icons** (Regular + Fill) — CDN:
```html
```
---
## 6. Components
| المكون | Class | الملف |
|--------|-------|-------|
| زر أساسي | `.btn-nyp-primary` | components.css |
| بطاقة | `.card-nyp` | components.css |
| إحصائية | `.card-stat` | components.css |
| نموذج | `.form-nyp-control` | components.css |
| جدول | `.table-nyp` | components.css |
| تنبيه | `.alert-nyp` | components.css |
| شارة | `.badge-nyp` | components.css |
**العرض التفاعلي:** `components-showcase.html`
---
## 7. Layout
- Header: `.site-header` — sticky, 72px
- Footer: `.site-footer` — navy + flag bar
- Container: `.nyp-container` — max 1280px
- Mobile nav: `.offcanvas-nyp`
---
## 8. Dark Mode
```html
```
- Toggle: `.theme-toggle`
- Storage: `localStorage` key `nyp-theme`
- يتبع `prefers-color-scheme` عند أول زيارة
---
## 9. RTL
- `dir="rtl"` على ``
- Bootstrap 5.3 RTL CDN
- Logical properties حيث أمكن (`margin-inline`, `inset-inline`)
---
## 10. Breakpoints
| الاسم | العرض | السلوك |
|-------|-------|--------|
| Mobile | < 576px | Offcanvas, brand نص مخفي |
| Tablet | 576–991px | Grid 2 أعمدة |
| Desktop | ≥ 992px | Nav كامل + sidebar showcase |
---
## 11. الملفات
```
assets/css/design-system.css — tokens + typography
assets/css/components.css — UI components
assets/css/layout.css — header, footer, nav
assets/js/main.js — theme, offcanvas, modals
```
---
## 12. الخطوة التالية (الجزء 2)
- `index.html` الرئيسية الكاملة
- صفحات الأخبار والفرص
- ربط المكونات ببيانات mock في `assets/js/data.js`