المشكلة
فريق التطبيق يضيف شاشات جديدة كل شهر، وكل مصمم ومبرمج يختار الألوان والمقاسات بنفسه، فتختلف الأزرار من شاشة لأخرى ويضيع الوضع الغامق ويظهر لون التحذير في غير مكانه. والتطبيق يتعامل مع أموال الناس، فأي غموض في رقم أو رسوم أو تنبيه مخاطرة يهز الثقة.
ما عملناه
بنينا ملف تصميم كاملاً بطريقة Figma من عشر لوحات، كل مكوّن فيه مرسوم من الكود نفسه لا من صور. وضعنا معمارية توكنز من طبقتين: قيم أولية، وأدوار دلالية تشير إليها بوضعين فاتح وغامق، مع خطوط الإحالة مرسومة بين كل دور وقيمته، وصدّرناها في ملف tokens.json بصيغة DTCG. صممنا طباعة الأرقام المالية (الرصيد بخط Fraunces وعلامة الجنيه بنسبة 60% والبنسات بلون ثانوي، وأرقام الكشف بعرض ثابت، وعلامة الناقص الصحيحة)، ومصفوفة الأزرار بثلاثة أنواع في ست حالات، وحقول المبلغ والنص، وبطاقة الهدف وصف المعاملة ولوحة الأرقام وشريط المحفظة وتنبيه المخاطرة. ثم حالات الفراغ والتحميل وانقطاع الاتصال وفشل التحويل والنجاح، ومسار المستخدم من أول تقريب إلى إضافة 50 جنيهاً لحساب ISA في ست شاشات بأسهم مكتوب عليها سبب كل انتقال، وشاشة رئيسية بالمقاسات وأسماء التوكنز، ولوحة إتاحة بنسب التباين المحسوبة ومقاسات اللمس 44 بكسل والوضع الغامق المأخوذ بتبديل الوضع لا بإعادة التلوين. والبناء نفسه يتوقف لو نزل أي زوج نص عن 4.5:1.
