LUMEN DESIGN SYSTEM v1.0 · 2026

ضوء دافي على خامة حقيقية.

«Lumen» هو الديزاين سيستم بتاع Raya Home. بيجمع الموقع والتطبيق ولوحة التحكم في لغة واحدة: خامات دافية، ضوء أمبر، وموتيف واحد (الشريحة) شايل بيانات. كل مكوّن هنا شغّال، وتقدر تنسخ كوده.

المبادئ المكونات

ألوان بمعاني0أمبر · ساج · دَسك · رست · جوز · حبر

أيقونات0Lucide + 3 رموز Raya

مكوّن ونمط0+كلهم بحالاتهم

الوصولAAتباين + كيبورد + حركة أقل

PRINCIPLES

6 مبادئ. وكل قرار تصميم بيرجع لواحد منهم.

لو مكوّن جديد ما بيخدمش مبدأ منهم، غالباً مش محتاجينه.

01

هادي في الأساس. صاخب في لحظات.

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

02

اللون ليه معنى. مش زينة.

أمبر = شغّال دلوقتي. ساج = خلص. دَسك = مستني قرارك. رست = مشكلة. جوز = خامة. ولون ما يتستخدمش خارج معناه أبداً.

03

موتيف واحد شايل داتا.

الشريحة مش ديكور: كل شريحة = بند شغل، وضوءها = حالته. بتظهر في اللوجو وفي الحيطة وفي اللودر وفي الحالة الفاضية.

04

الرقم هو البطل.

أول حاجة في التطبيق رقم ضخم بيجاوب السؤال: «الشغل وصل فين؟» الأرقام Alexandria 900، LTR، tabular.

05

الصراحة أسلوب.

التقديري متعلّم، والمجهول متعلّم، والصور التوضيحية متعلّمة. مفيش سعر من غير معاينة، ولا إحصائية مخترعة.

06

الضوء خامة.

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

FOUNDATIONS · COLOUR

3 ألوان صاخبة بمعاني، وحبر، وتراترين هادي.

القيم مقدّرة من صور العميل. لما يوصل اللوجو الأصلي بتتظبط في ملف واحد: tokens.css. اضغط أي لون لنسخ اسم الـ token.

جدول المعاني قانون

نفس الأسطورة (legend) في الويب والتطبيق والداشبورد والبانرات.

أمبر · شغّال دلوقتي

حالة نشطة، الإجراء الأساسي، الكلمة المميّزة .mark

شغّالة

ساج · خلصت

مكتمل، معتمد، تمام

خلصت

دَسك · مستني قرارك

موافقة مطلوبة، مخطط، معلومة

قرارك

رست · مشكلة

تأخير، خطأ، خطر، قسم "العدو"

متأخرة

تينت · لسه

ما بدأش، غير مفعّل

لسه

جوز · خامة

مواد، خامات، عينات

خامة

مجالات الألوان (themes) scopes

paper

الافتراضي

dark

هيرو · فوتر · دارك مود

dusk

قسم الفكرة والموتيف

rust

قسم العدو (المشكلة)

amber

قسم الجواز والعرض

walnut

قسم الخامات

التباين WCAG

محسوب لحظياً بنفس معادلة WCAG. الأمبر على الفاتح ممنوع كنص (اتحوّل لـ amber-dp).

لون النصالخلفية

FOUNDATIONS · TYPOGRAPHY

خط واحد للعناوين، وخط واحد للنص.

Alexandria للعناوين والأرقام (شخصية قوية وفخمة)، IBM Plex Sans Arabic للنصوص (مريح في القراءة الطويلة)، وReem Kufi للوجو بس. كلهم SIL OFL ومحفوظين محلياً.

DISPLAY · أرقام

أرقام 68

Alexandria 600–900 · العناوين، الأزرار، الأرقام الكبيرة.

BODY

الراحة مش صدفة، دي نتيجة شغل مدروس من أول لون لآخر لمسة.

IBM Plex Sans Arabic 400/500/600 · القراءة والواجهات.

LOGO ONLY

رايا هوم

Reem Kufi · اسم الشعار بالعربي، ولا يتستخدم في النصوص.

السلّم (type scale)

.mega
--fs-mega · 800

الشريحة

.display
--fs-hero · 800

من الفكرة للتسليم.

h1 / .h1
--fs-h1 · 800

وكل خطوة قدام عينك.

h2 / .h2
--fs-h2 · 800

كل شقة 8 شرايح.

h3 / .h3
--fs-h3 · 700

مقايسة مكتوبة بالبند

h4 / .h4
--fs-h4 · 700

تقرير أسبوعي بالصور

.lead
1.06–1.31rem · 400

بنقسّم شقتك لـ 8 شرايح شغل، وانت تشوف كل واحدة وهي بتنوّر.

body
1rem / 1.85

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

.sm / .xs
14 / 13px

نص مساعد صغير للحقول والتلميحات.

أصغر حجم نص مسموح: 13px.

.eb (eyebrow)
Alexandria 700كيف نشتغل HOW IT WORKS

.num / .bignum
Alexandria 800–900 · LTR

68,175ج.م
68%

.mark · الكلمة المميّزة

مرة واحدة في العنوان. مايلة، ليها حد وظل صلب. بتنزل السطر لو طويلة.

شقتك بتتشطّب، وانت شايف.

مستني قرارك.

متأخر.

جواز الشقة.

اتسلّمت.

flat

hl خط تحت · موجة

عربي + إنجليزي + أرقام

اتصل على 010 95848075 أو ابعت على hello@raya.home

الأرقام والإيميلات والأسماء اللاتينية جوه .num / .ltr / .en عشان تتعزل اتجاهياً.

اتصل على 01095848075

أرقام هندية أو أرقام غير معزولة بتتلخبط في الاتجاه. الأرقام دايماً 0–9.

FOUNDATIONS · SPACE & GRID

4px أساس. وأقسام بتتنفّس.

كل المسافات من سلّم واحد. الأقسام الكبيرة بتتحرك مع الشاشة بـ clamp() مش بقيم ثابتة.

--s-14px

--s-28px

--s-312px

--s-416px

--s-524px

--s-632px

--s-748px

--s-864px

--s-996px

--s-10128px

الحاويات

.wrap

1240px + gutter

.wrap.narrow

820px (قراءة)

.wrap.wide

1480px (معارض)

--gutter

16 → 40px

--section

64 → 136px

نقاط الكسر حسب المحتوى

≤ 680px

موبايل: عمود واحد

≤ 900px

bento/hiw/لابتوب صغير يتكسر

≤ 1000px

أعمدة 4+ ← 2

≤ 1060px

قائمة الموبايل بدل الديسكتوب

≥ 1100px

سايدبار الداشبورد ثابت

بنختبر على: 360 · 390 · 430 · 768 · 1024 · 1280 · 1440.

الشبكة

1

2

3

4

5

6

.grid.g2/g3/g4 · .auto-fit --min · .bento (6 col) · .kanban · .wall --n

FOUNDATIONS · SHAPE & ELEVATION

زوايا كبيرة، وظلال صلبة بس للّي يفرق.

الظل الصلب (من غير blur) هو توقيع الصوت العالي. الظل الناعم للعمق الهادي. والتوهّج (glow) حصري للأمبر.

نصف القطر

r-xs · 8

r-sm · 12

r-md · 18

r-lg · 26

r-xl · 36

pill

الظلال

sh-1

sh-2

sh-3

sh-soft

glow

كارت واحد أو اتنين pop في الشاشة (الرقم الكبير + الإجراء).

كل الكروت بظل صلب. لما كله صاخب، مفيش حاجة تبان.

FOUNDATIONS · MOTION

حركة بغرض. مش استعراض.

الحركة بتقول «حاجة حصلت»: ظهور بالتمرير، توهّج الشريحة الشغّالة، ستارة الشرايح على الصورة. وبتتوقف كلها مع prefers-reduced-motion.

المدد

--t-fast

140ms · ضغط

--t-base

240ms · hover/focus

--t-slow

520ms · sheet/modal

--t-reveal

900ms · ظهور بالتمرير

اللحظات الثابتة

توهّج الشريحة الشغّالة (2.4s)
ستارة الشرايح على الصور data-curtain
سطر العنوان بيطلع data-lines
ماركي أحداث حقيقية (يقف على hover)
ضوء الكيرسر على الأسطح الداكنة .lit
انتقال بين الصفحات (View Transitions)

شريط الـ LED

بيحل محل الخط العادي في: تقدّم التمرير، نهاية الهيرو، الفواصل المهمة.

FOUNDATIONS · ICONOGRAPHY

خط واحد 1.8px، وأيقونات inline.

مجموعة Lucide (ISC) + 3 رموز Raya: slat · arch · whatsapp. بتتحط inline عشان تشتغل من غير سيرفر. اضغط أي أيقونة لنسخ كودها. الأيقونة عمرها ما بتشيل المعنى لوحدها.

...

قواعد

الأحجام: 14 · 18 · 24 · 28 · 40
أيقونات الاتجاه (سهم/شيفرون) بـ .dir بتتقلب في LTR
الأيقونة في زرار وحدها لازم aria-label
مربع الأيقونة .ic-tile بلون المعنى

FOUNDATIONS · IMAGERY

الصورة الحقيقية قبل أي زخرفة.

الصور في العرض ده مفاهيم تصميمية وصور مرخّصة، مش مشاريع Raya، ومعلّمة. لما العميل يبعت صوره، بتتبدّل بنفس الاسم من غير ما نغيّر الكود.

نفس الدرجة الدافية (2700K–3000K) في كل الصور، وقص من غير ما نخبّي تفصيلة معمارية.

صورة جيّدة مكتوب تحتها «مشروعنا» وهي مش مشروعنا. الصراحة: صورة تصويرية أو مثال توضيحي.

SIGNATURE MOTIF · THE SLAT

كل شريحة بند شغل. وضوءها حالته.

اضغط على أي شريحة وشوفها بتغيّر حالتها. نفس السلوك بالظبط في الويب والتطبيق والداشبورد.

اللي خلص0%

عدد الشرايح 8

خلصت شغّالة قرارك متأخرة لسه

الأحجام

.slat.sm/.lg/.xl

بتظهر في

اللوجو (شريحة منوّرة جوه القوس)
حيطة المشروع (.wall)
صفوف الجداول (progress مصغّر)
الحالة الفاضية: «الحيطة دي لسه فاضية»
اللودر وشريط تقدّم التمرير
الحشوة الزخرفية (.fluted)

.wall · حيطة المشروع

تجهيز

كهرباء

سباكة

محارة

أرضيات

نجارة

دهانات

تسليم

الشعار مقترح · مؤقّت

الشعار الحالي المرفوع من العميل (RH + باب) صورة منخفضة الجودة. ده مقترح مؤقت لحد ما توصل الملفات الأصلية (SVG / AI / EPS). التفاصيل في دليل الهوية.

دليل الهوية الكامل

CONTENT DESIGN · VOICE

بنتكلم زي مهندس صاحبك.

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

قاعدة 1

عامية مصرية في كل مكان

«هنبيع» مش «سنقوم ببيع». «إزاي» مش «كيف». «دلوقتي» مش «الآن». «مش» مش «ليس». «عشان» مش «لكي».

قاعدة 2

العنوان جملة بتخلص بنقطة

«شقتك بتتشطّب.» مش «شقتك بتتشطّب!». السؤال بس لو السؤال هو الحملة: «قرّبنا؟ قرّبنا قد إيه… بجد؟»

قاعدة 3

نَفَسين وقلبة

الأول بيجهّز والتاني بيضرب، والكلمة القوية في .mark: «من الفكرة للتسليم. وكل خطوة قدام عينك.»

قاعدة 4

أرقام مش صفات

مش «شغل سريع»: «تقرير كل أسبوع». مش «سعر مناسب»: «مقايسة مكتوبة بالبند». كل ادّعاء معاه رقم أو تاريخ أو مكان.

قاعدة 5

بصوت العميل

الوجع بيتقال بكلامه: «قالّي قرّبنا… من شهرين.» والشخصيات باسم أول ودور: سلمى، صاحبة شقة التجمع.

قاعدة 6

الصراحة أسلوب

«تقديري»، «توضيحي»، «هيتأكد مع العميل»، «مش داخل». ولو في خلاف بين وثيقتين بنكتبه كقرار مفتوح.

قاعدة 7

ما نقولش اللي مش متأكدين منه

مفيش «أحسن شركة في مصر»، ولا سنين خبرة، ولا عدد مشاريع، ولا ضمان، من غير دليل من العميل.

قاعدة 8

قصير

فكرة في الجملة. سطر واحد في الزرار والتلميح. عنوان القسم جملتين بالكتير.

قاعدة 9

هزار في المنتج. جدّ في الفلوس.

الـ 404 والحالة الفاضية والتقرير الأسبوعي ممكن يضحّكوا. الأرقام والمقايسات والعقود جدّ ودقيقة.

قاعدة 10

الإنجليزي بيفضل إنجليزي

أسماء الخامات والتقنيات: WPC، CRI، 2700K، Cove. جوه .en. الـ eyebrow حروف كبيرة متباعدة.

معادلات العناوين

جاهزة للتعبئة. الأمثلة من Raya Home.

الاستخدام	المعادلة	مثال
وعد الهيرو	من <البداية> لـ <النهاية>. وكل <حاجة> قدام عينك.	من الفكرة للتسليم. وكل خطوة قدام عينك.
العدو	<الأداة الحالية> مش <الحاجة> يا باشمهندس.	الاتفاق الشفوي مش عقد يا باشمهندس.
السؤال	<شيء> قد إيه… بجد؟	قرّبنا؟ قرّبنا قد إيه… بجد؟
الموتيف	كل <وحدة> <خانة>. وكل <خانة> ليها <معنى>.	كل شقة 8 شرايح. وكل شريحة ليها حالة.
العرض الصادق	<الخطوة> الأول. و<الالتزام> بعدين.	معاينة ومقايسة مكتوبة. وبعدين نقرر.
الورقة (viral)	كل <س>. كل <ص>. في ورقة واحدة.	كل خامة. كل كود. كل درجة إضاءة. في ورقة واحدة.
خطوات	<N> خطوات وتبقى ماسك <المجال>.	6 خطوات وتبقى ماسك شقتك.
الأسئلة	أسئلة أكيد في دماغك.	أسئلة أكيد في دماغك.
القانوني	الشروط والخصوصية. بالبلدي.	الشروط والخصوصية. بالبلدي.
404	الـ<وحدة> دي لسه <حالة> 🫠	الشريحة دي لسه متركبتش 🫠
الأسبوعي (Wrapped)	<الاسم>، <الشيء> اشتغلت كويس أوي.	سلمى، الشقة اشتغلت كويس أوي.

الميكروكوبي (النصوص الصغيرة)

أزرار

فعل + مفعول: «احجز معاينة»، «وافق على الرخام»، «ابعت التقرير»
مش «تقديم»، «إرسال»، «التالي» لوحدها
الإجراء الأساسي واحد في الشاشة

أخطاء الحقول

«اكتب رقم موبايل مصري صح، زي 010 1234 5678.»
بتقول إيه اللي يتصلّح، مش اللي غلط
أيقونة + نص، مش لون بس

الحالة الفاضية

بتستخدم الموتيف: «الحيطة دي لسه فاضية 🫠»
وبتقول إيه الخطوة الجاية
مفيش «لا توجد بيانات»

النجاح

«تسلم إيدك. الموافقة وصلتنا.»
صادق: «الطلب اتسجّل (عرض تجريبي)» مش «اتبعت» لو ما اتبعتش

الإشعارات

الحدث + طلب واضح: «الرخام وصل. تحب نبدأ التركيب؟»
حالات من كلمة أو اتنين: خلصت · شغّالة · قرارك · متأخرة

التحية

«صباح الخير يا سلمى. الخميس 22 أكتوبر»
التاريخ بالشهر العربي، الأرقام 0–9
العملة: «68,175 ج.م» (الرقم LTR والعملة بعده)

قبل / بعد

«نحن نقدم لكم أفضل خدمات التشطيب بأعلى جودة وأقل الأسعار.»

كلام الكل، ومفيهوش دليل، ومخالف للصراحة.

«مقايسة مكتوبة بالبند، وتقرير بالصور كل أسبوع.»

حاجة بتتشاف وبتتحاسب عليها.

«حدث خطأ غير متوقع. الرجاء المحاولة لاحقاً.»

«النت قطع. شغلك محفوظ، وهنحاول تاني أول ما يرجع.»

INTERACTION DESIGN

كل حاجة بتتضغط بتعمل حاجة. وبتقول إيه حصل.

مبادئ التعامل اللي بتحكم كل مكوّن.

رد فعل فوري

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

قرار واحد في المرة

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

الحالة قدامك دايماً

اللون + أيقونة + كلمة. مفيش حالة بلون بس. الحيطة بتتشاف من أي شاشة.

الأخطاء بتساعد

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

كيبورد بيشتغل

⌘K بحث في كل حاجة · / بحث · Esc يقفل · الأسهم في التابات والمعرض.

الموبايل أولاً

أهداف لمس 44px، الإجراء الأساسي في الإبهام، وكل جدول بيتحوّل لصفوف بعناوين على الموبايل.

COMPONENTS · ACTIONS

زرار أمبر واحد في الشاشة.

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

الأنواع

واتساب

الأحجام والأيقونات

الحالات states

DEFAULT

HOVER

ACTIVE

FOCUS-VISIBLE

DISABLED

LOADING

حجم الزرار ما بيتغيّرش وهو بيحمّل، والاسم المقروء (accessible name) بيفضل.

روابط

رابط جوه نص كل المشاريع

Chips · Tags · Status · Badges

عاديإطارحبرأمبر مقترح، يتأكدصورة تصويرية

خلصتشغّالةقراركمتأخرةخامةلسه3⌘K

Dropdown

COMPONENTS · FORMS

الحقل بيقولك إيه المطلوب. وبيقولك لما تغلط.

اللابل فوق الحقل دايماً (مش placeholder). الأخطاء بتتربط بالحقل وبتتقال بالعربي. الحدود 2px عشان تتشاف.

حقل نص · الحالات

الاسمزي ما تحب نناديك.

HOVER

FOCUS

VALID

ERROR

اكتب رقم موبايل مصري صح.

DISABLED

أنواع الحقول

موبايل *

+20

بحث

نوع المشروع

تفاصيل اختياري

اختيارات

Range · OTP · Swatches · Calendar

المساحة150 م²

كود التحقق

تشطيب الباب

اليوم

Option cards · رفع ملفات

شقةسكني · تشطيب كاملفيلاسكني · دورين+مكتبإداري · تجاري

اسحب صور الشقة هناصور فقط · لحد 5 ميجا · 6 ملفات

نموذج كامل بالتحقق يشتغل

جرّب تبعت فاضي، وبعدين غلط، وبعدين صح.

COMPONENTS · NAVIGATION

تعرف إنت فين، وتروح فين.

تابات بكيبورد كامل (الأسهم بتتعكس في RTL)، مسار، ترقيم، خطوات، وأكورديون بيفتح واحد واحد.

Tabs

حيطة الشرايح والرقم الكبير.

Breadcrumbs

Pagination

Stepper · Step dots

نوع المشروع

المساحة

النطاق

الذوق

بياناتك

Accordion

بعد المعاينة. بنطلّعلك مقايسة مكتوبة بالبند.

تقدر. وأي تغيير بييجي كطلب موافقة بأثره على التكلفة والمدة.

Website nav (مصغّر)

الخدماتالمشاريعأبواب WPC

App tab bar

COMPONENTS · FEEDBACK & OVERLAYS

كل فعل ليه رد. بس من غير زعيق.

تنبيهات، توست، modal، sheet، لوحة جانبية، تلميح، وحالات الانتظار. كلهم بيقفلوا بـ Esc ويرجّعوا الفوكس.

Alerts

معلومةالتقرير الأسبوعي بيتبعت كل خميس.

تمامالموافقة وصلتنا.

انتبهالرخام ممكن يتأخر يوم. محتاجين قرارك النهارده.

مشكلةرقم الموبايل ناقص رقم.

Toast · Modal · Sheet · Side panel · Command palette جرّب

Tooltip

Progress

Spinner · Skeleton

بنجهّز الحيطة…

Empty state

الحيطة دي لسه فاضية 🫠

لسه مفيش مشاريع هنا. اضغط عشان نبدأ أول واحد.

COMPONENTS · DATA & SURFACES

الرقم الكبير قبل الجدول.

كروت، KPI، جدول بيترتّب ويتبحث، رسوم CSS خفيفة بتتحرك، وتايم لاين وكانبان. كل رسم معاه سطر بيفسّر.

الكروت

card

هادي (hairline)

card.pop

ظل صلب. للمهم بس.

card.tint

تعبئة هادية

card.dark

للأقسام الداكنة

card.amber

عرض أو CTA

card.dusk

مخطط/موافقات

card.sage

اكتمل

card.walnut

خامات

card.hover

بيطلع لما تقف عليه

KPI · الرقم الكبير

المبلغ المحصّل الشهر ده68,175ج.م▲ 12% عن الشهر اللي فات · أرقام تجريبية

مشاريع شغّالة8▼ 1 متأخر

عملاء جداد21آخر 30 يوم

معاينات النهارده3الأولى 11:30

0%

الشغل وصل فين؟ تقريباً 68%.

جدول (بيترتّب ويتبحث) يشتغل

المشروع	المنطقة	المساحة م²	الحالة
شقة التجمع	التجمع الخامس	165	شغّال
فيلا الشروق	الشروق	320	متأخر
مكتب المعادي	المعادي	96	اتسلّم
شقة زايد	الشيخ زايد	140	مستني موافقة

Bars · Donut

سبتمبر أعلى شهر: أرقام تجريبية. كل رسم بسطر يفسّره.

68%

اتنفّذفاضل

Timeline

الكهرباء خلصت

الأسبوع 4

تركيب الرخام

الأسبوع 9 · شغّال

اختيار المقابض

مستني قرارك

Kanban (اسحب الكروت)

جديد2

شقة الشروق

واتسابأ

فيلا زايد

فيسبوكه

معاينة1

مكتب المعادي

إحالةم

اتقفل0

List rows · Avatars · Key/Value

س

سلمى عبد الله

شقة التجمع · RH-2026-014

شغّال

أهم

فريق الموقع

المساحة: 165 م²
الأسبوع: 9 / 14
الإضاءة: 2700K

PATTERNS · WEBSITE

الأقسام اللي بتبيع. بالترتيب.

الموقع بيمشي بنفس ترتيب الحجة: وعد، دليل، عدو، فكرة، خدمات، شغل، إضاءة، خطوات، ورقة، حكاية أسبوعية، قبل/بعد، جرّب، أسئلة، وتصرّف.

Marquee · أحداث حقيقية

خلصت الكهرباء في شقة التجمعطلب موافقة: لون الدهانشغّال: تركيب الرخامتنبيه: توريد اتأخر يوم

Stickers · Spin badge

الكهرباء خلصتقبل الميعاد بيومين

مستني قراركاختار رخام الأرضيات

تقرير الأسبوع 912 صورة

Bento · كل واحدة بدليل من الواجهة

تشطيب متكامل

حالة كل بند قدامك.

كهرباء

خلصت

أرضيات

شغّالة

أبواب WPC

عرض سعر على القياس.

الإضاءة

نجارة

جواز الشقة

How-it-works · أرقام عملاقة

01

معاينة

قياس وسماع.

02

تصميم

خامات وألوان.

03

اتفاق

مكتوب.

04

تنفيذ

8 شرايح.

Pain cards · بصوت العميل

قالّي «قرّبنا»… من شهرين.صياغة قريبة من كلام بنسمعه كتير

الرخام اتغيّر وأنا معرفش.صياغة قريبة من كلام بنسمعه كتير

Compare slider

قبلبعد

Kelvin simulator

3000K

2700Kدافي ناعم6500K

2700K ولا 4000K؟

جواز الشقة · الورقة اللي بتتشارك

جواز الشقة

إضاءة
2700K · CRI 90+

كوف + سبوت

أبواب
WPC جوز

RD-W1

اتعمل بواسطة Raya HomeRH-2026-014

نموذج

PATTERNS · APP & DASHBOARD

نفس اللغة. كثافة مختلفة.

التطبيق للعميل: رقم كبير وقرار واحد. اللوحة للفريق: كثافة بيانات وسرعة. الاتنين بيستخدموا نفس الـ tokens ونفس الشريحة.

طلب موافقةمستني قرارك

رخام الأرضيات · الريسبشن

الأثر على التكلفة

تقديري، يتأكد

الأثر على المدة

+0 يوم

عميل جديدواتساب

أ

م. أحمد سعيد

شقة الشروق · 140 م²

معاينةمقايسة

مقايسة · نسخة 2مسودة

البند	الكمية	الإجمالي
رخام أرضيات	68 م²	30,600
دهان جصّي	310 م²	24,800
الإجمالي (تجريبي)		55,400 ج.م

القوالب (templates)

هيكل كل نوع صفحة بالترتيب.

HOME

هيرو + كارت الحيطة

ماركي

العدو

الفكرة: الحيطة

بنتو الخدمات

شغل (rail)

معمل الإضاءة

6 خطوات

جواز الشقة

حكاية أسبوعية

قبل/بعد

تقدير البنود

أسئلة

CTA + فوتر

INNER

phero + مسار

شريط أدوات / فلتر

شبكة محتوى

CTA

فوتر

DETAIL

phero + صورة

تفاصيل | مواصفات sticky

معرض + lightbox

مشاريع تانية

CTA

FLOW

stepper

خطوة واحدة

ملخص حي sticky

نجاح + إجراء تالي

APP

status bar

رقم كبير

الحيطة

قرار مستني

tab bar

DASH

sidebar | top bar

KPI row (1 pop)

رسم + تفسير

جدول مع شرايح

QUALITY · ACCESSIBILITY

مقصود نوصّل لـ WCAG 2.2 AA. من غير ما ندّعي شهادة.

الهدف عملي: الكل يقدر يقرا ويضغط ويكمّل. ده اللي مطبّق في الكود، والاختبار الرسمي مرحلة لاحقة.

الرؤية

تباين النص ≥ 4.5:1 (الأمبر كنص على الفاتح ممنوع)
الحالة = لون + أيقونة/كلمة
حد أدنى للنص 13px، وسطر 1.85 للعربي
تكبير 200% من غير ما يكسر

الكيبورد

كل حاجة بتتضغط بتتوصّل بـ Tab
حلقة فوكس زرقا 3px واضحة (مش أمبر)
Esc يقفل أي حاجة، والفوكس يرجع
مصيدة فوكس جوه الـ modal
أسهم التابات بتتعكس في RTL

اللمس والحركة

أهداف لمس ≥ 44px
prefers-reduced-motion بيوقف الحركة ويسيب التغيير
مفيش autoplay بصوت، ولا carousels بتلف لوحدها

القراءة

lang وdir صح
landmarks وترتيب عناوين
label لكل حقل وربط الأخطاء
alt وصفي للصور المعبّرة

حلقة الفوكس

لون الفوكس --focus: #2B6FD6 مختلف عن الأمبر والأسود والكريمي عشان يتشاف على الكل.

اختصارات الكيبورد

⌘ Kبحث سريع في كل حاجة

/بحث (برّه الحقول)

Escقفل modal / sheet / lightbox

← →تابات ومعرض الصور

Tabتنقل · Shift عكسي

QUALITY · DIRECTION

عربي أولاً. وجاهز للإنجليزي من غير تعديل.

مفيش left/right في الـ components. كله logical properties. جرّب الزرار وشوف الصفحة كلها بتتقلب.

الأيقونات الاتجاهية (.dir) بتتعكس. اللوجو والصور ما بتتعكسش.

كهرباء وإضاءة

اتسلّمت · الأسبوع 4

خلصت

التفاصيل

margin-inline-start · padding-inline · inset-inline-end · text-align:start

margin-left · right:0 · text-align:left في أي component.

REFERENCE · TOKENS

كل القيم في مكان واحد: tokens.css.

القيم دي بتتقرا لحظياً من الصفحة. اضغط أي اسم لنسخه، أو نزّل ملف JSON. القاعدة: الـ components ما بتستخدمش hex خام أبداً.

REFERENCE · RULES

12 قاعدة لأي حد (أو أي AI) يعدّل في السيستم.

عشان يفضل متماسك بعد شهور.

1. tokens الأول. أي لون أو مسافة أو نصف قطر جديد يتضاف في tokens.css بسبب مكتوب. ما بنحطش hex في component.
2. اللون ليه معنى. ما نستخدمش أمبر/ساج/دَسك/رست خارج معناهم. لو محتاج معنى جديد، نضيفه للأسطورة الأول.
3. زرار أمبر واحد. في الشاشة الواحدة. والباقي ink/ghost/quiet.
4. 1–3 عناصر صاخبة. الحد الأسود والظل الصلب بس على الأهم.
5. الشريحة مش زينة. لازم تشيل حالة حقيقية.
6. logical properties. مفيش left/right. وأيقونات الاتجاه بـ .dir.
7. حالات كاملة. أي مكوّن تفاعلي له default/hover/focus/active/disabled/loading/error.
8. صراحة. الصور التوضيحية معلّمة، والأرقام التجريبية معلّمة، ومفيش ادّعاء من غير دليل.
9. العامية المصرية. عنوان بنقطة، mark واحد، أرقام 0–9.
10. الحركة بغرض. وكلها بتتوقف مع reduced-motion.
11. من غير build. HTML + CSS + JS خام. من غير مكتبات.
12. وثّق. أي component جديد بيدخل الصفحة دي بحالاته وكوده.

ملاحظة صراحة: ده تصميم للمراجعة. الألوان مقدّرة من صور العميل، واللوجو مقترح مؤقت، والصور مفاهيم تصميمية، والبيانات تجريبية. القرارات المفتوحة كلها في OPEN_QUESTIONS.