أنظمة تصميم SaaS
أنظمة تصميم مستخرجة من مواقع البرمجيات و SaaS: تطبيقات الإنتاجية، وأدوات إدارة المشاريع، وأنظمة إدارة علاقات العملاء (CRM)، وغيرها من المنتجات المقدّمة كخدمة. يجمع معظمها بين لوحة ألوان هادئة ولون تمييز واحد وسلّم خطوط واضح، ما يجعلها نقطة بداية جيدة للوحة تحكم أو لصفحة تسويقية لمنتج.
3 أمثلة على DESIGN.md في هذه الفئة، من Figma، Linear و Notion. مستخرجة من الصفحات العامة لكل موقع، وليست إرشادات رسمية للعلامة التجارية. جديد على هذا التنسيق؟ اقرأ ما هو ملف DESIGN.md.
Figma
ملخص أسلوب تصميم موقع Figma التسويقي: يعتمد الموقع نظامًا أحادي اللون صارمًا بالأبيض والأسود، ويرتكز على خط figmaSans المتغير الخاص بالشركة. التصميم موجّه أساسًا بالطباعة، إذ تأتي العناوين الكبيرة بحجم 88px/56px مع تباعد سلبي ضيّق بين الأحرف، في تباين مع نص أساسي خفيف الوزن بقيمة 330. تستخدم أزرار الدعوة إلى الإجراء أشكال حبوب كاملة الاستدارة (border-radius: 9999px) بخلفية سوداء صلبة ونص أبيض. التخطيط قائم على الشبكة بعرض أقصى للمحتوى يبلغ 1440px، مع حشو رأسي سخي للأقسام يبلغ 80px، وخلفية بيضاء نظيفة. العمق محدود جدًا، والظلال خفيفة وقائمة على طبقات oklch. ويظهر لون بنفسجي لافندري مميز #cb9fd2 في شريط الذيل. الأسلوب العام واثق ومتطور طباعيًا ويركز على الهوية.
Linear
نظام تصميم Linear يعتمد بالدرجة الأولى على الوضع الداكن، وهو واجهة منتج عالية الكثافة مصممة لفرق الهندسة. تقوم لوحة الألوان للأسطح على أسود قريب من الأسود مثل #08090a و#0f1011، مع تدرجات متراكبة من الرمادي الداكن لتمييز الشريط الجانبي والبطاقات واللوحات. تعتمد الخطوط حصراً على Inter Variable مع تباعد أحرف سالب دقيق في الأحجام الكبيرة، وعلى Berkeley Mono للشيفرة المضمنة. أما لغة الزوايا فصغيرة عن قصد، إذ تتراوح غالباً بين 2 و6 بكسل، وتُخصص الأشكال البيضاوية الكاملة للشارات ورقائق الحالة. ويُعبَّر عن الارتفاع بحدود داخلية رفيعة بسمك 1 بكسل وبظلال خفيفة منخفضة الشفافية، لا بطبقات حادة الظهور. ويظهر اللون الأساسي للدعوة إلى الإجراء، وهو النيلي المميز لـ Linear #5e6ad2، في زر التسجيل وفي الروابط الرئيسية.
Notion
تعتمد الصفحة الرئيسية التسويقية لموقع Notion على قسم بطل بلون كحلي عميق (#02093a) مع جسم صفحة فاتح (#f6f5f4)، وتستخدم خطًا مخصصًا (NotionInter) في جميع أنواع النصوص. يعتمد التصميم على شبكة من 12 عمودًا بفواصل 28px، ولغة مزدوجة لأنصاف الأقطار: 8px للبطاقات و9999px للشرائح الدائرية. كما يعتمد نظام ظلال متعدد الطبقات ومتدرج للعناصر العائمة في الواجهة. يقود الأزرق المميز للعلامة (#2537b1) أزرار الدعوة لاتخاذ إجراء والعناصر المميزة، بينما تنظم سلّم درجات الرمادي الدلالية (من gray-200 إلى gray-900) التسلسل الهرمي لجميع النصوص والأسطح.
لا تجد الموقع الذي تحتاج إليه؟
الصق أي رابط لتحصل على ملف DESIGN.md من أي موقع ويب. الألوان والخطوط والمسافات والرموز، جاهزة لسير عملك مع الذكاء الاصطناعي.