أنظمة تصميم أدوات المطوّرين
أنظمة تصميم مستخرجة من مواقع أدوات المطوّرين والبنية التحتية: الاستضافة، وقواعد البيانات، وواجهات API، وبيئات التطوير (IDE)، ومنتجات DevOps. يعتمد كثير منها على أسطح داكنة، ولمسات بخط أحادي المسافة، وكتل شيفرة مصمّمة كمكونات أساسية، مع خطوط مُحكمة ذات طابع تقني.
3 أمثلة على DESIGN.md في هذه الفئة، من Neon، Railway و Supabase. مستخرجة من الصفحات العامة لكل موقع، وليست إرشادات رسمية للعلامة التجارية. جديد على هذا التنسيق؟ اقرأ ما هو ملف DESIGN.md.
Neon
نظام تصميم Neon يعتمد الوضع الداكن أولاً، ويقوم على خلفية تكاد تكون سوداء (#000000، #18191b) مع لون أخضر نيوني أساسي (#00e599) ولون أخضر متوسط داعم (#34d59a). يجمع النظام الطباعي بين خط Inter للواجهة والنصوص الأساسية وخط GeistMono للشيفرة والبيانات، مع تباعد أحرف سلبي محكم في الاثنين. يتبع التباعد شبكة أساسها 4 بكسل. نصف قطر الحواف بسيط وموحد عند 4 بكسل. يتحقق العمق عبر تباين الحدود لا عبر الظلال، مع استخدام ظل خفيف محيطي واحد بحذر. يتميز قسم الصورة الرئيسية بخلفية متحركة لتصور البيانات تغطي الشاشة بالكامل، بما يعزز هوية العلامة المرتبطة بقواعد البيانات والبنية التحتية.
Railway
Railway هو نظام تصميم لمنصة مطوّرين يعتمد الوضع الداكن أولاً، ويرتكز على أسطح كحلية شبه سوداء عميقة (#13111c، #0b0b0f)، ونص أبيض مائل إلى الرمادي عالي التباين (#f7f7f8)، ولون تمييز بنفسجي مميز (#853bce / #553f83). تستخدم الواجهة الرئيسية خط IBM Plex Serif لإضفاء ثقل تحريري، فيما يتولى خط Inter كل نصوص الواجهة، وتُستخدم الخطوط JetBrains Mono و SF Mono في سياقات الشيفرة. يتحقق العمق عبر حدود متوهجة داخلية بيضاء (rgba(255,255,255,0.2) بسماكة 1.5px داخلية) بدلاً من الظلال الخارجية، مما يمنح الواجهة طابع الألواح الزجاجية. يعتمد نظام المسافات على مضاعفات الأربعة بإيقاع واضح من 8 و12 و16 و24 و32. وتكون أنصاف أقطار الحواف صغيرة، إذ يسود قياس 4px، مع استخدام انتقائي لقياسي 8px و16px في البطاقات وحاويات الواجهة الرئيسية.
Supabase
Supabase يعتمد على نظام تصميم داكن أولاً، يرتكز على خلفية سوداء عميقة قريبة من الأسود (oklch ~0.19) مع لون تمييز أخضر زاهٍ للعلامة التجارية (#3ecf8e / #3fcf8e). يُبنى التخطيط على شبكة بطاقات ميزات متجاوبة، مع استخدام خط Manrope للعناوين الرئيسية وخط Inter للنصوص الأساسية وعناصر الواجهة. ويتولى خط Source Code Pro جميع السياقات ذات الخطوط الأحادية والشيفرات البرمجية. ونظام الألوان مبني على متغيرات CSS مخصصة بصيغة oklch ذات تسميات دلالية. تستخدم البطاقات زوايا بنصف قطر 12px مع معالجة حدود خفيفة، وتستخدم الأزرار زوايا بنصف قطر بين 6px و8px، وتتسم الكثافة العامة بالاعتدال مع شبكة تباعد أساسية بمقدار 8px.
لا تجد الموقع الذي تحتاج إليه؟
الصق أي رابط لتحصل على ملف DESIGN.md من أي موقع ويب. الألوان والخطوط والمسافات والرموز، جاهزة لسير عملك مع الذكاء الاصطناعي.