نظام التصميم

هوية حسنات البصرية هادئة وواضحة: زمرّدي على خلفية ورقية دافئة، مع لمسة ذهبية صغيرة، وخط عربي واحد. تستخدمها hasanat.dev وموجزات المشاريع وهذه المنصة.

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

اللون	القيمة	الاستخدام
الزمرّدي	`#047857`	الأزرار والروابط والحالات النشطة
الزمرّدي الداكن	`#064e3b`	تمييز قوي للنص، وحالة الضغط
الذهبي	`#b8860b`	لمسات زخرفية صغيرة فقط، لا للنص
الورقي	`#f7f5ee`	خلفية الصفحة
الحبر	`#16271d`	النص الأساسي

تباين الزمرّدي مع الخلفية الورقية نحو 5:1، والنص الأبيض على الزمرّدي نحو 5.5:1، فهما مناسبان للنص. أما الذهبي على الخلفية الورقية فتباينه نحو 3:1 فقط، فلا تكتب به نصًّا.

ألوان مساندة

من ملف تنسيق الموجزات:

اللون	القيمة	الاستخدام
سطح مرتفع	`#fffefb`	البطاقات والأسطح فوق الخلفية
نعناعي	`#eef4ec`	خلفيات هادئة للأقسام
حبر ثانوي	`#3a5446`	النص الثانوي
خافت	`#526b5e`	الملاحظات والتسميات
ذهبي فاتح	`#f1d58a`	خلفية تمييز ذهبية
خط فاصل	`#dde5da`	الفواصل
خط فاصل أوضح	`#c3d1c5`	الحدود الأوضح

الوضع الداكن

تستخدم هذه المنصة في الوضع الداكن ألوان الوضع الداكن في موقع حسنات السابق:

اللون	القيمة	الاستخدام
الخلفية	`#08110d`	خلفية الصفحة
سطح مرتفع	`#0f1d18`	الشريط العلوي والجانبي
النص الأساسي	`#e8f2ec`	العناوين
النص	`#a7c6b6`	النص الجاري
الزمرّدي	`#10b981`	العناصر النشطة
زمرّدي فاتح	`#8ee0b7`	الروابط
الذهبي	`#e3b341`	اللمسات الزخرفية

الخط

الخط IBM Plex Sans Arabic، برخصة SIL Open Font License، ويغطي الحروف العربية واللاتينية معًا. تستخدم هذه المنصة الأوزان 400 و600 و700.

استضف الخط مع تطبيقك، مثلًا بالحزمة @fontsource/ibm-plex-sans-arabic، بدل تحميله من خدمة خارجية.
اجعل ارتفاع السطر في النص العربي واسعًا: 1.8 في الموجزات، و1.85 في هذه المنصة.
لا تضف تباعدًا بين الحروف في النص العربي، فهو يقطع اتصال الحروف.
لا تستخدم المائل في العربية. الخط لا يحتوي أشكالًا مائلة.

تطبيقها في قالب البداية

ما زال القالب يستخدم لوحة ألوان أقدم (#0f766e)، وخطّي Inter وNoto Sans Arabic من Google Fonts. لتطبيق هوية حسنات:

ثبّت الخط:

npm install @fontsource/ibm-plex-sans-arabic

في أعلى src/styles/global.css، استبدل سطر Google Fonts وقيم @theme:

@import "@fontsource/ibm-plex-sans-arabic/400.css";
@import "@fontsource/ibm-plex-sans-arabic/600.css";
@import "@fontsource/ibm-plex-sans-arabic/700.css";
@import "tailwindcss";

@theme {
  --color-hasanat: #047857;
  --color-hasanat-light: #10b981;
  --color-hasanat-dark: #064e3b;
  --color-gold: #b8860b;
  --color-ink: #16271d;
  --color-surface: #f7f5ee;
  --color-surface-dark: #08110d;
  --font-sans: "IBM Plex Sans Arabic", system-ui, sans-serif;
}

في الطبقة base من الملف نفسه، استبدل text-slate-800 بـ text-ink.

جرّبنا هذه التعديلات على نسخة من القالب، ونجح البناء.

الصنف الجاهز btn-primary في القالب يأخذ الزمرّدي تلقائيًا، لأنه مبني على لون hasanat. أما btn-secondary وcard فمبنيان على ألوان slate والأبيض، فعدّلهما في الملف نفسه إن أردت.

المبادئ

العربية أولًا: الاتجاه من اليمين إلى اليسار هو الأصل. انظر العربية والاتجاه.
الوضوح قبل الزخرفة: فعل أساسي واحد في كل صفحة، ونص قصير واضح.
محتوى حقيقي: صمّم بنصوص المنتج الحقيقية، لا بنص تجريبي. ولا تضع رموزًا تعبيرية (إيموجي) في الواجهة.
إمكانية الوصول: حالات تركيز ظاهرة، وتباين لا يقل عن 4.5:1 للنص العادي، وعمل كامل بلوحة المفاتيح، وتسميات لقارئات الشاشة.
الجوال أولًا: افحص كل صفحة على عرض 360 بكسل، ومع تكبير النص إلى 200%.
الأيقونات: يستخدم القالب lucide-react. أعطِ الأيقونة ذات المعنى اسمًا، وأخفِ الزخرفية عن قارئ الشاشة، واقلب الأسهم الاتجاهية في العربية.
الوضع الداكن اختياري: لا يضيفه القالب افتراضيًا.