Opium.Fill - توحيد نظام الألوان من خلال عيون المبرمج

جدول المحتويات

1. ما هي المشاكل التي نحلها
2. إيديولوجيا الأفيون
3. الافتراضات الأساسية
4. القالب رقم 1. ألوان الوالدين
5. الكتلة رقم 2. الاستبدال
6. قطعة رقم 3. التحولات
7. انعكاس اللون
8. باستخدام
9. عندما لا يكون هناك أي معنى للاستخدام
10. نقد
11. استنتاج

1. ما هي المشاكل التي نحلها؟

1.1. 50 ظلال من الرمادي

1.2. يلعب المصمم بالورود

1.3. الموضوعات الليلية وتصميم العلامات التجارية

2. أيديولوجية الأفيون

2.1. لا تزعج المصمم للعمل

2.2. تحديد الألوان "بالعين"

2.3. لا تثبط عزيمتك إذا لم يتضح كل شيء

3. الافتراضات الأساسية

3.1. لكل لون - زوج

3.2. اقسم الألوان حسب الوظيفة

3.3. ثلاث كتل

4. كتلة رقم 1. ألوان الوالدين

4.1. الأسماء

يتمركز

اغمى عليه

اللهجة

تكملة

حرج

تحذير

نجاح

4.2. عائلات الألوان

5. الكتلة رقم 2. الاستبدال

5.1. سياق الكلام

ملحوظة. يمكننا استبدال الألوان فقط في عناصر التصميم البدائية. يتم أخذ هذه المجموعة تقريبًا 1: 1 من محرري الرسوم البيانية الذين يستخدمهم المصممون. هناك يمكنك رسم مستطيل (خلفية) أو إضافة كتلة نص أو رسم خط أو إضافة شكل غير عادي ، مثل علامة النجمة (اقرأ الرمز).

5.2. مولع ب

6. كتلة رقم 3. التحولات

7. انعكاس اللون

ملحوظة. لا حاجة للخلط بين الانقلاب والموضوع الليلي. السمة الليلية لها العديد من الفروق الدقيقة في اللون. لذا من الأفضل إنشاء جدول منفصل له.

8. استخدم

8.1. CSS ، رد فعل

:root {
  /*   */

  --base-strong: #000;
  --base-weak: #fff;

  --faint-strong: #8994A6;
  --faint-weak: #F6F8FB;

  --accent-strong: #0070FF;
  --accent-weak: #EBF4FF;

  --complement-strong: #8889E2;
  --complement-weak: #EEECFD;

  --critic-strong: #F74545;
  --critic-weak: #FDEDED;

  --warning-strong: #F8AE4F;
  --warning-weak: #FCEBCF;

  --success-strong: #27AE60;
  --success-weak: #DEF8E9;

  /* C   */
  --faint-strong-down: #A5ADBB;
  --faint-weak-up: #ECEEF5;
}

/*  */
/*      */

.back {
  --faint-weak: rgba(255, 255, 255, 0.15);
}

.text {
  --faint-weak: rgba(237, 241, 247, 0.5);
}

.line {
  --faint-strong: #EDEFF2;
}

.icon {}

.fancy {
  --accent-strong: linear-gradient(132deg, #3F89EE, #5447FF);

  /*  */
  --accent-strong-down: linear-gradient(132deg, #448FF3, #594CFF);
}


/*   */

.button {
  background: var(--accent-strong);
  color: var(--base-weak);
  /*    */
}

.button:hover {
  background: var(--accent-strong-down);
}

<button class="fancy button">
  <div class="text">
    Hello Button
  </div>
</button>

class Button extends React.Component {
  render() {
    return (
      <Box fill="accentStrong" fancy className="button">
        <Font fill="baseWeak">Hello Button</Font>
      </Box>
    )
  }
}

//   
class Button extends React.Component {
  render() {
    return (
      <Box.Accent fancy className="button">
        <Font>Hello Button</Font>
      </Box.Accent>
    )
  }
}

// Box  Font —    ,     

//        Strong  Weak (      )
//       
//      

//    ,   
// ,    
//     ,     Opium.Fill
//       

//   'button'     
//      

{
  "color": {
    "parents": {
      "baseStrong": "#000",
      "baseWeak": "#fff",

      "faintStrong": {
        "default": "#8994A6",
        "shiftDown": "#A5ADBB"
      },
      "faintWeak": {
        "default": "#F6F8FB",
        "shiftUp": "#EDEFF2"
      },

      "accentStrong": "#0070FF",
      "accentWeak": "#EBF4FF",

      "complementStrong": "#8889E2",
      "complementWeak": "#EEECFD",

      "criticStrong": "#F74545",
      "criticWeak": "#FDEDED",

      "warningStrong": "#F8AE4F",
      "warningWeak": "#FCEBCF",

      "successStrong": "#27AE60",
      "successWeak": "#DEF8E9"
    },

    "context": {
      "back": {
        "faintWeak": "rgba(255, 255, 255, 0.15)"
      },

      "text": {
        "faintWeak": "rgba(237, 241, 247, 0.5)"
      },

      "line": {
        "faintStrong": "#EDEFF2"
      },

      "icon": {},

      "fancy": {
        "accentStrong": {
          "default": "linear-gradient(132deg, #3F89EE, #5447FF)",
          "shiftDown": "linear-gradient(132deg, #448FF3, #594CFF)"
        }
      }
    }
  }
}

8.2. مخطط الألوان في Figma

9. عندما لا يكون من المنطقي استخدام النظام

9.1. مشروع تصميم غير عادي

9.2. مشروع صغير

9.3. أنت تستخدم بالفعل شيئًا آخر

10. النقد

10.1. لا يزال هناك الكثير من المتغيرات

10.2. لملء الرسوم البيانية ، عليك توسيع الجدول بشكل كبير.

10.3. لماذا تضاف البدائل إذا كان من الممكن نظرياً تغطية جميع الاحتياجات بالتحولات؟

1. معالجة الأحداث (مثل Haver أو Click)
2. عندما تحتاج إلى مجموعة إضافية من ظلال الرمادي

استنتاج

شكرا