الأساسيات
العناصر البصرية الأساسية المستخدمة للحفاظ على اتساق المكونات وواجهات المنتج عبر التطبيق.
رموز الألوان
تُستخدم الألوان الدلالية بدلًا من قيم الألوان الثابتة. بدّل المظهر لاختبار الوضعين الفاتح والداكن.
--background--foreground--card--primary--secondary--muted--accent--destructiveتُستخدم قوة الحدود لإظهار التسلسل البصري دون الاعتماد على ظلال زخرفية.
الحد القياسي للمكونات.
يُستخدم لإبراز العناصر المهمة.
مخصص للحالات والإجراءات الخطرة.
نظام الخطوط
مقياس خطوط متزن يفصل بوضوح بين النصوص البارزة والعناوين والمحتوى الأساسي والبيانات الوصفية.
الأسطح واستدارة الحواف
تعتمد الحاويات بشكل أساسي على تباين الخلفيات والحدود واستدارة الحواف المتناسقة.
rounded-mdrounded-lgrounded-xlاستخدم الخلفيات الخافتة لتجميع المعلومات الثانوية دون إنشاء بطاقات غير ضرورية.
يحافظ مقياس المسافات الموحد على كثافة الواجهة والعلاقات البصرية بشكل متوقع.
2346812حقول الإدخال
عرض حقول الإدخال مع المحتوى العملي والحالات المعطلة والقيم ثنائية الاتجاه.
حقل نصي قياسي
دلالات الإدخال والتحقق الخاصة بالبريد الإلكتروني
يوضح النص المساعد متطلبات الحقل دون أن ينافس عنوانه بصريًا.
البطاقات
تُستخدم البطاقات للمحتوى المستقل، ويُفضل عدم وضع كل قسم داخل بطاقة.
تعتمد البطاقة على الألوان الدلالية للنظام وتتكيّف تلقائيًا مع الوضعين الفاتح والداكن.
النوافذ المنبثقة
عدّل بياناتك هنا، ثم احفظ التغييرات عند الانتهاء.
افتح النافذة لمراجعة سلوك الطبقة المنبثقة والحقول والمسافات وتسلسل الإجراءات.
دعم اللغات
اتجاه الصفحة واللغة وسلوك المحتوى المختلط أجزاء أساسية من نظام التصميم وليست مجرد تفاصيل تنفيذية.
التنسيق
التواريخ والأرقام والعملات تُنسَّق عبر Intl حسب اللغة، ولا تُكتب يدويًا.