Opium.Fill - Standardisierung des Farbschemas mit den Augen des Programmierers

Inhaltsverzeichnis

1. Welche Probleme lösen wir?
2. Ideologie Opium.Fill
3. Grundannahmen
4. Block Nr. 1. Übergeordnete Farben
5. Block Nr. 2. Substitution
6. Block Nr. 3. Schichten
7. Farbinversion
8. Verwenden von
9. Wenn es keinen Sinn macht, es zu benutzen
10. Kritik
11. Fazit

1. Welche Probleme lösen wir?

1.1. 50 Graustufen

1.2. Designer spielt mit Blumen

1.3. Nächtliche Themen und Branding-Design

2. Die Ideologie von Opium.Fill

2.1. Stören Sie den Designer nicht an der Arbeit

2.2. Definieren Sie Farben "per Auge"

2.3. Lassen Sie sich nicht entmutigen, wenn sich nicht alles herausstellt

3. Grundannahmen

3.1. Zu jeder Farbe - ein Paar

3.2. Teilen Sie Farben durch Funktionalität

3.3. Drei Blöcke

4. Blocknummer 1. Übergeordnete Farben

4.1. Namen

Base

Ohnmacht

Akzent

Ergänzen

Kritisch

Warnung

Erfolg

4.2. Farbfamilien

5. Block Nr. 2. Substitution

5.1. Kontext

Hinweis. Wir können Farben nur in primitiven Designelementen ersetzen. Dieses Set stammt fast 1: 1 aus den von Designern verwendeten Grafikeditoren. Dort können Sie ein Rechteck (Hintergrund) zeichnen, einen Textblock hinzufügen, eine Linie zeichnen oder eine ungewöhnliche Form hinzufügen, z. B. ein Sternchen (lesen Sie das Symbol).

5.2. Schick

6. Blocknummer 3. Schichten

7. Farbinversion

Hinweis. Keine Notwendigkeit, Inversion und Nachtthema zu verwechseln. Das Nachtthema hat viele seiner Farbnuancen. Es ist daher besser, eine separate Tabelle dafür zu erstellen.

8. Verwenden Sie

8.1. CSS, reagieren

: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. Farbschema in Figma

9. Wenn es keinen Sinn macht, das System zu verwenden

9.1. Ungewöhnliches Designprojekt

9.2. Kleines Projekt

9.3. Sie verwenden bereits etwas anderes

10. Kritik

10.1. Es gibt noch viele Variablen

10.2. Um die Diagramme zu füllen, müssen Sie die Tabelle stark erweitern.

10.3. Warum Substitutionen hinzufügen, wenn theoretisch alle Bedürfnisse durch Verschiebungen abgedeckt werden können?

1. Ereignisbehandlung (z. B. Haver oder Click)
2. Wenn Sie ein zusätzliches Spektrum an Graustufen benötigen

Fazit

Danke