Opium.Fill - standardisation de la palette de couleurs à travers les yeux du programmeur

Table des matières

1. Quels problèmes résolvons-nous
2. Idéologie Opium.Fill
3. Hypothèses de base
4. Bloc n ° 1. Couleurs parentales
5. Bloc n ° 2. Substitution
6. Bloc n ° 3. Quartiers
7. Inversion de couleur
8. En utilisant
9. Quand cela n'a aucun sens d'utiliser
10. Critique
11. Conclusion

1. Quels problèmes résolvons-nous?

1.1. 50 nuances de Grey

1.2. Le créateur joue avec les fleurs

1.3. Thèmes nocturnes et design de marque

2. L'idéologie de l'opium. Remplir

2.1. Ne dérangez pas le designer de travailler

2.2. Définissez les couleurs "à l'oeil"

2.3. Ne vous découragez pas si tout ne se passe pas

3. Hypothèses de base

3.1. Pour chaque couleur - une paire

3.2. Divisez les couleurs par fonctionnalité

3.3. Trois blocs

4. Numéro de bloc 1. Couleurs des parents

4.1. Noms

Base

Perdre connaissance

Accent

Complément

Critique

Attention

Succès

4.2. Familles de couleurs

5. Bloc n ° 2. Remplacement

5.1. Le contexte

Remarque. Nous ne pouvons remplacer les couleurs que dans les éléments de conception primitifs. Cet ensemble est pris près de 1: 1 des éditeurs graphiques utilisés par les designers. Là, vous pouvez dessiner un rectangle (arrière-plan), ajouter un bloc de texte, tracer une ligne ou ajouter une forme inhabituelle, comme un astérisque (lire l'icône).

5.2. Fantaisie

6. Numéro de bloc 3. Quart de travail

7. Inversion des couleurs

Remarque. Pas besoin de confondre inversion et thème nocturne. Le thème de la nuit a beaucoup de ses nuances de couleur. Il est donc préférable de créer un tableau séparé pour celui-ci.

8. Utilisation

8.1. CSS, React

: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. Jeu de couleurs dans Figma

9. Quand cela n'a aucun sens d'utiliser le système

9.1. Projet de conception inhabituel

9.2. Petit projet

9.3. Vous utilisez déjà autre chose

10. Critique

10.1. Il y a encore beaucoup de variables

10.2. Pour remplir les graphiques, vous devez agrandir considérablement le tableau.

10.3. Pourquoi ajouter des substitutions si en théorie tous les besoins peuvent être couverts par des quarts?

1. Gestion des événements (comme un Haver ou un clic)
2. Lorsque vous avez besoin d'un spectre supplémentaire de nuances de gris

Conclusion

remercier