المرجع الحيّ للهوية: الصفحة التسويقية، الدخول، ولوحة التحكم كلها تُبنى من هذه الأجزاء. القاعدة الأولى: الأحمر القاني فعلٌ ومعنى، لا زينة — على الفاتح لا يملأ مساحات كبيرة أبدًا. القاعدة الثانية: كل حالة تُقرأ باللون وبالشكل معًا. القاعدة الثالثة: عربية أصيلة RTL بأرقام غربية، ولا تباعد أحرف في العربية إطلاقًا.The living reference: landing, auth and dashboard are all built from these parts. Rule one: deep red is action and meaning, never decoration — on light it never fills large areas. Rule two: every status reads by color and shape. Rule three: true RTL Arabic with Western digits, and Arabic is never letter-spaced.
على الفاتح: الأحمر للأزرار والروابط والتركيز والأرقام المهمة فقط. على الداكن: يُسمح له بمساحات (برك داكنة #4E0D1E) لأن الورق الداكن يحتمله. الشخصية واحدة في المظهرين — يتغير توزيع الوزن لا المزاج.On light: red is buttons, links, focus and key figures only. On dark it may take area (deep pools #4E0D1E) because dark paper carries it. One personality in both themes — the weight distribution changes, not the mood.
عنوان صفحة — 27 وزن 700Page title — 27 / 700
عنوان بطاقة — 17 وزن 700Card heading — 17 / 700
نص أساسي — 15 وزن 400، ارتفاع سطر عربي 1.85 وإنجليزي 1.65.Body — 15 / 400, Arabic leading 1.85, English 1.65.
نص ثانوي — 13 بلون خافت.Secondary — 13, muted.
PS-4821 · IBM Plex Mono — codes, MACs, times, money
IBM Plex Sans Arabic للنصوص كلها، وIBM Plex Mono لكل ما يُنسخ أو يُقارن: أسماء البطاقات، الأوامر، الأوقات، المبالغ. المونو دائمًا LTR حتى داخل نص عربي. تباعد الأحرف مسموح في العناوين الإنجليزية الكبيرة فقط (سالب طفيف).IBM Plex Sans Arabic for all text; IBM Plex Mono for anything copied or compared: card names, commands, times, money. Mono is always LTR, even inside Arabic. Letter-spacing only on large English display (slightly negative).
القاعدة إلزامية في كل مكان تظهر فيه حالة: شارة بطاقة، صف فحص، رسالة خطأ، توست. لا لون بلا شكله.Mandatory wherever a status appears: card badges, test rows, error messages, toasts. Never the color without its shape.
شارة حالةSTATUS BADGE
حبة 999px، خلفية Tint وكتابة بلون الحالة، والشكل قبل الكلمة. تُقرأ عبر الطاولة.Pill, tinted fill, state-colored text, shape before the word. Readable across a desk.
صف جدول كثيفDENSE TABLE ROW
CSS Grid بأعمدة ثابتة على الشاشة الواسعة؛ على الهاتف يعاد ترتيبها grid-areas ويُخفى الثانوي — التفاصيل في الدُّرج.CSS grid on wide screens; on phones cells re-flow via grid-areas and secondary data hides — details live in the drawer.
بحث + فلاترSEARCH + FILTER CHIPS
الفلتر المختار يمتلئ بالأحمر — من الاستعمالات القليلة المسموحة للأحمر كتعبئة، لأنه صغير وفعل صريح.The picked chip fills red — one of the few allowed red fills, because it's small and an explicit action.
تأكيد فعل خطرDESTRUCTIVE CONFIRM
إلغاء PS-4821 نهائيًا؟Revoke PS-4821 for good?
ستُلغى البطاقة ويُقطع اتصال صاحبها فورًا. لا يمكن التراجع.The card is revoked and its owner disconnected immediately. This can't be undone.
العنوان يسمّي البطاقة بالاسم، والنص يقول ماذا سيحدث لمن بالضبط، وزرّ التنفيذ يعيد الفعل بصيغته لا «موافق».The title names the exact card, the body says what happens to whom, and the action button repeats the verb — never “OK”.
توست صادقHONEST TOAST
لا نجاح زائف أبدًا: «تم» فقط عندما يؤكد الراوتر. وإلا نقول ما نعرفه وما سيحدث تاليًا.Never a false success: “done” only when the router confirms. Otherwise we say what we know and what happens next.
سطر أوامر يُنسخCOPYABLE COMMAND
داكن دائمًا في المظهرين، LTR دائمًا حتى في العربية، وزر نسخ خاص بكل أمر بمساحة لمس ≥44px — لأنه يُستعمل من الهاتف عند الراوتر.Always dark in both themes, always LTR even in Arabic, one copy button per command with a ≥44px hit area — it's used from a phone at the router.
بيانات ناقصة ≠ صفرMISSING ≠ ZERO
اليوم الذي لا بيانات له يُرسم إطارًا متقطعًا لا عمودًا صفريًا، وتقول التسمية «يوم بلا بيانات». الصفر الكاذب يجعل المالك يظن أن مشروعه توقف.A day with no data draws as a dashed outline, never a zero bar, labeled “no data”. A false zero makes an owner think their business stopped.
هيكل تحميلSKELETON
شيمر دافئ من درجات الورق — لا رمادي بارد. يُستعمل فقط عندما يكون الشكل النهائي معروفًا (جداول، بطاقات).Warm paper-toned shimmer — no cold gray. Used only where the final shape is known (tables, cards).
قسيمة الطباعةPRINT VOUCHER
PS-4821
k7f2-9m4x
أسود على أبيض بمعزل عن المظهر، حدود متقطعة للقصّ، والاسم وكلمة السر مونو كبيرة داخل إطار — لأن هذه الورقة هي المنتَج الذي يلمسه الزبون.Black on white regardless of theme, dashed cut borders, credentials big in mono inside a frame — this slip is the product the customer actually touches.
بطاقة اختيار — جديدةCHOICE CARD — NEW
للاختيار بين مسارين لكل منهما شرح سطرين — أكبر من الحبة وأصغر من الشاشة. المختار: حدّ أحمر وخلفية red-wash، بلا تعبئة.For a fork between two paths that each need a line of explanation — bigger than a chip, smaller than a screen. Selected: red border plus red-wash, never a red fill.
مقياس مسارين — جديدDUAL-TRACK METER — NEW
كميتان على محور واحد: المصمت هو ما يُستهلَك فعلًا، والمتقطّع هو المدة التي تدور فيها الساعة. يُستعمل في محرر رصيد الساعات، ويلزمه دائمًا سطر يسمّي النتيجة.Two quantities on one axis: the solid bar is what actually gets spent, the dashed frame is the window the clock runs in. Used in the prepaid editor, and always paired with a line naming the outcome.
صف دفعة — جديدBATCH ROW — NEW
صف الجدول الكثيف نفسه، بإضافة شريط استهلاك: الرقم المطلق أولًا («734 من 1000») ثم الشريط — لا شريط بلا رقم.The dense row with a consumption bar added: absolute numbers first (“734 of 1,000”), bar second — never a bar without its number.
لوح وضع النص — جديدPLACEMENT CANVAS — NEW
صورة المالك خلفية، والحقول أزرار تُسحب فوقها بإحداثيات نسبية، والقياسات بوحدة cqw حتى يبدو الكرت في الورقة كما بدا في المعاينة. لا شبكات ولا مقابض تحجيم — المعاينة هي التعليم.The owner's image sits behind; the fields are draggable buttons in relative coordinates, sized in cqw so a card on the sheet looks exactly like the preview. No rulers, no resize handles — the preview does the teaching.
توست بتراجع — جديدTOAST WITH UNDO — NEW
التوست الصادق نفسه بزرّ فعل واحد ويبقى 7 ثوانٍ بدل 4.6. أُضيف لأن التجديد فعلٌ بضغطة واحدة بلا تأكيد — والبديل كان حوار تأكيد يخرق «ضغطة واحدة». يُستعمل للأفعال القابلة للعكس فقط، ولا يحمل زرّين أبدًا.The honest toast with a single action button, alive 7s instead of 4.6. Added because renewing is one press with no confirm — the alternative was a confirm dialog, which breaks “one press”. Only for reversible actions, and never two buttons.
ترويسة مجموعة — جديدGROUP HEADER — NEW
لمن يدفع شهريًا: راوتر في البيت يبقى متصلًا طول الوقت.For households paying monthly: a router at home that stays connected.
تقسم شاشة واحدة إلى نوعين بلا تبويب: عنوان، عدّاد، خطّ يمتدّ، وسطر يشرح لمن هذا النوع. اخترناها على التبويب لأن التبويب يخفي نصف المعنى ويجعل المقارنة مستحيلة — هنا يرى المالك النوعين معًا ويقرأ الفرق مرة واحدة. المجموعة تغيب كاملة إن لم يستعملها المالك.Splits one screen into two kinds without tabs: a title, a count, a rule, and one line naming who the kind is for. Chosen over tabs because a tab hides half the meaning and makes comparison impossible — here the owner sees both kinds and reads the difference once. A group disappears entirely when the owner doesn't use it.
صف مشترك — صيغة من الصف الكثيفSUBSCRIBER ROW — DENSE-ROW VARIANT
بعدان في صف واحد: النقطة النابضة قبل الاسم تعني «متصل الآن» (فراغ محدّد = غير متصل)، والشارة تعني حالة الاشتراك بالشكل واللون. الفعل الأكثر تكرارًا — التجديد — زرّ مكتوب لا أيقونة، ويعلن المدة التي سيضيفها.Two dimensions in one row: the pulsing dot before the name means “connected now” (an outlined dot means not connected), and the badge is the subscription state in shape and colour. The most repeated action — renewing — is a written button, not an icon, and it states the days it will add.
كل شيء آخر في لوحة المنصّة — الجداول، الشارات، الأشكال، حوارات التأكيد، الدُّرج، حالات الفراغ والتحميل والعطل — هو نفسه دون تغيير. لا لون جديد ولا مقياس جديد.Everything else in the platform panel — tables, badges, status shapes, confirm dialogs, the drawer, the empty/loading/error states — is unchanged. No new colour, no new spacing step.
كسوة لوحة المنصّة — جديدPLATFORM CHROME — NEW
الكسوة داكنة دائمًا — بقيمتَي الحبر الموجودتين (#261B18 على الفاتح، #140E10 على الداكن) — بينما يبقى المحتوى ورقيًا كما في لوحة الزبون. أُضيفت لأن الشرط كان «لا يُخطئ أحد بينها وبين لوحة زبون»، والبديل الوحيد كان لونًا جديدًا. الشارة الماسية «لوحة المنصّة» تلازمها.The chrome is always dark — using the two ink values the system already has (#261B18 on light, #140E10 on dark) — while content stays paper, exactly as in the customer dashboard. Added because the requirement was “never mistaken for a customer's dashboard”, and the only other route was a new colour. The diamond “Platform admin” tag always rides with it.
شريط «أنت تدير حسابًا» — جديد“YOU ARE MANAGING” BAR — NEW
لاصق تحت الشريط العلوي، بحوض الأحمر العميق المسموح كتعبئة، ومعه إطار أحمر بسماكة 3px حول النافذة كلها. يسمّي الزبون، ويقول إن الفعل مُنسَب، ويحمل مخرجًا واحدًا. أُضيف لأن هذه أخطر حالة في المنتج ولا شيء في النظام كان يقول «أنت داخل حساب غيرك» — والتنبيه العادي يُقرأ مرة ثم يُنسى.Sticky under the top bar, in the deep-red pool that is allowed as a fill, plus a 3px red frame around the whole window. It names the customer, states that actions are attributed, and carries exactly one way out. Added because this is the most dangerous state in the product and nothing in the system said “you are inside someone else's account” — a normal banner is read once and forgotten.
حقل سرّ محجوب — جديدMASKED SECRET FIELD — NEW
صيغة من زوج «الحقل وسطر التوضيح»: القيمة لا تُعرض بعد الحفظ أبدًا — فقط قفل، ونقاط، وآخر أربعة محارف للتمييز، وتاريخ الإدخال، وطريق واحد هو الاستبدال. سطر الخطر يقول ما يتعطّل إن كان المفتاح خطأ، وزرّ التجربة يجاوره دائمًا.A variant of the field-and-hint pair: the value is never shown again after saving — a lock, dots, the last four characters so you can tell keys apart, the date it was entered, and one road forward: replace. The danger line names what breaks if the key is wrong, and a test button always sits beside it.
شاشة الدفع، وتبويب الدفعات، وطابور الحوالات عند صاحب المنصّة — كلها جداول وشارات وأشكال حالة وحوارات تأكيد ودُرج وحالات فراغ موجودة أصلًا. الجديد الحقيقي واحد: المحادثة. ولا لون جديد ولا خطوة مقياس جديدة في أي منها.The pay screen, the payments tab and the owner's transfer queue are all tables, badges, status shapes, confirm dialogs, the drawer and the empty states we already had. Only one thing is genuinely new: the conversation. No new colour and no new spacing step in any of it.
المحادثة — جديدةTHE CONVERSATION — NEW
فقاعتان بلا ذيل: الواردة بلون البطاقة وخطها، والصادرة بوشم الأحمر (--red-tint مع --red-line) — لا تعبئة حمراء كبيرة على الفاتح. الحافة 14px من مقياس الزوايا، والاصطفاف بـ flex-end فينقلب مع الاتجاه وحده. تحت كل فقاعة صادرة سطر واحد: الوقت، وعلامة واحدة «أُرسلت» أو علامتان «وصلت»، وعلامتان خضراوان «قُرئت». الفشل لا يُلوَّن فقط: مربّع أحمر + «لم تُرسل» + زر إعادة. أُضيفت لأن النظام لم يكن فيه شيء يحمل كلامًا متبادلًا بين شخصين — الجداول والشارات تصف حالة، لا حوارًا.Two tail-less bubbles: incoming in card colour with the hairline, outgoing tinted red (--red-tint with --red-line) — never a large red fill on light. Radius 14px comes from the existing corner scale, and flex-end alignment flips with direction on its own. Under every outgoing bubble one line: the time, then one tick for sent, two for delivered, two green for seen. Failure isn't colour alone: a red square, “Not sent”, and a retry button. Added because nothing in the system carried words passing between two people — tables and badges describe a state, not a dialogue.
شريط الحساب المغلق — صيغة من شريط «أنت تدير حسابًا»LOCKED-ACCOUNT BAR — A VARIANT OF THE “YOU ARE MANAGING” BAR
نفس الشريط اللاصق وحوض الأحمر العميق، بلا إطار حول النافذة — الحالة حازمة لا خطِرة. الشكل مربّع لأنه عائق، والمربّع في هذا النظام يعني «متوقّف». يقول الحالة، ثم يقول ما لم يُفقد، ثم يحمل مخرجًا واحدًا. لم تُخترع قطعة: نفس القياسات ونفس اللون ونفس بنية «حالة + سطر مطمئن + فعل واحد».The same sticky bar and deep-red pool, minus the window frame — this state is firm, not dangerous. The shape is a square because it's a stop, and in this system the square means stopped. It states the state, then states what wasn't lost, then carries exactly one way out. Nothing was invented: same measures, same colour, same “state + reassuring line + one action” structure.
ثلاث صيغ صغيرةTHREE SMALL VARIANTS
خانة شعار — مستطيل بحدّ متقطّع بمقاس الشعار، يظهر ما دام ملف الشعار غير موجود ويختفي تحته حين يوضع؛ نفس حدّ الرفع المستعمل في صورة الكرت. حقل بارز — نفس زوج «الحقل وسطر التوضيح» بارتفاع 56px وخط أحادي 19px، لأن رقم الحوالة هو الحقل الوحيد الذي لا يمرّ الدفع بدونه. شارة الانتظار — مثلّث تحذير لا دائرة نجاح: «بانتظار التأكيد» ليست «دُفع»، والشكل يقول ذلك قبل اللون.Logo slot — a dashed rectangle at logo size that shows while the file is missing and disappears under it once dropped; the same dashed upload edge as the card artwork. Prominent field — the ordinary field-and-hint pair at 56px with 19px mono, because the transaction number is the one field without which no payment can move. Pending badge — a warning triangle, not a success circle: “waiting for confirmation” is not “paid”, and the shape says so before the colour does.