الألوان

أربع ألوان صريحة وليها معنى: فيروزي (Faience) للثقة والتحقق والفعل، وطماطم للانتباه والمشاكل، وشمس للتمييز وقيد التنفيذ والمستوى الأعلى، وليلكي للرعاية والأسرة. حبر منتصف الليل للنص والخطوط والأقسام الغامقة، وورق بردي دافي تحت كله. الورق هادي واللحظات المهمة صريحة. وكل لون جنبه أيقونة وكلمة، وكل زوج نص وخلفية بيتقاس هنا لايف في الفاتح والغامق.

الاستراتيجية: ورق هادي ولحظات صريحة

درسنا مواقع المنافسين في مصر والخليج وعالمياً وقسنا ألوانهم الفعلية. المجال مزدحم بالأخضر والتيل (إحساس "بيت ونضافة") وبالأزرق الملكي (إحساس "ثقة طبية"). ومكتب مكة، أكبر مكتب ظاهر، موقع ووردبريس بدون هوية. الفيروزي بتاعنا قريب من منطقة التيل، وإحنا عارفين ده: عشان كده التمييز مش في لون واحد. الهوية في الأسلوب: ورق دافي، خط حبر 2px وظل صلب على الحاجة الوحيدة المهمة في الشاشة، قوس للبورتريه، وختم للتحقق، وأرقام تقيلة بخط Tajawal. أي منافس ينسخ اللون مش هينسخ الأسلوب.

المنافس	الألوان المقاسة	القراءة
Servix (مصر)	`#0D3827` `#5DD6A8`	أخضر غامق + نعناع، خط serif. فاخر لكن في أرض الأخضر.
Jinni (مصر)	`#66C2A4` `#1F4B3F`	نعناع وأخضر غامق مع برتقالي دافئ. نضافة، نفس العائلة.
Babysits (مصر)	`#27828C` `#FFF0F5`	تيل مع وردي باستيل. طفولي ومناسب للأمهات، أقل جدية للعقود والمرتبات.
FilKhedma (مصر)	`#0033BC` `#FFC83D`	أزرق ملكي + أصفر. قوي ومعروف، وبيملك الأزرق في الخدمات المنزلية.
Vezeeta (مصر)	`#0070CD`	أزرق الثقة الطبية. مألوف لكن محجوز.
Careem (الخليج)	`#00EB79` `#00493E`	أخضر نيون + تيل غامق. تطبيق "كل شيء"، مش مرجع للثقة.
مكة سيرفيس (مصر)	`#302683`	نيلي في قالب ووردبريس جاهز. بدون هوية حقيقية.
أمانة	`#12B3A0` `#FFC53D` `#FF6B4A` `#B8A6FF`	فيروزي صريح + شمس + طماطم + ليلكي على ورق دافي وحبر منتصف الليل. التمييز بالأسلوب (القوس، الختم، خط الحبر والظل الصلب) مش بلون واحد.

توزيع الألوان في أي شاشة

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

نسب إرشادية مش قياس رسمي. لو بقى في الشاشة أكتر من ثلاث لحظات صريحة، ماحدش هيعرف إيه الأهم.

الألوان الصريحة الأربعة وكل واحد معناه

كل لون صريح بيشتغل كتعبئة مسطحة (flat) بدون تدرج، والنص عليه حبر دايماً (مش أبيض). الأبيض مسموح بس على الحبر أو الفيروزي الغامق (--brand).

فيروزيFaience teal · --teal

#12B3A0

الثقة، التحقق، الفعل. الزر الأساسي، ختم المستوى 2، الخطوة المنجزة، "تم".

طماطمTomato · --tomato

#FF6B4A

الانتباه والمشكلة. الخطر، الغياب، العاجل، عدّاد الإشعارات. مش للديكور.

شمسSun · --sun

#FFC53D

التمييز وقيد التنفيذ. المستوى 3، الخطوة الحالية، التقييم، الإجراء المميز الواحد.

ليلكيLilac · --lilac

#B8A6FF

الرعاية والأسرة والأطفال. تصنيفات الرعاية، بطاقات الأسرة، شارات الأطفال.

حبرMidnight ink · --ink

#0E2A33

النص، خطوط الـ 2px، الظل الصلب، الأقسام الغامقة (السايدبار، البطل، الفوتر).

ورقPapyrus · --bg

#FBF4E8

خلفية الصفحة بنقط خفيفة. دافي، مش أبيض ولا رمادي.

فيروزي غامقDeep teal · --brand

#0B7B6D

نص البراند والروابط والاختيار. بيعدّي 4.5:1 على الورق وعليه نص أبيض.

ملاحظة توافق: أسماء التدرجات القديمة لسه شغالة عشان أي markup قديم يفضل يتحلّ: --plum-* بقت قيم الفيروزي، --saffron-* بقت قيم الشمس، --sage-* فيروزي هادي، --coral-* بقت قيم طماطم و--peach-* عنبري، --lav-* ليلكي، --ink-* حبر وورق. الكود الجديد بيستخدم الأسماء الدلالية (--brand و--teal و--tomato...) مش الأرقام.

زر صريح واحد في الشاشة (فيروزي بنص حبر)، والباقي أبيض بخط حبر أو شفاف.

تلات ألوان صريحة جنب بعض: كل واحد بيزعق وماحدش بيتسمع.

نص حبر على الفيروزي (تباين عالي) مع خط حبر وظل صلب.

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

الدرجات الهادية: خلفية، نص، وتعبئة

لما اللون الصريح تقيل على الشاشة (قوائم، تنبيهات، chips، خلفيات تصنيف) بنستخدم نسخته الهادية. كل عيلة ليها تلات قيم بتتبدل أوتوماتيك بين الفاتح والغامق: bg خلفية هادية، fg نص عليها بتباين AA، وsolid التعبئة الصريحة. كلاس .tint-* بيحط التلاتة في العنصر وولاده بيقروها.

فيروزي: تحقق وثقة

فاتحAa نصsolid…

غامقAa نصsolid…

.tint-teal

شمس: تمييز وقيد تنفيذ

فاتحAa نصsolid…

غامقAa نصsolid…

.tint-sun

طماطم: انتباه ومشكلة

فاتحAa نصsolid…

غامقAa نصsolid…

.tint-tomato

ليلكي: رعاية وأسرة

فاتحAa نصsolid…

غامقAa نصsolid…

.tint-lilac

سماوي: معلومة

فاتحAa نصsolid…

غامقAa نصsolid…

.tint-sky

وردي: لحظات دافية

فاتحAa نصsolid…

غامقAa نصsolid…

.tint-rose

النسب بتتحسب في المتصفح من الألوان الفعلية (bg مقابل fg). 4.5:1 فأكتر يعني ينفع نص صغير، وأقل من كده يعني للنص الكبير والأيقونات فقط ويتعلّم بالطماطم.

كلاس tint واحد: الكارت والـ chips بيقروا نفس الـ token

اتراجعتالهوية والوجه

بطاقة الرقم القومي اتطابقت مع الصورة يوم 3 أكتوبر.

رعايةطفل عنده 3 سنين

مواعيد النوم والأكل مكتوبة للمربية في العقد.

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

جدّدها قبل 14 نوفمبر عشان العقد يفضل ساري.

chips ثابتة بكل عيلة (التصنيف دايماً بكلمة، واللون بيساعد بس)

نضافةطبخرعاية رضّعمسنينإنجليزيأطفال توحد

القاعدة: الألوان للخدمات والحالات والتصنيفات بس. مفيش فلتر ولا تصنيف بلون على أساس جنسية أو شكل، ومفيش لون بيرمز لنوع إنسان.

الخطوط والظلال: ورق مسطح ولحظات بارزة

مفيش تدرجات لونية في النظام: كل التعبئات مسطحة (القيم القديمة --grad-* بقت ألوان مسطحة عشان أي كود قديم يتسطّح لوحده). العمق بييجي من حاجتين: الورق الهادي للكروت العادية (خط رفيع وظل خفيف جداً)، والخط والظل الصلب للحاجة الوحيدة المهمة (خط حبر 2px + ظل مزاح بدون blur). الزر بيتحرك لجوه ويقف الظل لما تضغط عليه.

smخط رفيع: صفوف وحقول

mdكروت وقوائم عادية

hard-sm3px: أزرار، chips مختارة

hard4px: الكارت المهم، tab bar

archقوس: بورتريه بظل ملوّن

القاعدة: عنصر واحد بارز (pop) في الشاشة. لو كل الكروت ليها خط حبر وظل صلب، رجعنا لـ "كل حاجة بتزعق".

الدرجات الأساسية

الدرجات دي هي اللي ورا الـ tokens الدلالية. الكومبوننتس ما بتستخدمهاش مباشرة، بتستخدم الـ tokens تحت. الأرقام والـ hex اتقرت من v2.css، والمرجع للتسليم فلاتر أو أندرويد في assets/tokens.json.

فيروزي (Faience teal · --plum-*)500 = #12B3A0 · legacy name plum

25
#f2fcfa

50
#e8f8f5

100
#d3f2ec

200
#a9e4d9

300
#6fd3c3

400
#35c0ae

500
#12b3a0

600
#0e9585

700
#0b7b6d

800
#0a6358

900
#084a42

950
#05302b

100 خلفية هادية (hue-teal-bg)
300 البراند في الوضع الغامق
500 --teal: الزر الأساسي والتحقق
700 --brand: نص وروابط واختيار
800 hover وضغط
950 نص الزر على الفيروزي في الغامق

شمس (Sun · --saffron-*)500 = #FFC53D · legacy name saffron

50
#fff7df

100
#ffefbd

200
#ffe38f

300
#ffd566

400
#ffcb4d

500
#ffc53d

600
#e0a400

700
#a97c00

800
#6b4a00

900
#4a3300

950
#2a1d00

50 خلفية التمييز
500 --sun: التمييز، قيد التنفيذ، المستوى 3
600 ضغط الزر المميز
800 نص على خلفية شمسية هادية

حبر وورق (Midnight ink and papyrus · --ink-*)900 = #0E2A33 · 50 = #FBF4E8

25
#fffbf4

50
#fbf4e8

100
#f4ead8

200
#e8dcc6

300
#d3c6ae

400
#a99f8c

500
#6f858b

600
#4a6670

700
#34505a

800
#1e3b45

900
#0e2a33

950
#071b21

50 --paper: خلفية الصفحة
100 أسطح غائرة
200 خط رفيع (--hair)
500 حدود الحقول (3:1)
600 نص خافت
700 نص ثانوي
900 --ink: النص والخطوط والأقسام الغامقة

طماطم (Tomato)500 = #FF6B4A

50
#fff0eb

100
#ffe0d6

200
#ffc6b5

300
#ffa18a

500
#ff6b4a

700
#b8381a

900
#5f1c0a

100 خلفية تنبيه (hue-tomato-bg)
500 --tomato: المشكلة والانتباه
700 نص التنبيه على الخلفية الهادية

ليلكي (Lilac)500 = #9A82F0 · loud = #B8A6FF

50
#f5f1ff

100
#e9e1ff

200
#d6c9ff

300
#c2b0ff

500
#9a82f0

700
#5a40b8

900
#2e2063

100 خلفية الرعاية والأسرة
300 قريب من --lilac
700 نص على الخلفية الهادية

تدرجات الحالات (للتوافق)

دي تدرجات الحالات الأصلية (الأخضر والبرتقالي والأحمر والأزرق والتيل) من tokens-primitives.css. الواجهة دلوقتي بتعتمد على tokens الحالات فوق (--success-bg وغيرها) والتدرجات دي للرسوم البيانية والتوافق.

أخضر (Green)OKLCH hue 155 · L 0.23 → 0.985

25
#f5fcf7

50
#e5faeb

100
#c9f4d7

200
#a1ecbb

300
#6ad895

400
#35c177

500
#01a760

600
#00884d

700
#016d3c

800
#02572f

900
#003e20

950
#002410

برتقالي (Orange)OKLCH hue 52 · L 0.26 → 0.985

25
#fff9f5

50
#fef0e9

100
#fee3d4

200
#fed0b5

300
#ffb486

400
#ff9550

500
#f27700

600
#cd6505

700
#a75001

800
#853e00

900
#612d03

950
#3c1901

أحمر (Red)OKLCH hue 25 · L 0.24 → 0.985

25
#fef9f8

50
#fef0ee

100
#ffe2df

200
#fec8c3

300
#ffa098

400
#ff726b

500
#f14445

600
#d4212d

700
#ae1320

800
#8b1119

900
#650e12

950
#3f0708

أزرق (Blue)OKLCH hue 245 · L 0.24 → 0.985

25
#f7fbfe

50
#ebf5fe

100
#d9ecfe

200
#bddffe

300
#8ecbff

400
#54b3fd

500
#2696e4

600
#037ac0

700
#015f98

800
#014b79

900
#003659

950
#00213b

تيل (Teal)OKLCH hue 195 · L 0.24 → 0.985

25
#f3fcfc

50
#e1f9f9

100
#c8f4f3

200
#a3eae9

300
#78d7d6

400
#50bfbe

500
#2ca2a2

600
#038586

700
#056868

800
#015353

900
#003b3b

950
#012525

الـ tokens الدلالية: فاتح وغامق جنب بعض

الوضع الغامق مش قلب للألوان، ده اختيار قيم تانية بـ light-dark(). كل صف بيعرض نفس الـ token في الوضعين. الكومبوننت بيستخدم var(--brand) وخلاص. الألوان الصريحة الأربعة (--teal و--tomato و--sun و--lilac) ثابتة في الوضعين، والنص عليها حبر دايماً.

الورق والأسطح

Token	فاتح	غامق	الاستخدام
`--bg`	#fbf4e8	#0b1b21	خلفية الصفحة: ورق بردي دافي، بنقط خفيفة
`--surface`	#ffffff	#12303a	البطاقات واللوحات
`--surface-2`	#ffffff	#183b46	القوائم المنسدلة والنوافذ
`--surface-sunken`	#f4ead8	#0e2730	أسطح غائرة، رؤوس الجداول، حقول مجمّعة
`--surface-inverse`	#0e2a33	#0e2a33	أقسام غامقة: السايدبار، البطل، الفوتر، Toast

الخطوط (outline)

Token	فاتح	غامق	الاستخدام
`--line`	#0e2a33	#8fb8bc	خط الحبر 2px حوالين الحاجة اللي تهم
`--line-solid`	#0e2a33	#000000	لون الظل الصلب (hard shadow) بدون blur
`--hair`	#e8dcc6	#24424b	خط رفيع للفواصل والبطاقات الهادية (--border)
`--border-strong`	#6f858b	#8fb0b5	حدود الحقول (3:1)
`--border-focus`	#0e2a33	#12b3a0	حلقة التركيز

النص

Token	فاتح	غامق	الاستخدام
`--text`	#0e2a33	#f4ead8	النص الأساسي
`--text-2`	#34505a	#c9d8d6	النص الثانوي
`--text-3`	#4a6670	#a9bfbe	الخافت وplaceholder (4.5:1)
`--text-link`	#0b6b5f	#6fd3c3	الروابط

البراند: فيروزي

Token	فاتح	غامق	الاستخدام
`--teal`	#12b3a0	#12b3a0	اللون الصريح: الزر الأساسي، التحقق، الحالي (النص عليه حبر)
`--brand`	#0b7b6d	#45d6c4	فيروزي غامق للنص والاختيار والتعبئة البراندية
`--brand-hover`	#0a6358	#6fd3c3	hover
`--brand-subtle`	#e1f6f2	#123f43	خلفية اختيار هادية
`--brand-subtle-2`	#c7efe7	#17595b	chip مختار، تبويب نشط
`--brand-border`	#8fd9cc	#2c7f7c	حدود براندية خفيفة
`--on-brand`	#ffffff	#05302b	نص على --brand (الأبيض مسموح هنا بس)

التمييز والرعاية والانتباه

Token	فاتح	غامق	الاستخدام
`--sun`	#ffc53d	#ffc53d	شمس: تمييز، قيد التنفيذ، المستوى 3
`--accent-subtle`	#fff1c4	#3a3016	خلفية تمييز هادية
`--accent-border`	#f5d57a	#7a6420	حدود التمييز
`--tomato`	#ff6b4a	#ff6b4a	طماطم: مشكلة، عاجل، غياب
`--lilac`	#b8a6ff	#b8a6ff	ليلكي: رعاية، أسرة، أطفال
`--ink`	#0e2a33	#0e2a33	حبر منتصف الليل: خطوط ونص على الألوان الصريحة

الحالات (دايماً مع أيقونة وكلمة)

Token	فاتح	غامق	الاستخدام
`--success-bg`	#d9f5e4	#123a2a	نجاح: خلفية
`--success-fg`	#0a5b36	#86e0ae	نجاح: نص
`--warning-bg`	#ffe9c9	#3d2a10	تحذير: خلفية
`--warning-fg`	#8a4a00	#ffc27a	تحذير: نص
`--danger-bg`	#ffe1d8	#3d1a14	خطر: خلفية
`--danger-fg`	#a8301a	#ffa18a	خطر: نص
`--info-bg`	#d9ebf8	#12303f	معلومة: خلفية
`--info-fg`	#154f7f	#9ccbf0	معلومة: نص

مستويات التوثيق

Token	فاتح	غامق	الاستخدام
`--tier-0-bg`	#f4ead8	#0e2730	غير موثقة
`--tier-1-bg`	#c7efe7	#17595b	مستوى 1: الهوية
`--tier-2-bg`	#12b3a0	#12b3a0	مستوى 2: الخلفية
`--tier-3-bg`	#ffc53d	#ffc53d	مستوى 3: مراجع ومقابلة

التباين: بيتقاس لايف

النص العادي يحتاج 4.5:1 على الأقل، وعناصر الواجهة (حدود الحقول، خطوط الحبر) 3:1. الأرقام هنا مش مكتوبة بإيدينا: الصفحة بتقرا الألوان الفعلية من المتصفح وبتحسب نسبة WCAG لكل زوج في الفاتح والغامق، فلو زوج نزل تحت الحد الصفحة بتقول كده بالأحمر.

عينة	الزوج	Tokens (نص / خلفية)	الوضع	التباين	الحد الأدنى	النتيجة
Aa	النص الأساسي على الورق	--text / --bg	فاتح	…	4.5	…
Aa	النص الثانوي على الورق	--text-2 / --bg	فاتح	…	4.5	…
Aa	النص الخافت وplaceholder على الورق	--text-3 / --bg	فاتح	…	4.5	…
Aa	النص الخافت على السطح الأبيض	--text-3 / --surface	فاتح	…	4.5	…
Aa	الرابط على الورق	--text-link / --bg	فاتح	…	4.5	…
Aa	نص البراند (فيروزي غامق) على الورق	--brand / --bg	فاتح	…	4.5	…
Aa	أبيض على الفيروزي الغامق (مسموح: ده الاستثناء الوحيد للأبيض)	--on-brand / --brand	فاتح	…	4.5	…
Aa	نص الزر الأساسي: حبر على الفيروزي	--ink / --teal	فاتح	…	4.5	…
Aa	حبر على الشمس (الزر المميز، المستوى 3)	--ink / --sun	فاتح	…	4.5	…
Aa	حبر على الطماطم (الخطر، الغياب)	--ink / --tomato	فاتح	…	4.5	…
Aa	حبر على الليلكي	--ink / --lilac	فاتح	…	4.5	…
Aa	أبيض على الحبر (الأقسام الغامقة، السايدبار)	white / --ink	فاتح	…	4.5	…
Aa	نص على فيروزي هادي	--hue-plum-fg / --hue-plum-bg	فاتح	…	4.5	…
Aa	نص على شمس هادي	--hue-saffron-fg / --hue-saffron-bg	فاتح	…	4.5	…
Aa	نص على طماطم هادي	--hue-coral-fg / --hue-coral-bg	فاتح	…	4.5	…
Aa	نص على ليلكي هادي	--hue-lav-fg / --hue-lav-bg	فاتح	…	4.5	…
Aa	نص على سماوي هادي	--hue-sky-fg / --hue-sky-bg	فاتح	…	4.5	…
Aa	نص على وردي هادي	--hue-rose-fg / --hue-rose-bg	فاتح	…	4.5	…
Aa	حد الحقل على السطح (عناصر الواجهة 3:1)	--border-strong / --surface	فاتح	…	3	…
Aa	خط الحبر (2px) على الورق	--line / --bg	فاتح	…	3	…
Aa	غامق: النص الأساسي	--text / --bg	غامق	…	4.5	…
Aa	غامق: النص الثانوي	--text-2 / --bg	غامق	…	4.5	…
Aa	غامق: النص الخافت	--text-3 / --bg	غامق	…	4.5	…
Aa	غامق: نص البراند	--brand / --bg	غامق	…	4.5	…
Aa	غامق: الرابط على السطح	--text-link / --surface	غامق	…	4.5	…
Aa	غامق: نص على البراند	--on-brand / --brand	غامق	…	4.5	…
Aa	غامق: حبر على الفيروزي	--ink / --teal	غامق	…	4.5	…
Aa	غامق: نص على فيروزي هادي	--hue-plum-fg / --hue-plum-bg	غامق	…	4.5	…
Aa	غامق: نص على طماطم هادي	--hue-coral-fg / --hue-coral-bg	غامق	…	4.5	…
Aa	غامق: نص على ليلكي هادي	--hue-lav-fg / --hue-lav-bg	غامق	…	4.5	…
Aa	غامق: حد الحقل	--border-strong / --surface	غامق	…	3	…
Aa	غامق: خط الحبر المضيء	--line / --bg	غامق	…	3	…

الـ placeholder والنص الخافت (--text-3) بيحققوا 4.5:1 زي النص العادي. مفيش "رمادي أنيق" أخف من كده، لأنه أكتر سبب بيخلي النص مش مقروء على موبايل في الشمس.

التوثيق والحالات: الختم والكلمة

مستويات التوثيق

مستوى التوثيق هو إشارة الثقة الأساسية في المنتج. بيظهر كـ pill (.tier) في القوايم، وكـ ختم (.seal) دايري مايل بحلقة متقطعة في اللحظات الكبيرة زي البروفايل. القاعدة: أيقونة + كلمة المستوى دايماً. اللون بيزود التمييز بس، ومينفعش يكون الإشارة الوحيدة (للعمى اللوني ولطباعة الأبيض والأسود). مفيش "نسبة ثقة" رقمية، بنعرض اللي اتراجع فعلاً وآخر مراجعة.

الأربع مستويات (pill)

غير موثّقة مستوى 1: الهوية مستوى 2: الخلفية مستوى 3: مراجع ومقابلة

الختم للّحظات الكبيرة: الأيقونة والكلمة جوه الختم، واللون على قدر المستوى

مستوى 2 مستوى 3 اتراجعت3 أكتوبر جديدة

المستوى	التعبئة	النص	المعنى
0	أبيض بخط رمادي	--text-3	لسه ما اتراجعتش. بنعرضها بس لو الأسرة طلبتها.
1	فيروزي هادي (`--hue-plum-bg`)	فيروزي غامق	بطاقة وصورة وجه اتطابقوا.
2	فيروزي صريح (`--teal`) + خط حبر	حبر	فيش جنائي وفحص طبي اتراجعوا بشرياً.
3	شمس (`--sun`) + خط حبر	حبر	مرجعين وفيديو مقابلة. الشمس محجوزة للمستوى ده وللتمييز الواحد عشان تفضل نادرة.

الحالات (نجاح، تحذير، خطر، معلومة)

كل حالة لها أيقونة وكلمة. الشارات بتاخد لون صريح بنص حبر: فيروزي للنجاح، شمس للتحذير وقيد التنفيذ، طماطم للخطر. المعلومة والبراند بدرجات هادية.

شارات الحالة (لون + أيقونة + كلمة)

تم الدفع بانتظار المراجعة مرفوض جديد رعاية

نفس الشارات بدون ألوان (محاكاة طباعة أبيض وأسود): لازم تتفهم

تم الدفع بانتظار المراجعة مرفوض مستوى 2 مستوى 3

اعمل ولا تعمل

موثّقةموثّقة المستوى 2

الفيروزي للتحقق والثقة، والطماطم للمشاكل. كل لون بمعناه وبكلمة.

موثّقة

طماطم على كلمة "موثّقة": اللون بيقول عكس الكلمة. المعنى لازم يتفق.

مينفعش نكمل التعيين

مفيش إقامة سارية مسجلة.

خلفية + خط + أيقونة + عنوان. الحالة بتتفهم بدون اللون.

مفيش إقامة سارية

نص طماطم على الورق: التباين ضعيف والمعنى بيعتمد على اللون.

الوضع الغامق وWireframe الرمادي

الوضع الغامق لتطبيق الأسرة بالليل (رضاعة وهدوء)، ولوحة الإدارة في ساعات المراجعة الطويلة. القواعد:

الورق بيبقى أزرق-أخضر داكن (#0b1b21) والأسطح أفتح درجة (#12303a)، مش أسود صافي.
خط الحبر بيتحول لفيروزي-رمادي مضيء (#8fb8bc) عشان يفضل ظاهر، والظل الصلب بيبقى أسود.
الألوان الصريحة الأربعة ثابتة، والنص عليها حبر في الوضعين. نص البراند بيفتح لـ #45d6c4.
الدرجات الهادية بتتحول لخلفيات داكنة مصبوغة ونص فاتح بتباين 5:1 فأكتر (القياس فوق).
الصور والبورتريهات: بدون فلتر ولا تعتيم.

فاتح

مستوى 2

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

جدّدها قبل 14 نوفمبر.

غامق

مستوى 2

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

جدّدها قبل 14 نوفمبر.

Wireframe رمادي

زر "Wireframe رمادي" في الشريط فوق بيحوّل أي صفحة لنسخة رمادية هيكلية بنفس الـ markup: الألوان الصريحة لدرجات رمادي، والصور والمشاهد (.scene) والبورتريهات رمادي، وكل الحالات بتفرّق بالأيقونة والكلمة مش باللون. ده بيخلي النقاش على المحتوى والتسلسل وبيثبت إن التصميم شغال بدون لون. الملاحظات المرقمة (.anno) بتظهر بدبابيس حمراء في الوضعين.

Hi-fi

Wire