Tratamento de cor

Monocromático

Monochromatic

Constrói a composição com variações de uma mesma cor ou com uma escala neutra.

UM TOM. MUITAS FORMAS.Coerência
em cada parte.Explorar a coleção ↗

Exemplo didático · Representação visual do padrão

Quando usar

Criar unidade e deixar forma, espaço e tipografia organizarem a experiência.

Cuidados e acessibilidade

Diferencie estados com texto, ícones e forma, além da luminosidade.

Como reconhecer

Uma família cromática, variação tonal e atenção a contraste e proporção.

Não confunda

Monocromático não significa necessariamente preto e branco.

Exemplo de código

:root {
  --fundo: #f1f5f9;
  --texto: #18263a;
  --destaque: #324f75;
}

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie uma interface no estilo Monocromático (Monochromatic) em português do Brasil. Constrói a composição com variações de uma mesma cor ou com uma escala neutra. Contexto de uso: Criar unidade e deixar forma, espaço e tipografia organizarem a experiência. Estrutura: Uma família cromática, variação tonal e atenção a contraste e proporção. Características visuais: single-hue scale. Requisito: Diferencie estados com texto, ícones e forma, além da luminosidade. Considere também: Monocromático não significa necessariamente preto e branco. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Aprofundar a referência ↗Copiar link deste termo ↗