نظام التصميم

الألوان

اللون له معنى ثابت في كل الأنظمة، والنص يقول الحالة دائماً. كل زوج نص وخلفية يحقق تباين 4.5:1 على الأقل.

الهوية والإجراء

• navy-900#0B2545لون الهوية الأساسي: القائمة الجانبية، العناوين، رؤوس الجداول، الأزرار الثانوية الداكنة. نص أبيض فوقه.
• navy-700#1E3F66العنصر النشط في القائمة الجانبية فوق navy-900.
• navy-line#23456Eالفواصل داخل القائمة الجانبية فوق navy-900.
• on-navy-muted#D3DCE7روابط القائمة غير النشطة فوق navy-900 (تباين 11:1).
• on-navy-subtle#B8C4D3الملاحظات الصغيرة أسفل القائمة الجانبية فوق navy-900 (تباين 8.7:1).
• teal-700#0A7068الإجراء الرئيسي والروابط والحالة المكتملة. نص أبيض فوقه (5.6:1)، وهو نفسه نص على surface (5.6:1).
• teal-800#0A6359نص الحالة المكتملة فوق teal-100.
• teal-100#E3F3F1خلفية شارات الإنجاز وصناديق الملاحظات.
• teal-200#BFE3DEحدود صناديق الملاحظات والإنجاز فوق teal-100.
• teal-300#9FD9D2نص ثانوي مميز فوق navy-900 فقط (اسم الشركة، العناوين الصغيرة).
• focus-ring#0B2545حلقة التركيز بلوحة المفاتيح: 2px بعد فجوة 2px.

النص والأسطح والحدود

• ink#1B2430النص الأساسي فوق surface و surface-sunken.
• ink-muted#525C6Aالنص الثانوي والتسميات فوق surface و surface-sunken (6.6:1).
• surface#FFFFFFالبطاقات والجداول والنماذج.
• surface-sunken#F4F6F9خلفية الصفحة والصفوف البديلة وخلفية العناصر الهادئة.
• line#D9DEE5حدود البطاقات والفواصل.
• line-strong#8792A2حدود حقول الإدخال والأزرار الثانوية (3.1:1 فوق surface).
• slot-empty#E3E7ECتعبئة الخانات الفارغة في مخططات الساحات والسفن والصوامع.

الحالة

• warn-700#8A4B00نص الحالة المعلّقة أو التي تحتاج انتباهاً فوق warn-100 و surface.
• warn-500#B65F00مؤشر الحالة الجارية (شريط المرحلة الحالية، نقطة التنبيه).
• warn-100#FFF4E5خلفية التنبيهات والحالات المعلّقة.
• warn-200#F2D3A8حدود صناديق التنبيه فوق warn-100.
• danger-700#A12C2Cالخطأ والرفض والتجاوز. نص فوق danger-100 و surface.
• danger-100#FCEBEBخلفية رسائل الخطأ.
• danger-200#F3C9C9حدود رسائل الخطأ فوق danger-100.

أنواع البضائع

• cargo-container#2F5E91نوع البضاعة: حاويات. تعبئة الأشرطة بنص أبيض.
• cargo-container-soft#E6EEF7شارة الحاويات، ونصها cargo-container.
• cargo-container-mid#9DB8D6درجة وسطى للحاويات في مخططات الإشغال.
• cargo-bulk#8F5412نوع البضاعة: سائب. تعبئة الأشرطة بنص أبيض (5.9:1).
• cargo-bulk-soft#FBEBDDشارة السائب، ونصها cargo-bulk.
• cargo-bulk-mid#C9A36Bدرجة وسطى للسائب في مخططات الإشغال (الصوامع).
• cargo-bulk-light#E7D9C4السائب المحجوز في مخططات الإشغال.
• cargo-general#0A7068نوع البضاعة: بضائع عامة.
• cargo-general-soft#E3F3F1شارة البضائع العامة، ونصها teal-800.
• cargo-vehicle#6B4FA0نوع البضاعة: مركبات. تعبئة الأشرطة بنص أبيض.
• cargo-vehicle-soft#EEE9F7شارة المركبات، ونصها cargo-vehicle.

الخطوط

خط واحد: IBM Plex Sans Arabic، مع Tahoma وArial كبديل.

• خطة الأرصفةdisplay · 28px / 40px · 700 — عنوان الصفحة، مرة واحدة في الشاشة.
• 78%kpi · 30px / 38px · 700 — الأرقام الكبيرة في بطاقات المؤشرات.
• السفن اليومheading · 19px / 28px · 700 — عنوان البطاقة أو القسم.
• بيانات السفينةsubheading · 16px / 24px · 600 — عنوان فرعي داخل البطاقة.
• وصلت السفينة إلى منطقة الانتظارbody · 15px / 24px · 400 — النص العام.
• الرصيف 2 · تفريغ قمحtable · 14px / 22px · 400 — خلايا الجداول والقوائم الكثيفة.
• رقم IMOlabel · 13px / 20px · 600 — تسميات الحقول والشارات.
• آخر تحديث قبل 4 دقائقcaption · 13px / 20px · 400 — الملاحظات والأوقات.

المسافات والزوايا

مقياس من 4px. أقل ارتفاع لأي عنصر تفاعلي 44px.

المكونات

أصناف CSS بالبادئة pu- في components/bundle.css، وتعتمد على متغيرات tokens.css.

الغلاف

الإجراءات

التنبيه

الحالة

العرض

النماذج

الهيكل