نظرة عامة
Ruda أداة لتتبع المستندات وجمع العملاء المحتملين، مع نظام CRM مدمج، لفرق المبيعات والتسويق في الشركات.
- المنتج
- Ruda
- الناشر
- Rexplore Inc.
- نظام التصميم
- Vercel Geist
- الخطوط
- Geist Sans, Geist Mono
بُنيت واجهة Ruda على نظام التصميم Vercel Geist. تتبع الألوان وسلّم أحجام الخط والزوايا والحركة أصل Geist، وحين يختلف تطبيقنا عن الأصل فالمرجع هو الأصل.
خطا Geist Sans وGeist Mono من Vercel، بترخيص SIL Open Font License 1.1.
الشعار
الشعار هو الكلمة RUDA مكتوبة بخط Geist Sans، بلا رمز ولا مربع للحرف الأول.
القواعد
- يُكتب دائمًا بالأحرف الكبيرة: RUDA. أما في سياق النص فيُكتب اسم المنتج Ruda.
- سُمك الخط 600 (SemiBold)، ولا يُستخدم أثقل منه.
- المسافة بين الأحرف ثابتة عند 0.64px في كل الأحجام، لذا تصغر النسبة كلما كبر الشعار.
- أصغر حجم 12px.
- المساحة الخالية: اترك من كل جانب ما لا يقل عن ارتفاع حرف كبير واحد (0.71 × حجم الخط).
- اللون: #171717 على الخلفيات الفاتحة، والأبيض على الخلفيات الداكنة. لا ألوان أخرى.
- تنطق قارئات الشاشة الاسم Ruda كاملًا لا حرفًا حرفًا. اكتب Ruda في النص البديل والتعليقات والمستندات.
- يُقرأ الشعار دائمًا من اليسار إلى اليمين، حتى في الصفحات العربية، ولا يُترجم ولا يُنقل إلى حروف أخرى.
الأحجام
| الحجم | المسافة بين الأحرف | النسبة | نموذج |
|---|---|---|---|
| 12px | 0.64px | 0.053em | Ruda |
| 14px | 0.64px | 0.046em | Ruda |
| 16px | 0.64px | 0.040em | Ruda |
| 24px | 0.64px | 0.027em | Ruda |
| 32px | 0.64px | 0.020em | Ruda |
ما يجب تجنبه
استخدام خاطئأحرف صغيرة
استخدام خاطئأحرف مختلطة
استخدام خاطئتغيير المسافة بين الأحرف
استخدام خاطئخط مائل
استخدام خاطئإطار خارجي
استخدام خاطئظل
استخدام خاطئتدرج لوني
استخدام خاطئلون خارج العلامة
استخدام خاطئمربع للحرف الأول أو رمز
الألوان
الحياد أولًا. الأسود هو لون العلامة، والأزرق مخصص للروابط والحالات فقط. حُسب التباين لكل رمز لوني مقابل الأبيض والأسود.
AA تعني 4.5:1 أو أكثر، وهي كافية للنص الأساسي. AA للنص الكبير تعني 3:1 أو أكثر، وتُستخدم للنص الكبير وعناصر الواجهة فقط.
| الرمز | HEX | على الأبيض (#ffffff) | على الأسود (#000000) | |
|---|---|---|---|---|
| العلامة | ||||
| primaryالأساسي: الأزرار والشعار والنص الرئيسي | #171717 | 17.93:1AA | 1.17:1دون AA | |
| primary (dark)التعبئة الأساسية في الوضع الداكن | #2e2e2e | 13.58:1AA | 1.55:1دون AA | |
| cta (dark)الأزرار الرئيسية في الوضع الداكن | #ededed | 1.17:1دون AA | 17.94:1AA | |
| الأزرق | ||||
| linkنص الروابط | #0068d6 | 5.31:1AA | 3.95:1AA للنص الكبير | |
| link-darkنص الروابط في الوضع الداكن | #52a8ff | 2.50:1دون AA | 8.40:1AA | |
| toggle-on · toast-success · infoالمفتاح في وضع التشغيل، وإشعار النجاح، وتعبئة المعلومات | #0070f3 | 4.55:1AA | 4.61:1AA | |
| تجريبي | ||||
| badge-pinkشارة الإصدار التجريبي بنص أبيض | #bd2864 | 5.75:1AA | 3.65:1AA للنص الكبير | |
| badge-pink-darkشارة الإصدار التجريبي في الوضع الداكن | #b31a57 | 6.56:1AA | 3.20:1AA للنص الكبير | |
| معطّل | ||||
| disabled-bgتعبئة العنصر المعطّل | #f2f2f2 | 1.12:1دون AA | 18.76:1AA | |
| disabled-fgنص العنصر المعطّل | #8f8f8f | 3.23:1AA للنص الكبير | 6.49:1AA | |
| الرمادي | ||||
| gray-50الخلفية | #f2f2f2 | 1.12:1دون AA | 18.76:1AA | |
| gray-100الخلفية عند التمرير | #ebebeb | 1.19:1دون AA | 17.62:1AA | |
| gray-200الخلفية عند الضغط | #e6e6e6 | 1.25:1دون AA | 16.83:1AA | |
| gray-300الحدود | #ebebeb | 1.19:1دون AA | 17.62:1AA | |
| gray-800النص الثانوي | #4d4d4d | 8.45:1AA | 2.48:1دون AA | |
| gray-900النص الرئيسي | #171717 | 17.93:1AA | 1.17:1دون AA | |
| gray-500 (dark)النص الثانوي في الوضع الداكن | #a0a0a0 | 2.61:1دون AA | 8.03:1AA | |
| الحالات | ||||
| successنقطة النجاح وشارته | #45a557 | 3.10:1AA للنص الكبير | 6.77:1AA | |
| warningتحذير | #f5a623 | 2.03:1دون AA | 10.36:1AA | |
| errorالأخطاء والإجراءات غير القابلة للتراجع | #e5484d | 3.91:1AA للنص الكبير | 5.37:1AA | |
العناصر المعطّلة مستثناة من الحد الأدنى للتباين (WCAG 1.4.3)، ويجب أن تحمل دائمًا disabled أو aria-disabled. #8f8f8f / #f2f2f2 = 2.89:1
الطباعة
يُكتب كل نص في الواجهة والتسويق بخط Geist Sans، ويُستخدم Geist Mono للشيفرة والقيم مثل HEX.
Geist Sans Aa Bb 0123
Geist Mono Aa Bb 0123
العناوين
| الرمز | الحجم | ارتفاع السطر | السُمك | المسافة بين الأحرف |
|---|---|---|---|---|
| text-heading-56 | 56px | 56px | 600 | -3.36px |
| text-heading-48 | 48px | 56px | 600 | -2.88px |
| text-heading-40 | 40px | 48px | 600 | -2.4px |
| text-heading-32 | 32px | 40px | 600 | -1.28px |
| text-heading-24 | 24px | 32px | 600 | -0.96px |
| text-heading-20 | 20px | 26px | 600 | -0.4px |
| text-heading-16 | 16px | 24px | 600 | -0.32px |
| text-heading-14 | 14px | 20px | 600 | -0.28px |
النص
| الرمز | الحجم | ارتفاع السطر |
|---|---|---|
| text-2xs | 12px | 16px |
| text-xs | 13px | 18px |
| text-sm | 14px | 20px |
| text-base | 16px | 24px |
| text-xl | 20px | 28px |
| text-2xl | 24px | 32px |
| text-3xl | 32px | 40px |
السُمك
الأوزان: 400 للنص، و500 للأزرار، و550 للتأكيد، و600 للعناوين والشعار. لا يُستخدم 700 فما فوق، ويرفضه فحص البناء.
أنظمة الكتابة الأخرى
- تستخدم الكورية واليابانية والصينية بعد Geist خط النظام الخاص بكل لغة (الكورية: Pretendard). تضيق العناوين من 24px فأكثر بمقدار -0.02em، وتبقى 0 عند 20px فأقل.
- تبقى المسافة بين الأحرف في العناوين التايلاندية والعربية صفرًا حتى لا تنكسر علامات النغمة ولا اتصال الحروف. العناوين التايلاندية بحجمي 48px و56px ارتفاع سطرها 1.2.
- تسير الصفحات العربية من اليمين إلى اليسار، ويبقى الشعار وقيم HEX والشيفرة من اليسار إلى اليمين.
الشكل والمسافات
استدارة الزوايا
- 6pxعناصر التحكم وحقول الإدخال
- 8pxالبطاقات والنوافذ المنبثقة والقوائم
- 12pxالنوافذ الحوارية
الظل
تُفصل البطاقات بخط 1px بدل الظل، ولا تحمل الجداول ظلًا أبدًا. الظلال للطبقات العائمة فقط:
- النوافذ المنبثقة والقوائم0 8px 24px rgba(0,0,0,.12)
- النوافذ الحوارية0 16px 48px rgba(0,0,0,.16)
المسافات
تتدرج المسافات بمضاعفات 4px.
الحركة
- لا تغيّر الاستجابة إلا اللون أو الشفافية أو الظل. لا يكبر شيء ولا يتحرك عند الضغط أو التمرير.
- تستغرق الانتقالات من 150 إلى 200ms على منحنى التباطؤ في Geist.
- تظهر النوافذ المنبثقة والحوارية بتلاشٍ تدريجي، ولا تُموَّه الخلفية أبدًا.
- عند تفعيل تقليل الحركة يتحول كل انتقال إلى تلاشٍ بسيط.
cubic-bezier(0, 0, 0.2, 1)
التواصل
لأي سؤال عن استخدام اسم Ruda أو شعاره، راسلنا على help@rexplore.xyz.