ناردو فاتح
Light Nardo#F4F4F1الخلفية الرئيسية والمساحات الهادئة
هوية دوبامين الرقمية.
هوية هادئة بطابع طبيعي، تربط الموقع بالتغليف المعتمد. الناردو يترك مساحة للتنفّس، والفرشاة تجمع الأخضر والأزرق، والرمادي يحافظ على وضوح الشعار والكلمة.
الألوان الأساسية
قيم HEX ثابتة للاستخدام الرقمي، مستخلصة من الصور المعتمدة. درجات الفرشاة الفاتحة للخلفيات والتفاصيل، والرمادي للنصوص. درجة الأخضر الداكن مخصّصة للأزرار الواضحة.
رمادي الشعار
Graphite#454B4Bالشعار والعناوين والنص الأساسي
أخضر هادئ
Soft Sage#A8B798اللون الأساسي في الفرشاة والمساحات المميزة
فستقي فاتح
Pale Pistachio#C3CDB3تفاصيل الفرشاة والخلفيات المساندة
أزرق بودري
Powder Blue#B6CDD6اللون الثانوي والمساحات الهادئة
زيتوني
Muted Olive#939A75تفاصيل الفرشاة والزخرفة
رمادي مزرق
Blue Slate#748791تفاصيل الهوية والحدود البصرية
الشعار والخطوط
نحافظ على رسم شعار دوبامين الأصلي والقلب والخط المتصل، مع معالجة بالرمادي. لا يُعاد كتابة الشعار بخط بديل.
لذّة تُشبهك. وتوازن يليق بك.
خط Aref Ruqaa للعناوين، وAmiri للنص العربي.
A little pleasure. A lovely balance.
Antic Didone للعناوين الإنجليزية. تبقى النماذج والطلبات بخط واضح وسهل القراءة.
الاسم · رقم الهاتف · موعد الاستلام
أزرار وحالات واضحة
لكل لحظة، حلاها.
اللون الداكن يوجّه للفعل، والفاتح يعطي مساحة للمحتوى.
بانتظار التأكيدقيد التجهيزجاهزملغي
Action #435342 · Hover #344334حالة الطلب تُكتب بالكلمات دائمًا؛ اللون يساعدها ولا يحل محلها.
بصمة الفرشاة
نفس الفرشاة الأفقية المعتمدة، بحواف غير منتظمة ومساحات بيضاء بين الألوان.
المكان: حواف الأقسام ونهاية الصفحة، مع مساحة واضحة للشعار والمحتوى.
الهدوء: المساحات الفاتحة هي الأساس. لا نكرر الفرشاة داخل كل بطاقة أو حقل.
الوضوح: النصوص على خلفيات سادة، والألوان الفاتحة للتفاصيل والمساحات.
الاتجاه: العربية من اليمين لليسار، والإنجليزية والأكواد والروابط من اليسار لليمين.
تحميل خلفية الهوية
الأكواد الجاهزة
ملف CSS الكامل يحتوي ألوان الخلفيات والنصوص والأزرار والحدود والتركيز وحالات الطلبات. ملف JSON يسهّل استخدام نفس القيم في أي واجهة لاحقًا.
النص الأساسي8.07:1
النص المساند5.17:1
زر أساسي8.22:1
مرور المؤشر10.51:1
حلقة التركيز6.84:1
حدود الحقول3.3:1
:root {
--brand-nardo: #F4F4F1;
--brand-graphite: #454B4B;
--brand-sage: #A8B798;
--brand-pistachio: #C3CDB3;
--brand-powder-blue: #B6CDD6;
--brand-olive: #939A75;
--brand-slate: #748791;
--action: #435342;
--action-hover: #344334;
--focus: #465E6A;
}