انتقل إلى المحتوى
Tafra
English

موارد الهوية

نزّل SVGنزّل PNG
افتح دليل الهويةنزّل حزمة الهوية

دليل الهوية

كيف تبدو طفرة وكيف تتحدث. تعرض هذه الصفحة القواعد الواردة في DESIGN.md، ولا تضيف قواعد جديدة.

نزّل حزمة الهوية

01

الفكرة

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

كل شيء يبقى في مكانه، إلا انزياحًا واحدًا.

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

الرمز المختصر لطفرة

03

المساحة الفارغة والحجم

الشعار الكتابي مع تحديد المساحة الفارغة من كل جانب.

اترك حول الشعار من كل جانب مساحة فارغة تساوي ارتفاع حرف a في الشعار الكتابي، أي نحو 0.75 من ارتفاع الشعار. لا يدخل هذه المساحة أي عنصر آخر.

  • الحد الأدنى لعرض الشعار الكتابي 72 بكسل على الشاشة و18 مم في الطباعة.
  • الحد الأدنى لحجم الرمز المختصر 16 بكسل على الشاشة و6 مم في الطباعة.
  • في الأحجام الأصغر من 24 بكسل، استخدم ملف أيقونة المتصفح، فهو على مربع أخضر ليموني لضمان التباين.

04

الاستخدام الخاطئ للشعار

كل مثال أدناه يخالف قاعدة من قواعد الشعار. لا تستخدم الشعار هكذا أبدًا.

  • لا تُعِد كتابة الشعار الكتابي بخط طباعي.

  • لا تمدّ الشعار ولا تضغطه.

  • لا تُدِر الشعار.

  • لا تضع الانزياح الليموني على خلفية بلون العاج أو الأبيض. استخدم النسخة الفاتحة.

  • لا تغيّر ألوان الشعار خارج النسخ الخمس.

  • لا تُضف مؤثرات أو حدودًا أو ظلالًا أو تدرجات.

  • لا تضع الشعار على صورة مزدحمة دون لوح بلون واحد خلفه.

  • لا تدمج شعار طفرة مع شعار برافو في علامة واحدة.

05

الألوان

هذه القيم ثابتة. يتكوّن التصميم المعتاد من نحو 60% فراغ، و25% غرافيت أو عاج، و10% نص بلون الضباب أو الرماد، و5% طفرة.

اختر لونًا لنسخ رمزه الست عشري.

  • السطح الداكن الرئيسي. ولون النص على الأسطح الفاتحة.

    --tf-void

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

    --tf-graphite

  • السطح الفاتح. ولون النص على الأسطح الداكنة.

    --tf-bone

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

    --tf-mutation

  • الانزياح والروابط على الأسطح الفاتحة.

    --tf-deep

  • النص الثانوي على الفراغ والغرافيت.

    --tf-fog

  • النص الثانوي على العاج.

    --tf-ash

التباين

تُحسب النسب بمعادلة WCAG 2.2 على قيم sRGB المصمتة. استخدم الأزواج المسموح بها هنا فقط.

النص على الخلفيةالنسبةالاستخدام المسموح
العاج على الفراغ16.45:1كل النصوص
العاج على الغرافيت12.53:1كل النصوص
الطفرة على الفراغ14.19:1كل النصوص
الطفرة على الغرافيت10.80:1كل النصوص
الفراغ على الطفرة14.19:1كل النصوص والأزرار
الضباب على الفراغ7.00:1النص الثانوي
الفراغ على العاج16.45:1كل النصوص
الرماد على العاج5.44:1النص الثانوي
الطفرة الداكنة على العاج5.37:1الروابط واللمسات البارزة
الطفرة على العاج1.16:1غير مسموح

06

الخطوط

خط Bricolage Grotesque للعناوين الكبيرة وسائر العناوين، وخط Readex Pro للنص الأساسي ولكل الاستخدامات العربية. كلاهما مجاني بموجب رخصة SIL Open Font License.

اللاتينية

العنوان الكبيرBricolage Grotesque 800 · 56–120 px / 0.95–1.0 · −0.03em
Most businesses fit the pattern.
العنوانBricolage Grotesque 700 · 24–40 px / 1.1 · −0.02em
Software for independent businesses
العنوان الفرعيBricolage Grotesque 600 · 18–22 px / 1.25 · −0.01em
For independent businesses, everywhere.
النص الأساسيReadex Pro 400 · 16–18 px / 1.6
Tafra builds software for independent businesses. Our first product is Bravo.
النص الصغير والتسمياتReadex Pro 500 · 13–14 px / 1.4
Our first product
العنوان التمهيديReadex Pro 500 · 12 px / 1.2 · +0.14em
Our first product

العربية

العنوان الكبيرReadex Pro 700
معظم الأعمال تسير على النمط.
العنوانReadex Pro 700
برمجيات للأعمال المستقلة
النص الأساسيReadex Pro 400 · 1.7
تطوّر طفرة برمجيات للأعمال المستقلة. أول منتجاتنا هو برافو.
  • استخدم ثلاثة أحجام خط على الأكثر في الشاشة الواحدة.
  • حاذِ النص الإنجليزي إلى اليسار، والنص العربي إلى اليمين. لا توسّط الفقرات.
  • لا تباعد بين الحروف العربية أبدًا، ولا تضع العربية في أنماط الأحرف الكبيرة أو العناوين التمهيدية.

07

الانزياح

اقطع شريطًا أفقيًا واحدًا عبر العنصر، وأزحه جانبًا. ويبقى سائر العنصر في مكانه.

Break the pattern.

اللاتينية: ينزاح الشريط إلى اليمين.

اكسر النمط.

العربية: ينزاح الشريط إلى اليسار.
خطأ: القطع في منتصف الحروف يبدو وكأنه خط شطب.
  • استخدم انزياحًا واحدًا في كل شاشة، فهو اللمسة البارزة.
  • أزح إلى اليمين في التصاميم اللاتينية، وإلى اليسار في التصاميم العربية.
  • في النصوص، اقطع كلمة أساسية واحدة أو عبارة قصيرة عبر الثلث السفلي من الحروف، من نحو 0.25em فوق خط الأساس إلى أسفله بقليل.
  • أزح بنحو 0.12em في النصوص، أو بنصف عرض الجذع في الشعار.
  • في العربية، اقطع من نحو 0.42em فوق خط الأساس، وأزح الشريط بنحو 0.14em، ليمرّ عبر الأسنان والجذوع لا عبر خط الوصل وحده.
  • يجوز أن تكون الكلمة المقطوعة بالأخضر الليموني على الأسطح الداكنة. ويبقى باقي العنوان بلون العاج.
  • في الصور والأشكال، اقطع شريطًا واحدًا يبلغ 8 إلى 15% من الارتفاع، وأزحه بمقدار 5 إلى 8% من العرض، واملأ الفراغ بلون الطفرة.
  • لا تقطع أبدًا النصوص الأساسية أو الأسعار أو الأرقام أو الأسماء أو النصوص القانونية أو أي شيء يحتاج الناس إلى قراءته بدقة.
  • لا تُضف أبدًا قطعًا متراكبة أو انقسامات ألوان RGB أو خطوط مسح أو تشويشًا أو أي مؤثرات خلل أخرى.

08

الحركة

  • الانزياح هو الحركة المميزة الوحيدة. ينزلق الشريط إلى موضعه في 240 ملي ثانية بمنحنى cubic-bezier(0.2, 0.8, 0.2, 1)، مرة واحدة، عند ظهوره أول مرة.
  • تستغرق التغيّرات عند مرور المؤشر والتركيز 160 ملي ثانية بمنحنى ease-out.
  • لا حركة متكررة، ولا تأثير اختلاف المنظر، ولا ارتداد.
  • عند تفعيل تقليل الحركة، اعرض الحالة النهائية دون أي حركة.

09

طفرة وبرافو

  • برافو هو المنتج الذي يستخدمه العملاء. وطفرة هي الشركة الأم.
  • استخدم تصميم برافو كما هو. وعلى أسطح طفرة الداكنة، ضعه على لوح أبيض أو سماوي.
  • لا تدمج شعاري طفرة وبرافو في علامة واحدة أبدًا.
  • لا تخلط أزرق برافو الكوبالتي أو السماوي أو الأصفر في تصاميم طفرة، إلا داخل لوح شعار برافو.
  • صِف برافو بالعبارة المعتمدة فقط، واربطه بموقع usebravo.app.

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

  • برافو
    الشعار العربيSVGPNG
  • برافو
    الشعار الإنجليزيSVGPNG

10

التنزيلات

تضم حزمة الهوية كل الشعارات والأيقونات وملفات PNG، وخطوط الويب مع رخصها، وقيم التصميم، وملف DESIGN.md.

نزّل حزمة الهوية

الشعارات

أيقونات التطبيق والمتصفح

صورة المشاركة وقيم التصميم والخطوط