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

00 – فئات CSS

يمكن إضافة فئات CSS إلى الكتل الفردية من أجل تخصيص الشكل والمظهر بشكل أكبر. يمكن القيام بذلك عن طريق تحديد كتلة ، وعلى الشريط الجانبي الأيمن ، ضمن قسم "خيارات متقدمة" ، إضافة الفئة (الفئات) إلى حقل "فئة (فئات) CSS إضافية". يمكن إضافة فئات متعددة عن طريق فصلها بمسافة واحدة (أي "example-class-1 example-class-2").

إذا كان أي من الأنماط في دليل الأنماط هذا يتطلب فئة أداة مساعدة ، إضافته في مكان قريب وتصميمه على النحو التالي: مثال-فئة-1

01 – الأيقونات

الشعار الأساسي

يجب تصديرها ك SVGs ولكن إذا كانت هناك حاجة إلى PNG ، فيجب تصديرها بمعدل 2x للحفاظ على جودة الصورة.

فافيكونز

يجب تصديرها ك SVGs ولكن إذا كانت هناك حاجة إلى PNG ، فيجب تصديرها بمعدل 2x للحفاظ على جودة الصورة.

أيقونات صغيرة

تم تصميم هذه الرموز بدقة 24 بكسل بوزن 2.5 بكسل. يجب تصدير هذه فقط كSVGs.

أيقونات كبيرة

تم تصميم هذه الرموز بدقة 80 بكسل بوزن 5 بكسل. يجب تصدير هذه فقط كSVGs.

02 – الألوان

الألوان الأساسية

تم اختيارها لتجسيد جوهر العلامة التجارية ويمكن استخدامها للأزرار وأنماط التمرير وعناصر واجهة المستخدم الأخرى.

أوكتان أورانج
RGB 245 / 126 / 37
#f57e25

أوكتان جولد
RGB 253 / 161 / 0
#fda100

أسود
RGB 36 / 36 / 41
#242429

أبيض
RGB 255 / 255 / 255
#ffffff

الألوان الثانوية

تم اختيارها لدعم جوهر العلامة التجارية ويمكن استخدامها لنسخ النص الأساسي والرموز وعناصر واجهة المستخدم الثانوية الأخرى.

رمادي 1
RGB 74 / 72 / 78
#4a484e

رمادي 2
RGB 117 / 117 / 117
#757575

رمادي 3
RGB 227 / 227 / 227
#e3e3e3

رمادي 4
RGB 244 / 244 / 244
#f4f4f4

حالات التغذية المرتدة

يتم استخدامها لنقل الملاحظات إلى المستخدم (خطأ ، تحذير ، نجاح)

ملاحظات الخطأ
RGB 245 / 56 / 10
#f5380a
خطأ نصي (النص)
bg-error (معلومات أساسية)

ملاحظات تحذيرية
الاستخدامات (أوكتان الذهب)

ملاحظات النجاح
RGB 29 / 171 / 111
#1dab6f
نجاح النص (النص)
bg-النجاح (معلومات أساسية)

03 – الطباعة

خطوط الخط

تشير الخطوط الموضحة أدناه إلى المحارف التي يمكن استخدامها على الموقع. يمكن تنزيل كل من Phonk و Readex Pro هنا.

ريدكس برو – خفيف

ريديكس برو – عادي

ريدكس برو – سيميبولد

ريديكس برو – جريئة

قراءة الخط (افتراضي)

فونك – عادي

فونك الخط

أنماط العناوين

يشار أدناه إلى جميع أحجام الخطوط وارتفاعات الأسطر ومسافات الحروف بالبكسل. يمكن أن تستخدم العناوين أي خط موجود أعلاه حسب الحاجة. (D = سطح المكتب و M = الجوال)

انماطاسم الخطحجم الخط
(د / م)
ارتفاع الخط
(د / م)
تباعد الحروف
(د / م)
فئة CSS
2XL العنوانفونك54 بكسل / 36 بكسل74 بكسل / 36 بكسل2px / 2pxعنوان النص-2xl
عنوان XLفونك36 بكسل / 26 بكسل42 بكسل / 30 بكسل2px / 2pxالنص-العنوان-xl
عنوان كبيرفونك22 بكسل32 بكسل0 بكسلنص-عنوان-LG
عنوانريديكس برو20 بكسل28 بكسل0 بكسلعنوان النص
افتراضيريديكس برو14 بكسل26 بكسل0 بكسلN/A (افتراضي)
عنوان صغيرريديكس برو12 بكسل15 بكسل1 بكسلنص-عنوان-sm
ملاحظة: يستخدم الجدول أعلاه نمط "Stripes". سيتم إخراج النمط "الافتراضي" بحدود حول جميع خلايا الجدول.

04 – حقول الإدخال

حقول النموذج

خانات الاختيار

ازرار

05 – أزرار

الزر الأساسي

الزر الثانوي

زر ثلاثي

زر حبوب منع الحمل

تقسيم

06 – واجهة مستخدم أخرى

الظلال

صور المنتج

بطاقة التنقل

معلومات المدونة

تحميل المكونات

بطاقات المدونة

بطاقات الموقع