designrift

أداة رموز الألوان التي بنيناها لأننا احتجناها.

القطاع: أدوات المطورين والتصميم | المنظومة التقنية: ⁨React, TypeScript, CSS, Tailwind, Radix⁩ | الحالة: مُطلق | زوروا designrift

ما الذي يفعله designrift#

اختاروا لوناً. واحصلوا على خصائص CSS مخصصة وكتلة إعداد لـ Tailwind CSS جاهزتين للإنتاج. ويتولّد المخرجان آنياً وأنتم تضبطون لوحة الألوان. ورموز الوضع الفاتح والوضع الداكن تُشحن معاً، ونسب التباين تستوفي معايير WCAG عند كل درجة، والأمر كله يستغرق أقل من 30 ثانية من «أحتاج لوناً أساسياً أزرق رمادياً» إلى ملف تلصقونه في مشروعكم.

designrift مجاني ومفتوح المصدر ولا يحتاج حساباً.

المشكلة التي يعرفها كل مطور واجهات#

اختر لوناً، واستنبط مقياس الدرجات، واكتب خصائص CSS المخصصة، وأوصلها بـ tailwind.config.js، ثم أعد الأمر كله للوضع الداكن. ثم اكتشف أن نسبة التباين عند الدرجة 300 لا تجتاز WCAG AA. وابدأ من جديد.

تتكرر تلك الدورة في كل مشروع: مع كل علامة عميل، ومع كل إعادة تصميم لمنتج، وفي كل مرة يغيّر أحدهم رأيه في اللون الأساسي قبل الإطلاق بأسبوعين. والمملّ في الأمر أنه متطابق في كل مرة. لستم أمام مشكلة جديدة كل مرة، بل تكررون العمل نفسه، وهو معرّض للخطأ بما يكفي ليكتشف الاختبار تناقضاته عادة.

جربنا نسخ لوحات ألوان قائمة وتعديل قيم الست عشري بالحدس، فأنتج ذلك مقياساً اعتباطياً بلا ضمانات وصول. وجربنا مولّدات الألوان العامة، وفيها المشكلة نفسها. ولم نكن يوماً منضبطين بما يكفي لحساب نسب التباين يدوياً من الصفر في كل مشروع. فكتبنا نصاً برمجياً. وصار ذلك النص designrift.

ما الذي بنيناه#

بانِي سمات بصري بمعاينة آنية#

أدخِلوا لوناً أساسياً (ست عشري، أو ⁨RGB, HSL, OKLCH⁩)، واختاروا نوع المقياس، وشاهدوا لوحة الـ 12 درجة كاملة معروضة فوراً. تُظهر المعاينة كل درجة مطبَّقة على عناصر واجهة حقيقية: أزرار، وخلفيات، ونصوص، وحدود. فترون هل تنجح اللوحة قبل أن تكونوا قد لصقتم 200 سطر من CSS في مشروعكم.

ويدعم البانِي الضبط الدقيق عند كل مستوى: درجات الخلفية، وألوان النص، ومعالجات الحدود، وأنصاف أقطار الزوايا، والفجوات، وتوزيع الدرجات. ويتحدث المخرج مع تحريك المؤشرات.

أساس من نظام ألوان Radix#

مقاييس الألوان مبنية على نظام Radix، وهو مقياس من 12 درجة متجانس إدراكياً، لكل درجة فيه دور دلالي محدد. الدرجة 1 خلفية التطبيق. والدرجات من 3 إلى 5 لحالات المكونات التفاعلية. والدرجتان 6 و7 للحدود. والدرجتان 11 و12 للنص عالي التباين.

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

ويُشحن designrift مع أكثر من 30 لوحة ألوان من Radix (⁨gray, slate, sage, olive, sand, gold, bronze, tomato, red, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky⁩ وغيرها) إضافة إلى نظيراتها في الوضع الداكن.

تصدير متغيرات CSS وإعداد Tailwind#

تُصدَّر كل لوحة بصيغتين:

خصائص CSS مخصصة: ملفات متغيرات نظيفة وموثَّقة بتعليقات، تتبع تسمية ⁨--color-[name]-[step]⁩. ألقوها في ورقة أنماط عامة أو وحدة CSS.

إعداد Tailwind CSS: إما كائن JavaScript بأسلوب v3 لملف tailwind.config.js، أو كتلة ⁨@theme⁩ بأسلوب v4 للإعداد الذي يبدأ من CSS. فقد انتقل Tailwind v4، الصادر في 2025، إلى الإعداد الذي يبدأ من CSS عبر توجيهات ⁨@theme⁩، وجعل خصائص CSS المخصصة الطريقة الأصلية لتوسيع نظام التصميم. وdesignrift يدعم الصيغتين.

وتشمل صيغ التصدير الإضافية JSON لمسارات رموز التصميم، والقيم الخام للاستخدام في أي سياق آخر.

أكثر من 24 سمة جاهزة#

للمطورين الذين يريدون نقطة انطلاق، في designrift أكثر من 24 سمة جاهزة منسّقة: ⁨Modern Minimal, Amethyst Haze, Catppuccin, Kodama Grove, Quantum Rose, Elegant Luxury⁩ وغيرها. وكل سمة كاملة: درجات المقياس الـ 12 كلها، ورموز الوضع الداكن، والإسنادات الدلالية. خصصوا منها أو صدّروها كما هي.

امتثال WCAG مدمج#

يُظهر كل تركيب درجات نسبة تباينه ومستوى امتثاله لـ WCAG (AA أو AAA أو راسب). فترون أي الدرجات تصلح لأي أدوار الواجهة قبل أن تغادر الرموز الأداة. ويعني أساس Radix أن معظم التركيبات تجتاز أصلاً، لكن فاحص التباين يجعل غير المجتازة ظاهرة.

صيغ المخرجات#

تعمل السمات المصدَّرة مع ⁨React, Vue, Angular, Svelte⁩ أو مع HTML وCSS الصرفين. فخصائص CSS المخصصة كونية، وإعداد Tailwind يستهدف Tailwind تحديداً، وتصدير JSON يعمل مع أي مسار رموز تصميم، بما فيه إضافات Figma لتسليم المصممين.

النتائج#

designrift يعمل على designrift.dev، مجاناً ومفتوح المصدر وبلا حساب. ويُشحن مع أكثر من 30 لوحة ألوان من Radix، وأكثر من 24 سمة جاهزة، وتصدير لـ Tailwind v3 وv4، وامتثال تلقائي لتباين WCAG.

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

أتحتاجون أدوات لأنظمة التصميم أو هندسة واجهات؟ اطّلعوا على خدمات تصميم تجربة المستخدم وواجهته أو احجزوا تدقيق أتمتة مجاني.