انتقل إلى المحتوى
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
Built in the Gulf, for the Gulf.
النص الأساسيReadex Pro 400 · 16–18 px / 1.6
Tafra builds software for independent businesses in the Gulf. 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 في النصوص، أو بنصف عرض الجذع في الشعار.
  • يجوز أن تكون الكلمة المقطوعة بالأخضر الليموني على الأسطح الداكنة. ويبقى باقي العنوان بلون العاج.
  • في الصور والأشكال، اقطع شريطًا واحدًا بين 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.

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

الشعارات

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

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