العودة Back

نظام التصميم Design System

التوثيق الحي للرموز والمكونات والأنماط Living documentation of tokens, components, and patterns v1.0.0

الألوان Colors

لوحة الألوان الأساسية والدلالية للنظام Primary and semantic color palette

الألوان الأساسية Primary Colors

--color-primary
#2DB84C
--color-primary-hover
#25A043
--color-primary-light
#E8F8EC
--color-primary-glow
rgba(45,184,76,.4)

ألوان التمييز Accent Colors

--color-accent-gold
#F5A623
--color-accent-blue
#4A90D9
--color-orange
#FF6B35

ألوان دلالية Semantic Colors

--color-error
#FF4444
--color-success
#2DB84C
--color-warning
#F5A623

الخطوط Typography

نظام خطوط ثنائي: خط واجهة المستخدم وخط القراءة لكل لغة Dual-purpose font system: UI font & Reading font per language

عائلات الخطوط Font Families

واجهة UI عربي Arabic
Tajawal
أكاديميا منصة التعلم الذكية لطلاب الطب
300 · 400 · 500 · 700
واجهة UI إنجليزي English
Inter
Academia Smart Learning Platform for Medical Students
300 · 400 · 500 · 600 · 700
قراءة Reading عربي Arabic
Noto Naskh Arabic
أكاديميا يعاني المريض من ألم في الصدر منذ ساعتين مع ضيق في التنفس وتعرق بارد
400 · 500 · 600 · 700
قراءة Reading إنجليزي English
Source Serif 4
Academia The patient presents with acute chest pain radiating to the left arm, accompanied by diaphoresis and dyspnea.
400 · 500 · 600 · 700

قواعد الاستخدام Usage Rules

خط الواجهة --font-family-ui UI Font --font-family-ui

  • أزرار التنقل والتسميات Navigation buttons & labels
  • العناوين والبطاقات Headings & cards
  • حقول الإدخال والنماذج Form fields & inputs
  • الشريط الجانبي والأيقونات النصية Sidebar & text icons
  • الإحصائيات والنوافذ المنبثقة Stats, tooltips & modals

خط القراءة --font-family-reading Reading Font --font-family-reading

  • نص الأسئلة وخيارات الإجابة Question text & answer options
  • سيناريوهات OSCE السريرية OSCE clinical scenarios
  • رسائل المحادثة (المستخدم فقط) Chat messages (user only)
  • محتوى الدراسة والفقرات الطويلة Study content & long paragraphs
  • وصف الدورات التفصيلي Course descriptions

عينات حية Live Specimens

Heading 1 / عنوان ١

2.5rem / 700 · UI Font

Heading 2 / عنوان ٢

2rem / 700 · UI Font

Heading 3 / عنوان ٣

1.5rem / 700 · UI Font

Heading 4 / عنوان ٤

1.25rem / 700 · UI Font

Body UI text / نص الواجهة الأساسي — أكاديميا منصة التعلم الذكية

1rem / 400 · UI Font

مقارنة: خط الواجهة مقابل خط القراءة Comparison: UI Font vs Reading Font

UI --font-family-ui

دوراتي · الإعدادات · بدء الاختبار · ٢٤ درس مكتمل My Courses · Settings · Start Quiz · 24 Lessons Complete

قراءة Reading --font-family-reading

يعاني المريض البالغ من العمر ٤٥ عامًا من ألم حاد في الصدر يمتد إلى الذراع اليسرى، مصحوبًا بتعرق غزير وضيق في التنفس منذ ساعتين. ما هو التشخيص الأكثر احتمالاً؟ A 45-year-old male presents with acute chest pain radiating to the left arm, accompanied by diaphoresis and dyspnea for the past 2 hours. What is the most likely diagnosis?

/* UI Font — all interface elements */ font-family: var(--font-family-ui); /* Reading Font — content & study material */ font-family: var(--font-family-reading); /* Or use the utility class */ <p class="reading-text">...</p>

المسافات Spacing Scale

--space-xs 4px
--space-sm 8px
--space-md 16px
--space-lg 24px
--space-xl 32px
--space-2xl 48px
--space-3xl 64px

نصف قطر الحدود Border Radius

--radius-sm
8px
--radius-md
16px
--radius-lg
24px
--radius-xl
32px
--radius-full
50%

الظلال Shadows

--shadow-sm
0 2px 8px
--shadow-md
0 4px 20px
--shadow-lg
0 10px 40px
--shadow-glow-primary
Primary Glow
--shadow-glow-gold
Gold Glow

الثيمات Themes

مقارنة بين الوضع الداكن والفاتح Dark vs Light theme comparison

Dark Theme

bg · surface · elevated · text · muted

Light Theme

bg · surface · elevated · text · muted

الأزرار Buttons

<button class="btn btn-primary">...</button> <button class="btn btn-secondary">...</button> <button class="btn btn-gold">...</button> <button class="btn btn-blue">...</button> <button class="btn btn-icon btn-primary">...</button>

أزرار التحكم Control Buttons

<button class="control-btn"><i class="ph ph-moon"></i></button> <button class="control-btn active">...</button>

الحقول Input Fields

<div class="input-group"> <label>Email</label> <input type="email" placeholder="..."> <i class="ph ph-envelope input-icon"></i> </div>

البطاقات Cards

بطاقة زجاجية Glass Card

تأثير الزجاج مع تمويه الخلفية Glassmorphism with backdrop blur

<div class="glass-card"> <!-- Card content --> </div>

مكونات التقدم Progress Components

68%
85%
42%
<div class="progress-ring" style="--progress: 68%;"> <span>68%</span> </div> <div class="progress-bar"> <div class="progress-bar-fill primary" style="width: 68%;"></div> </div>

بطاقات الإحصائيات Stat Cards

24
درس مكتمل Lessons Done
47h
ساعات التعلم Learning Hours
7
أيام متتالية Day Streak
<div class="stat-card"> <div class="stat-icon primary">...</div> <div class="stat-value">24</div> <div class="stat-label">Lessons Done</div> </div>

شارة المتابعة Streak Badge

7 أيام Days
7

MIA FAB

زر ميا العائم - رفيقة التعلم الذكية MIA floating action button - AI learning companion

<div class="mia-fab"> <video autoplay loop muted playsinline> <source src="videos/mia-animations/..." type="video/mp4"> </video> </div> Sizes: 64px (desktop) → 56px (tablet) → 48px (mobile)

إمكانية الوصول Accessibility

حالات التركيز Focus States

حلقة تركيز بارزة على كل العناصر التفاعلية Visible focus ring on all interactive elements via :focus-visible

الوصول بالمفاتيح Skip Links

رابط تخطي للمحتوى الرئيسي .skip-link for keyboard-first navigation

تقليل الحركة Reduced Motion

يحترم إعدادات النظام @media (prefers-reduced-motion: reduce)

التباين العالي High Contrast

دعم كامل للتباين العالي @media (prefers-contrast: high) + forced-colors

.sr-only

محتوى مخفي بصرياً لقارئات الشاشة Visually hidden content for screen readers

ثنائية اللغة Bilingual RTL/LTR

دعم كامل للعربية والإنجليزية Full Arabic & English with dir="rtl"|"ltr" switching

نقاط التوقف Breakpoints

Desktop
> 1200px — Full sidebar + all features
Tablet
768px–1200px — Icon-only sidebar (80px)
Mobile
< 768px — Hidden sidebar, compact MIA
Mini
< 360px — Compressed spacing tokens