تخطَّ إلى المحتوى
نظام التصميم

معرض المكوّنات

كل مكوّن في نظام التصميم، بعد تطبيق التصحيحات التي يفرضها دليل البناء. بدّل اللغة لتفحص الصفحة نفسها في اتجاه القراءة الآخر.

منقول عن نظام تصميم كاليندتي للصفحة التعريفية. خمسة توكنات لونية وحلقة التركيز مختلفة عن قصد — راجع docs/DERIVED-TOKENS.md.

توكنات الألوان

الأخضر هو العمود، والخوخي لمسة واحدة، والطيني نادر. كل تباين يُقاس آليًا في كل بناء.

  • --color-cream
  • --color-white
  • --color-inset
  • --color-hairline
  • --color-control
  • --color-ink
  • --color-body
  • --color-muted
  • --color-green
  • --color-green-hover
  • --color-green-08
  • --color-green-12
  • --color-mid-green
  • --color-avatar
  • --color-peach
  • --color-peach-text
  • --color-terracotta
  • --color-terracotta-fill
  • --color-terracotta-08
  • --color-terracotta-text
  • --color-danger
  • --color-danger-08

سلّم الخطوط

خطّان لكل لغة. الحجم يأتي من الصنف، لا من مستوى العنوان.

الاجتماعات، تمّت.

Hero · Plex Arabic 700 · 56 / 1.22 · no tracking

اعثر على الوقت المناسب فورًا

Section · Plex Arabic 700 · 34 / 1.32

جدولة ذكية

Card title · Plex Arabic 600 · 18

يقرأ الوكيل تقويمك، ويجد وقتًا يناسب الجميع، ثم يرسل الدعوة — فالاجتماع يحتاج رسالة واحدة لا عشرًا.

Body lg · Plex Arabic 400 · 17 / 1.75

يقرأ ساعات عملك والمناطق الزمنية، ويقترح أوقاتًا تناسب الطرفين فعلًا.

Body · Plex Arabic 400 · 15 / 1.75

بدون بطاقة ائتمان · ألغِ في أي وقت

Caption · Plex Arabic 400 · 12
الجدولة، تمّت Eyebrow · Plex Arabic 600 · 11 · no uppercase, no tracking
احجز موعدًا Button label · Plex Arabic 500 · 14

في العربية خط واحد يحمل الدورين، والوزن هو ما يصنع التدرّج. تُلغى الحروف الكبيرة والتباعد بين الحروف، ويتّسع تباعد الأسطر، وتُغلَّف المقاطع اللاتينية حتى تبقى علامات الترقيم في مكانها.

الأزرار

أساسي وثانوي فقط — والإجراء الهادئ رابط. الزر الذي ينقلك إلى صفحة هو رابط. زر أساسي واحد في كل موضع.

أساسي احجز موعدًا
ثانوي
صغير
معطّل
مع أيقونة شاهد كيف يعمل

الشارات

لون الخوخ مرة واحدة في القسم على الأكثر، والطيني مرة واحدة في الصفحة كلها أو لا شيء.

نظام التصميم الأسعار الزخرفة فشلت عملية الدفع

البطاقات

السطح الأساسي: أبيض على الكريمي. والبطاقة التي ترتفع عند المرور رابط حقيقي دائمًا، لا عنصرًا يستجيب للنقر فقط.

اسأل الوكيل

قل لي مع مَن وكم المدة، وأنا أجد الوقت.

صفحة الحجز

صفحة الحجز التقليدية ما زالت موجودة لمن يفضّل اختيار الوقت بنفسه.

تم استلام العربون

العرابين والإيصالات وحالات الدفع الفاشلة تُدار دون أن تطارد أحدًا.

عنوان القسم

شارة تمهيدية، ثم العنوان، ثم سطر داعم. السطر الداعم لا يتجاوز 460 بكسل ليبقى مريحًا للقراءة.

الجدولة، تمّت

اجتماعات تحجز نفسها

وكيل كاليندتي يجد الوقت، ويرسل الدعوة، ويُبقي الجميع على اطلاع.

لماذا ينتقل الآخرون

هدوء بالتصميم

نظام واحد هادئ من أول رسالة حتى تأكيد الموعد.

فقاعات المحادثة

المحادثة كاملة داخل HTML. السكربت يعيد تشغيلها فقط، وعلى الشاشة فقط، ولا يعمل مع تقليل الحركة.

كيف يتم الحجز

مساء الخير — في موعد قص شعر الخميس بعد الظهر؟
الخميس متاح. 2:30 أو 4:00 مع سارة، الاثنان مفتوحان.
2:30 لو سمحت
تم الحجز الخميس 2:30. عربون 20% يثبّت الموعد، وهذا رابط الدفع.
تم التأكيد وأضيف إلى تقويمك

بطاقة الموعد

مؤكَّد وملغى. الإلغاء حالة محايدة لا حالة خطر — فهو معلومة لا فشل.

الموعد مؤكَّد
أكتوبر
16
قص شعر مع سارة
الخميس · 2:30 – 3:15 ظهرًا
S N أُرسلت الدعوة إلى سارة
أُلغي الموعد
أكتوبر
16
قص شعر مع سارة
الخميس · 2:30 – 3:15 ظهرًا
S أُبلغت سارة بالإلغاء

بطاقات الدفع

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

تم استلام المبلغ
‏120.00 US$
مدفوع بالكامل · فيزا تنتهي بـ 4242
إيصال رقم INV-2831 عرض الإيصال
تم استلام العربون
‏40.00 US$
عربون 33% · الإجمالي ‏120.00 US$
الباقي ‏80.00 US$ يُسدَّد عند الموعد
إيصال رقم INV-2831 عرض الإيصال
فشلت عملية الدفع
‏120.00 US$
رُفضت البطاقة · فيزا تنتهي بـ 4242
لم يُخصم أي مبلغ
فشل دفع العربون
‏40.00 US$
الرصيد غير كافٍ · فيزا تنتهي بـ 4242
لم يُخصم أي مبلغ

التبويبات

نمط APG كاملًا: تنقّل بمفتاح واحد، ومفتاحا Home وEnd، وأسهم تتبع اتجاه القراءة.

قل لي مع مَن وكم المدة، وأنا أجد الوقت.
2:30 لو سمحت

حقول الإدخال

لكل حقل تسمية حقيقية، وقيمة autocomplete، ورسالة خطأ مرتبطة به عبر aria-describedby.

الأسعار شاملة الضريبة.

اكتب بريدًا إلكترونيًا مثل sara@example.com حتى نرسل لك التأكيد.

الخميس، 16 أكتوبر

حلقة التركيز

الحلقة نفسها على الكريمي والأبيض والرمادي والأخضر — وهو التصحيح الذي يصفه الدليل بالأهم.

تنقّل بمفتاح Tab بين العناصر بالأسفل لترى حلقة التركيز على كل خلفية.

على الكريمي
على الأبيض
على الرمادي الفاتح
على الأخضر

الصور الرمزية

الأحرف على أخضر أغمق ليتجاوز تباين النص الأبيض 4.5:1، ويحمل كل رمز اسم صاحبه.

S N A

الزخرفة

الرسم الخلفي الوحيد. طبقة واحدة ظاهرة في كل مرة — بلا أشكال عائمة ولا تدرّجات شبكية ولا أشكال مجرّدة.

شبكة التقويم · 38 بكسل · أخضر بشفافية 4.5% فوق الكريمي الخطوط وحدها · فوق سطح أبيض

الحركة

لغة واحدة هادئة — بلا قفزات ولا ما يخطف الانتباه.

  • الظهور ظهور هادئ مع صعود خفيف عند التمرير — 16 بكسل، والشفافية من 0 إلى 1، خلال 0.5 ثانية، وبفارق 60 ملّي ثانية بين العناصر.
  • عرض الوكيل تُعاد المحادثة سطرًا بسطر، والنص الكامل موجود أصلًا داخل HTML.
  • المرور ارتفاع خفيف — البطاقة 2 بكسل والزر 1 بكسل — مع ظل أقوى قليلًا.
  • التوقيت من 0.16 إلى 0.20 ثانية لتغيّرات الحالة. بلا قفز ولا ارتداد ولا ما يخطف الانتباه.

الأسئلة الشائعة

عنصرا details وsummary الأصليان. بلا سكربت، وبالبيانات نفسها التي تغذّي مخطط FAQPage.

ما الفرق بين Calendaty وCalendly؟

يمنح Calendly العميل رابطًا ليختار موعدًا. أما Calendaty فيضيف وكيلًا ذكيًا يجيب عن الأسئلة، ويرشّح الخدمة المناسبة، ويحوّل الاستفسارات إلى مواعيد محجوزة ومدفوعة — مع العربية وطرق الدفع المحلية مدمجة.

هل أنتقل من Calendly دون أن أفقد إعداداتي؟

نعم. استورد أنواع المواعيد وأوقات التوفر وروابط الحجز في نقرات قليلة. روابطك الحالية تبقى تعمل أثناء الانتقال، فلا انقطاع لدى عملائك.

هل أحتاج إلى مبرمج لإعداده؟

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

كيف يتعلّم الوكيل الذكي طبيعة عملي؟

تزوّده مرة واحدة بخدماتك وأسعارك وفريقك وسياساتك. يجيب عن أسئلة العملاء من هذه المعرفة، ولا يحجز إلا ما أتحته أنت.

ما طرق الدفع المدعومة؟

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

هل يعمل بالعربية ومن اليمين إلى اليسار؟

نعم. Calendaty ثنائي اللغة بالكامل، بواجهات عربية أصلية تدعم الاتجاه من اليمين إلى اليسار في صفحة الحجز وفي الوكيل الذكي معًا.