نظام التصميم العام
نظام الأزرار
أساسي، إطار، شفاف، الأحجام، وحالات التعطيل.
مكتمل
ثلاث صيغ دلالية. حجمان. صفر استثناءات. الأزرار واعية بالحالة — الشكل البصري يطابق الوزن التجاري للفعل.
الصيغ
- .btn-hero
- الـ CTA الأساسي. برتقالي ممتلئ. محجوز للفعل الأهم في السطح (Apply, Submit, Subscribe). كحدّ أقصى واحد لكل كتلة مرئية.
- .btn-outline
- CTA ثانوي. حدّ بنفسجي 1px، خلفية شفافة، نص بنفسجي. View, Read more, See details.
- .btn-default
- فعل أداة محايد. حدّ border-border بـ 1px، خلفية الكرت. للفلاتر، "اعرض المزيد"، الأفعال غير التجارية بين السطور.
الأحجام
- .btn-md (افتراضي)
- 40-44px ارتفاعاً. استخدمه في كل مكان إلا إذا كان لديك سبب محدّد للأصغر.
- .btn-sm
- 32-36px ارتفاعاً. داخل الكروت، شرائط الفلاتر، والشبكات الضيّقة.
- .btn-lg
- 52px ارتفاعاً. محجوز لـ hero CTAs فقط. اثنان كحدّ أقصى لكل صفحة.
أنماط أزرار ممنوعة
- لا أزرار خضراء / زرقاء / حمراء. الحالة تُنقَل بالشارات، لا بلون الزر.
- لا ظلال 3D، ولا highlight inset، ولا glassmorphism.
- لا أزرار بتدرّجات لونية خارج صيغة بانر الراعي المعتمدة صراحةً.
- لا أزرار rounded-full pill في الـ chrome التحريري (محجوزة لشارات الفلاتر والشارات).
