Opium.Fill - padronização do esquema de cores através dos olhos do programador

Índice

1. Que problemas resolvemos
2. Ideologia Opium.Fill
3. Suposições básicas
4. Bloco nº 1. Cores pai
5. Bloco No. 2. Substituição
6. Bloco No. 3. Turnos
7. Inversão de cores
8. Usando
9. Quando não faz sentido usar
10. Crítica
11. Conclusão

1. Que problemas resolvemos?

1.1 50 tons de cinza

1.2 Designer brinca com flores

1.3 Temas noturnos e design de marca

2. A ideologia do ópio.

2.1 Não incomode o designer para trabalhar

2.2 Definir cores "a olho"

2.3 Não desanime se nem tudo acontecer

3. Premissas básicas

3.1 Para cada cor - um par

3.2 Divida cores por funcionalidade

3.3 Três blocos

4. Número do bloco 1. Cores dos pais

4.1 Nomes

Base

Desmaiar

Sotaque

Complemento

Crítico

Atenção

Sucesso

4.2 Famílias de cores

5. Bloco No. 2. Substituição

5.1 Contexto

Nota. Só podemos substituir cores em elementos de design primitivos. Esse conjunto é obtido quase 1: 1 dos editores gráficos usados ​​pelos designers. Lá, você pode desenhar um retângulo (plano de fundo), adicionar um bloco de texto, desenhar uma linha ou adicionar uma forma incomum, como um asterisco (leia o ícone).

5.2 Chique

6. Número do bloco 3. Turnos

7. Inversão de cores

Nota. Não há necessidade de confundir inversão e tema noturno. O tema noturno tem muitas de suas nuances em cores. Portanto, é melhor criar uma tabela separada para ela.

8. Use

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 Esquema de cores em Figma

9. Quando não faz sentido usar o sistema

9.1 Projeto de design incomum

9.2 Projeto pequeno

9.3 Você já está usando outra coisa

10. Crítica

10.1 Ainda existem muitas variáveis

10.2 Para preencher os gráficos, você precisa expandir bastante a tabela.

10.3 Por que adicionar substituições se, em teoria, todas as necessidades podem ser cobertas por turnos?

1. Manipulação de Eventos (como Haver ou Click)
2. Quando você precisa de um espectro extra de tons de cinza

Conclusão

obrigado