اللون هو أداة التواصل البصرية الأكثر أهمية لدينا. نستخدمه لتعزيز الفهم، لنقل الوظيفة وتوجيه الانتباه.
رموز
علامة
الخلفية
لهجة
نحن نحدد لوحة الألوان الخاصة بنا كرموز تصميم، تتكون من رموز أساسية، تصف ببساطة اللون، مثل blue-500، ورموز مُطبقة، يتم تطبيقها 'دلالياً' لغرض محدد، مثل background-primary.
يعطيه هذا النهج مرونة أكبر بكثير للتحكم في حالات الاستخدام المحددة والمواضيع مثل وضع الضوء ووضع الظلام. على سبيل المثال، فإن تسمية لون ببساطة بالأبيض تسبب صراعات، لأن الأبيض هو لون الخلفية في وضع الضوء ولون التسمية في وضع الظلام.
نحن حالياً نقوم بتحويل أنماطنا باستخدام Tokens Studio، والذي يتولى الروابط المرجعية بين الرموز المطبقة والرموز الأساسية. يمكنك مشاهدة الكود أدناه لرموزنا light/label، وكيف تشير إلى قيمة الرمز الأساسي مثل {core.neutral.800}
نحن قادرون على تغيير أي رمز هنا، وندفعه عبر جميع ملفات Figma الخاصة بنا، وندفعه إلى Github حيث يمكن للمطور قبول التغيير عبر جميع منتجاتنا المشفرة.
هذا يعني أيضًا أن تصميم السمات الدلالية (الوضع الفاتح → الوضع الداكن) يتم التعامل معه بشكل افتراضي، وأن ملفات التصميم متوافقة بدقة مع كيفية تنفيذها في الشيفرة.
إن إعداد ألوان المنتجات بشكل فعال له تأثير كبير، لكن الطريقة التي نستخدم بها هذه الألوان تؤثر بشكل كبير على ما إذا كانت قيم علامتنا التجارية تُشعر بها المستخدم كما هو مقصود.
الألوان لها وظيفة
تصميم المنتج ليس تصميمًا جرافيكيًا - تطبيقنا ليس ملصقًا. من الضروري أن نستخدم الألوان فقط لمساعدة الفهم، وإلا فإننا نخاطر بإرباك المستخدم بشأن وظيفة عناصر واجهة المستخدم.
يمكن أن يكون موقعنا الإلكتروني ومواد التسويق مكانًا للتجربة الأوسع في الألوان، لكن أي منتجات تستخدم كأدوات لإنجاز مهمة معينة هي وظيفية بحتة.
دائمًا متاح
نحن نلتزم بمعايير الألوان الخاصة بنا وفقًا لتصنيف WAG AA أو أعلى. يتم اختبار نسب التباين بحيث تعكس تصميماتنا قيم علامتنا التجارية من الوضوح والشمولية – بحيث تبدو التجربة وكأنها نسيم لأي مستخدم.