الإصدار 1.0 · 27 أكتوبر 2026

نظام التصميم

نظام تشغيل وثقة للعلاقة بين الأسرة والعاملة المنزلية والمكتب. هنا كل حاجة الفريق محتاجها: الألوان والخطوط والمكوّنات وأنماط الثقة، وشاشات تطبيق الأسرة وتطبيق العاملة والموقع واللوحات.

شوف المكوّنات شاشات تطبيق الأسرة إزاي أستخدمه

6واجهات كاملة

211أيقونة

RTLأصلي، وLTR مرآة

9:41LTE

مساء الخيرأهلاً يا مها

مقابلة بكرة

5:30 م، فيديو جوه أمانة مع منى ع.

المرشحاتشوف الكل

24.8

منى ع.

القاهرة الجديدة

9,000 ج / شهر

14.6

سارة م.

مدينتي

7,500 ج / شهر

9:41LTE

ملف المرشحة

نادية إ.

القاهرة الجديدة

8,500 ج / شهر

4سنين خبرة

4.6تقييم

2أسر

جاهزة للتعيين

مصرية، مفيش تصريح مطلوب.

توقيع العقد900

نهاية التجربة1,200

بعد 90 يوم900

موثّقة المستوى 2اتراجعت 2 أكتوبر

مقابلة بكرة 5:30 مفيديو جوه أمانة

الشاشات والـ Wireframes

موبايل

تطبيق الأسرةالبحث، الملف، العقد، التجربة، المتابعة.افتح

موبايل

تطبيق العاملةبالصوت والأيقونات ولغات متعددة.افتح

ويب

ويب الأسرةالبحث والملف والعقد والمرتب على الشاشة الكبيرة.افتح

ويب

الموقع التسويقيالصفحة الرئيسية، المستويات، المكاتب، الأسعار.افتح

لوحة

لوحة المكتبالطلبات، العاملات، العقود، العمولات، الامتثال.افتح

لوحة

لوحة الإدارة والثقة والسلامةمراجعة المستندات، البلاغات، قواعد الامتثال، السجل.افتح

رحلات

رحلات المستخدمخريطة لكل دورة: التعيين، التوثيق، الامتثال، البلاغات، المرتب. كل خطوة ليها مين بيتحرك، وإحساس الناس، ونقطة الألم اللي بنحلها.افتح

طباعة

المستندات والـ PDF12 مستند بمقاساته الحقيقية: عقد، فاتورة ضريبية، إيصال حراري وA5، قسيمة مرتب، شهادة توثيق، تقارير، بطاقة عاملة، ونماذج. كل واحد بشخصيته وفيه PDF جاهز.افتح

الأساسيات والمكوّنات

الألوانالأساسي والحالات والتباين. الخطوطReadex Pro وTajawal والسلم والأمهرية. المسافات والحركةشبكة 4px والحواف والظل. الهوية والأيقوناتاللوجو و200+ أيقونة. الرسوم البيانيةقواعد وألوان محققة. المكوّناتأزرار وحقول وجداول بكل الحالات. أنماط المنتجالتوثيق والعقد والعمولة والمرتب. المستندات والطباعةمقاسات الورق وقواعد الحبر والـ PDF. RTL والوصولالانعكاس والأرقام والتباين. نبرة الكتابةالقاموس والجمل القصيرة.

الألوان في سطر واحد

الأساسي للفعل والهوية، والباقي للمعنى. اللون مش بيشتغل لوحده: كل حالة معاها أيقونة ونص. الأسماء دي tokens، والقيم بتتغير مع الوضع الفاتح والغامق.

فيروزي: الثقة--teal · --hue-teal-*التوثيق، الإجراء الأساسي، "تمام"

شمس: الإبراز--sun · --hue-sun-*المستوى 3، قيد التنفيذ، زر البداية

طماطم: انتباه--tomato · --hue-tomato-*مشكلة، متأخر، إيقاف، حذف

ليلكي: الرعاية--lilac · --hue-lilac-*الأسرة والأطفال والخصوصية

سماوي: معلومة--hue-sky-*تنبيهات هادية وروابط

وردي: تفضيل--hue-rose-*حفظ وإعجاب

حبر: النص والخطوط--ink · --textالنص، الحدود 2px، الأقسام الداكنة

ورق: الخلفية--paper · --bgاللوحة الدافية تحت كل شاشة

المبادئ

الحالة قبل الوعد

بدل "موثقة 100%": مستوى التوثيق، آخر مراجعة، والناقص. الحقيقة المعروضة بوضوح أقوى من أي شعار.

العاملة مستخدمة أولى

أيقونات وصوت ولغتها وأزرار كبيرة قبل أي نص. لو مش فاهماها، مش مكتملة.

حقوق الطرفين على نفس الشاشة

العقد والمرتب والمهام والبلاغ ظاهرين للطرفين بنفس الوضوح.

القلق يتعالج بالتحكم مش بالزخرفة

كل شاشة بتقول: وضعي إيه، التالي إيه، ولو حصلت مشكلة أعمل إيه.

عربي أولاً، RTL من الأساس

الأيقونات والترتيب والأرقام والتواريخ والحروف بتتصمم من اليمين. الإنجليزي هو المرآة.

شوفه شغّال: فاتح وغامق جنب بعض

نفس المكوّنات بنفس الكود. الفرق كله من الـ tokens.

الوضع الفاتح

مستوى 2

منى علي 34 سنة

خبرة 6 سنين
القاهرة الجديدة

رعاية رضّعطبخ

9,000 جنيه / شهر

الإقامة تنتهي بعد 18 يوم

لو ما اتجددتش قبل 14 نوفمبر، العقد هيتوقف.

توقيع العقد900مدفوع

نهاية التجربة1,200مستحق

بعد 90 يوم900محجوز

الوضع الغامق

مستوى 2

منى علي 34 سنة

خبرة 6 سنين
القاهرة الجديدة

رعاية رضّعطبخ

9,000 جنيه / شهر

الإقامة تنتهي بعد 18 يوم

لو ما اتجددتش قبل 14 نوفمبر، العقد هيتوقف.

توقيع العقد900مدفوع

نهاية التجربة1,200مستحق

بعد 90 يوم900محجوز

معلومات سريعة

الألوان

أساسي واحد للفعل والهوية، وزعفراني للتميّز، وألوان رفيقة للحالات والفئات.

كل الألوان من tokens بتتبدل فاتح وغامق. الحالات: أخضر، برتقالي، أحمر، أزرق مع أيقونة ونص دايماً.

الخط

Readex Pro للنص (وزن 160 إلى 700) وTajawal 800 للعناوين والأرقام، وNoto Sans Ethiopic للأمهرية. سلم ثابت بالـ rem (1.125 إلى 1.2).

الأرقام غربية 0-9. ما فيش letter-spacing للعربي.

الشكل

شبكة 4px. الحواف والظلال من الـ tokens بس، بنفس الدرجة للدور الواحد. حركة 120 إلى 240ms للتعبير عن حالة.

المستويات

L0L1L2L3

اللون الزعفراني للمستوى 3 فقط.

إزاي أستخدمه

مفيش build ولا سيرفر. افتح أي ملف HTML مباشرة من المجلد. كل صفحة بتستخدم نفس ملفات CSS و JS. الشريط اللي فوق بيبدّل العرض.

التحكم	الشريط	رابط (URL param)
الوضع الغامق	الوضع الغامق	`?theme=dark`
الاتجاه LTR (English)	LTR / English	`?dir=ltr`
Wireframe رمادي	Wireframe رمادي	`?fidelity=wire`
الملاحظات المرقمة على الشاشات	الملاحظات المرقمة	`?annotations=on`
دمج أكتر من واحد		`?theme=dark&dir=ltr&fidelity=wire&annotations=on`

اختياراتك بتتحفظ في المتصفح. الرابط بيكسب على المحفوظ.

تسليم للمطورين

الملف	الاستخدام
`assets/tokens.json`	كل الألوان hex (12 درجة لكل سلم). المصدر لتطبيق الموبايل.
`assets/css/tokens-primitives.css`	سلالم الألوان (مولّدة). ما تعدّلهاش يدوي.
`assets/css/tokens.css`	الـ tokens الدلالية: الأسطح، النص، الحالات، التوثيق، الرسوم، الخطوط، المسافات، الحواف، الظل، الحركة، z-index. فاتح وغامق عن طريق `light-dark()`.
`assets/css/components.css` و `patterns.css` و `layouts.css`	المكوّنات وأنماط المنتج والتخطيطات.
`assets/js/icons.js`	211 أيقونة من Lucide بـ stroke 1.75. اكتب `<i data-icon="check">`. الاتجاهية بتتعكس تلقائي في RTL.
`assets/fonts/`	Readex Pro وTajawal وNoto Sans Ethiopic. مستضافة ذاتياً.
`tools/build-tokens.mjs`	بيولّد السلالم ويطبع تقرير تباين WCAG.
`tools/build-icons.mjs`	بيبني icons.js من حزمة lucide-static.
`tools/build-logo.py`	بيولّد اللوجو كمسارات مفرغة من الخط (علامة + كلمة بالعربي والإنجليزي).
`tools/lint.mjs`	بيفحص الصفحات: أيقونات غير موجودة، كلاسات غير معرّفة، شرطة طويلة، حدود جانبية، ألوان hex داخل style.

ملاحظات Flutter

حوّل tokens.json إلى ColorScheme: primary = plum.800 (الفيروزي الغامق #0A6358)، onPrimary = أبيض، secondary = saffron.500 (الشمس #FFC53D)، onSecondary = ink.900، surface وbackground من ink (الورق #FBF4E8). الأزرار الكبيرة بتاخد teal #12B3A0 بنص ink.900. الغامق: primary = plum.300 وonPrimary = plum.950. أسماء الـ ramps القديمة (plum وsaffron) فضلت للتوافق وقيمها اتغيرت.
الاتجاه: Directionality وEdgeInsetsDirectional وAlignmentDirectional. ممنوع EdgeInsets.only(left).
الخط: Readex Pro للنص (variable) وTajawal 700/800 للعناوين والأرقام الكبيرة، وNoto Sans Ethiopic للأمهرية.
الأيقونات: حزمة Lucide للـ Flutter أو SVGs من نفس الإصدار. اعكس الاتجاهية بـ Directionality.
المسافات: ثوابت 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48. أهداف اللمس 48dp (56dp لتطبيق العاملة).

// lib/theme/tokens.dart (مثال)
const tealDeep = Color(0xFF0A6358);   // plum.800 في tokens.json
const sun = Color(0xFFFFC53D);        // saffron.500
const ink = Color(0xFF0E2A33);        // ink.900
const paper = Color(0xFFFBF4E8);      // ink.50

final lightScheme = ColorScheme.light(
  primary: tealDeep, onPrimary: Colors.white,
  secondary: sun, onSecondary: ink,
  surface: Colors.white, background: paper,
);

الإصدار والاعتمادات

الإصدار 1.0 · 27 أكتوبر 2026. اسم العمل "أمانة" مؤقت للتصميم.

Lucide (الأيقونات): رخصة ISC. الإصدار lucide-static 0.468.0.
Readex Pro وTajawal: رخصة SIL Open Font License 1.1.
Noto Sans Ethiopic: رخصة SIL Open Font License 1.1.
الألوان البيانية اتفحصت بسكريبت التحقق في skill الـ dataviz (فاتح وغامق).