ओपियम.फिल - प्रोग्रामर की आंखों के माध्यम से रंग योजना का मानकीकरण

विषय - सूची

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। सीएसएस, प्रतिक्रिया

: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। अंजीर में रंग योजना

9. जब यह प्रणाली का उपयोग करने के लिए कोई मतलब नहीं है

9.1। असामान्य डिजाइन परियोजना

9.2। छोटा प्रोजेक्ट

9.3। आप पहले से ही कुछ और उपयोग कर रहे हैं

10. आलोचना

10.1। अभी भी बहुत सारे चर हैं

10.2। रेखांकन भरने के लिए, आपको तालिका का विस्तार करना होगा।

10.3। क्यों प्रतिस्थापन जोड़ें यदि सिद्धांत में सभी आवश्यकताओं को पारियों द्वारा कवर किया जा सकता है?

1. ईवेंट हैंडलिंग (जैसे हैवर या क्लिक करें)
2. जब आपको ग्रे के रंगों के एक अतिरिक्त स्पेक्ट्रम की आवश्यकता होती है

निष्कर्ष

धन्यवाद