نظام التصميم ثنائي الحرارة: الجسر بين الهوية والبرمجة

فخ الاتساق المفرط

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

لحل هذه المعضلة، ابتكرت نوفكسيا نظام التصميم ثنائي الحرارة بناءً على تقسيم بسيط ومنطقي:

الدافئ يمثل هويتنا ومن نحن. البارد يمثل ما نبنيه وكيف نعمل.

قواعد الفصل الممنهجة

لا ينجح هذا النظام المزدوج إلا إذا كانت الحدود واضحة وقابلة للتنبؤ:

1. المسار الدافئ (الإنسان والقصة): يُستخدم لصفحات التعريف بالشركة، التوظيف، فريق العمل، وأطروحة المستثمرين. يعتمد على خطوط كلاسيكية دافئة (Fraunces)، وتنسيق مسطح بسيط، ومساحات وهوامش مريحة، وألوان ترابية (الكريمي، الصلصالي، والبني الداكن).
2. المسار البارد (الهندسة والأدوات - الافتراضي): يُستخدم للخدمات، المنتجات، المطورين، ودراسات الحالة. يعتمد على خطوط هندسية دقيقة (Geist/Inter)، وشبكات تقنية متقاربة، وظلال خفيفة، ولون إلكتروني مشع للتنبيهات (التركواز 1FB6B0).

التنفيذ البرمجي عبر متغيرات CSS

من الناحية الفنية، نقوم بإدارة هذين المسارين باستخدام ملف أنماط موحد ومتغيرات على مستوى الحاويات. أي عنصر يعلن عن درجة حرارة معينة يقوم تلقائياً باستبدال متغيرات الألوان الخاصة به:

:root {
  /* الإعدادات الباردة الافتراضية */
  --bg: #0E0F11;
  --text: #ECEEF1;
  --accent: #1FB6B0;
}

[data-temp="warm"] {
  /* التعديلات الدافئة */
  --bg: #F4F2ED;
  --text: #3A2E28;
  --accent: #3A2E28;
}

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