انتقل إلى المحتوى الرئيسي
نظام العلامة التجارية الإصدار 1

نظام FlytBase البصري واللفظي

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

قم بتنزيل مهارة العلامة التجارية
طبعة
الإصدار 2026.04
جمهور
لفرق المنتج والعلامة التجارية والهندسة

الألوان

ثلاثة عناصر أساسية تدعم النظام. اللون الفحمي هو خلفية الصفحة الافتراضية، وليس نمطًا. اللون البرتقالي الفاقع هو اللون الأساسي. أما لون الأوكالبتوس فهو اللون الثانوي للحظات المنصة. تجنب استخدام اللون البرتقالي الفاقع ولون الأوكالبتوس معًا في نفس نافذة العرض.

قاعدة صارمة

لا تخلط بين o400 و e400 في نفس نافذة العرض. اختر لونًا مميزًا واحدًا لكل قسم.

فحمي (قاعدة داكنة)

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

إشارة برتقالية

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

الأوكالبتوس

يُستخدم كعنصر ثانوي لتسليط الضوء على أحداث المنصة والبيانات. يُستخدم في الأقسام ذات الإضاءة المعكوسة.

رمادي بارد (قاعدة فاتحة)

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

ألوان الحالة الدلالية

طبقة وظيفية منفصلة عن العلامة التجارية. اربط كل حالة بأيقونة وعلامة، ولا تستخدم اللون وحده. يستخدم النجاح لون الأوكالبتوس؛ أما الخطأ/التحذير/المعلومات/التقدم/المراجعة فلها ألوان مخصصة.

يُشار إلى العناصر باستخدام اسم الرمز المميز، وليس باستخدام الرمز السداسي العشري. يتم تعريف الرموز المميزة في src/app/globals.css داخل @theme.

الطباعة

ثلاث عائلات، لكل منها دور محدد. لورا للعرض. جيست لنسخ واجهة المستخدم. جيست مونو للبيانات الوصفية. يتم تحميلها عبر next/font؛ ولا يتم تحميلها من fonts.googleapis.com أثناء التشغيل.

عرض

Lora

العمليات المستقلة

العناوين الرئيسية، والعرض، واللمسات التحريرية. يُستخدم الخط المائل لورا لتسليط الضوء على كلمة واحدة في العنوان، وليس على جملة كاملة.

واجهة المستخدم

Geist

برنامج إدارة أسطول الطائرات بدون طيار للمؤسسات، مصمم للتوسع.

نص المحتوى، والأزرار، وقوائم التنقل، والنماذج. جميع نصوص واجهة المستخدم موجودة في Geist.

البيانات الوصفية

Geist Mono

FLT-2026.04 - 12:00 بالتوقيت العالمي المنسق

الحواجب، والملصقات، والطوابع الزمنية، والأرقام، والرموز.

حجم

تتخذ العناوين شكل منحنى ثابت (32 بكسل، 4 عرض رأسي، 56 بكسل). يبلغ عرض النص الأساسي 17 بكسل/1.6. تقع الحواجب على ارتفاع 10 بكسل مع مسافة 0.12em.

الأيقونات

تُثبّت الأيقونات على @phosphor-icons/react بوزن رفيع (بخط 1 بكسل). الوزن العادي مقبول فقط داخل مربعات ذات حدود يتراوح حجمها بين 32 و40 بكسل للأيقونات المؤطرة.

يسمح

  • - فوسفور رقيق كإعداد افتراضي
  • - فوسفور عادي داخل مربع ذي حدود
  • - ملف SVG لمرة واحدة في src/components/icons/ في حالة فقدان رمز، مطابق لضربة الفوسفور

أبداً

  • - أوزان ثنائية اللون أو أوزان تعبئة
  • - الرموز التعبيرية كأيقونات
  • - مكتبات أيقونات أخرى (Lucide، Heroicons، Material، Tabler، Font Awesome)
import { House } from '@phosphor-icons/react'

<House size={20} weight="thin" />

عناصر

يرث كل مكون مقياس الرمز المميز. لا يوجد نصف قطر للحدود إلا إذا تطلب التصميم عنصرًا مؤطرًا. تعمل الانتقالات على شكل منحنى بيزير مكعب (0.22، 1، 0.36، 1) بمعدل 200 مللي ثانية.

اللون الأساسي - خلفية برتقالية زاهية، ملصق أحادي اللون، توهج عند التمرير.

شبح - شفاف، يتغير لون الحدود إلى dh عند تمرير المؤشر فوقه.

الحواجب والملصقات

الإشارة 01 - الاستقلاليةتم التحديث بتاريخ 21 أبريل 2026

brandGuidelines.components.dotStreamLabel

brandGuidelines.components.dotStreamNote

التباعد والتصميم

شبكة أساسية بعرض 8 بكسل وعرض محتوى أقصى واحد. الأسطح غير مستديرة.

شبكة

8
16
24
32
48
64

قاعدة 8 بكسل. استخدم زيادات من 8، 16، 24، 32، 48، 64، 96.

حاوية

أقصى عرض للصفحة 1200 بكسل. مسافة بادئة أفقية 24 بكسل على الهاتف المحمول، و48 بكسل من الهاتف المتوسط.

نصف قطر الحدود

القيمة الافتراضية هي صفر. مربعات الأيقونات المؤطرة وحقول التحقق من الصحة هي الاستثناءات النادرة.

الأنماط والأسطح

ثلاثة أنماط قابلة للتكرار وتدرج حراري واحد. استخدم نمطًا واحدًا لكل قسم.

شبكة

خطوط بحجم 32 بكسل بشفافية 4% فوق لون الفحم.

نقاط

نقاط شعاعية بحجم 20 بكسل بنسبة شفافية 14% فوق لون الفحم.

حراري

تدرج لوني قطري فريد من نوعه من البرتقالي الفاتح إلى الرمادي الداكن. يُستخدم في اللحظات المميزة، وليس داخل البطاقات.

قمح

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

حركة

الحركة هادفة وليست عشوائية. اكشف الكتل على شريط التمرير، ثم اضغط مطولاً. يُفضّل استخدام خاصية تقليل الحركة.

يكشف

duration 0.9s - ease power3.out

تأثير التباطؤ لمدة 0.9 ثانية، ارتفاع 24 بكسل، عتبة 12%. يتم تنفيذه مرة واحدة لكل عنصر.

مرر المؤشر

duration 200ms - cubic-bezier(0.22, 1, 0.36, 1)

تأثير التسهيل لمدة 200 مللي ثانية باستخدام منحنى بيزير المكعب (0.22، 1، 0.36، 1). ترتفع الأزرار الرئيسية بمقدار 1 بكسل وتتوهج.

انخفاض الحركة

prefers-reduced-motion: reduce

كل شيء يُكشف فوراً. يتوقف الحبوب. يتم تعطيل المصاعد الطائرة.

الصوت والنبرة

اكتب بأسلوبٍ عملي، لا بأسلوبٍ تسويقي. استخدم جملًا قصيرة. استخدم أسماءً محددة. تجنب الكلمات الرنانة.

يفعل

  • - اكتب اسم العلامة التجارية FlytBase. حرف F كبير، حرف B كبير.
  • - استخدم الواصلات العادية فقط.
  • - اكتب عناوين الأخبار بأحرف كبيرة وصغيرة.
  • - حدد النتيجة، وليس الميزة.

لا

  • - استخدم الشرطات الطويلة أو الشرطات المتوسطة.
  • - استخدم الرموز التعبيرية في المنتجات أو التسويق أو البرمجة.
  • - اكتب Flytbase أو flytbase أو FLYTBASE أو FLytbase.
  • - استخدم مصطلحات مثل التآزر، أو الاستفادة، أو التحرر.
  • - تُختتم العناوين الرئيسية والفرعية، أو علامات الحاجب، بنقطة. تُقرأ العناوين كعلامات، وليست جملًا.

قواعد الاستخدام

مرجع سريع لأي شخص يقوم بالشحن تحت العلامة التجارية. القواعد الكاملة موجودة في Docs/AGENTS.md و Docs/DESIGN-SYSTEM.md.

  1. 01

    مكونات الخادم افتراضياً. مكونات العميل مخصصة فقط للحالة، والتأثيرات، ومعالجات الأحداث، أو واجهات برمجة تطبيقات المتصفح.

  2. 02

    تستدعي كل صفحة قابلة للفهرسة الدالة buildAlternates(path, locale) في دالة generateMetadata. لا تُصدر قيمة rel للرابط البديل من محتوى الصفحة.

  3. 03

    تستخدم جميع النصوص الموجهة للمستخدم خاصية useTranslations. يتم تعديل ملف src/messages/en.json يدويًا فقط.

  4. 04

    استورد الروابط، واستخدم التوجيه، واستخدم مسار الملف، وأعد التوجيه من @/i18n/navigation. لا تقم بذلك مطلقًا من next/link أو next/navigation.

  5. 05

    لا يُسمح باستخدام الأنماط المضمنة. لا يُسمح باستخدام وحدات CSS. يُسمح فقط باستخدام أدوات Tailwind وفئات الرموز المميزة.

  6. 06

    لا توجد عمليات تصدير افتراضية خارج ملفات Next.js الخاصة (الصفحة، التخطيط، الخطأ، التحميل، غير موجود).

نص منسق

العناوين، والنص، والعلامات المضمنة كما تظهر في المحتوى الطويل - دراسات الحالة، ومنشورات المدونات، والمستندات.

Heading 1

Heading 2

Heading 3

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Block quotes set a passage apart from the body — used for pulled statements and emphasis within an article.

  1. First ordered item
  2. Second ordered item
  3. Third ordered item
  • First unordered item
  • Second unordered item
  • Third unordered item

Text link

Bold text

Emphasis