Opium.Fill: estandarización del esquema de color a través de los ojos del programador.

Tabla de contenido

1. ¿Qué problemas resolvemos?
2. Ideología Opium.Fill
3. Supuestos básicos
4. Bloque No. 1. Colores principales
5. Bloque No. 2. Sustitución
6. Bloque No. 3. Turnos
7. Inversión de color
8. Utilizando
9. Cuando no tiene sentido usar
10. Crítica
11. Conclusión

1. ¿Qué problemas resolvemos?

1.1. 50 sombras de Grey

1.2. Diseñador juega con flores

1.3. Temas nocturnos y diseño de marca

2. La ideología del opio. Relleno

2.1. No molestes al diseñador para trabajar

2.2. Definir colores "a ojo"

2.3. No se desanime si no todo resulta

3. Suposiciones básicas

3.1. Para cada color: un par

3.2. Divide colores por funcionalidad

3.3. Tres bloques

4. Número de bloque 1. Colores principales

4.1. Nombres

Base

Desmayarse

Acento

Complemento

Crítico

Advertencia

Éxito

4.2. Familias de colores

5. Bloque No. 2. Sustitución

5.1. Contexto

Nota. Podemos sustituir los colores solo en elementos de diseño primitivos. Este conjunto se toma casi 1: 1 de los editores gráficos utilizados por los diseñadores. Allí puede dibujar un rectángulo (fondo), agregar un bloque de texto, dibujar una línea o agregar alguna forma inusual, como un asterisco (lea el icono).

5.2. Lujoso

6. Número de bloque 3. Turnos

7. Inversión de color

Nota. No es necesario confundir inversión y tema nocturno. El tema nocturno tiene muchos de sus matices en color. Por lo tanto, es mejor crear una tabla separada para ello.

8. Uso

8.1. CSS, reaccionar

: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. Esquema de color en Figma

9. Cuando no tiene sentido usar el sistema

9.1. Proyecto de diseño inusual

9.2. Pequeño proyecto

9.3. Ya estás usando otra cosa

10. Críticas

10.1 Todavía hay muchas variables

10.2 Para llenar los gráficos, debe expandir mucho la tabla.

10.3 ¿Por qué agregar sustituciones si en teoría todas las necesidades pueden ser cubiertas por turnos?

1. Manejo de eventos (como Haver o Click)
2. Cuando necesitas un espectro extra de tonos de gris

Conclusión

gracias