Design Duotone

"Contraste marcante. Fotografia e UI reduzidas a exatamente duas cores conflitantes ou complementares."

Quando Usar

Use este subestilo quando a solicitação do usuário corresponder à estética descrita acima. Esta é uma referência filha da habilidade design-it e não deve ser acionada diretamente.

Princípios Fundamentais

1. Apenas Duas Cores: Todo o design é mapeado para uma cor escura (substituindo pretos/sombras) e uma cor clara (substituindo brancos/realces).
2. Imagens Tratadas: Todas as fotos DEVEM ser processadas na paleta duotone.
3. Tipografia Ousada e Plana: O texto é geralmente massivo, sólido e usa uma das duas cores.

DNA Visual

• Cores: Pares de alto contraste. Azul Marinho e Pêssego, Roxo Profundo e Verde Neon, Carmesim e Creme. Veja Industrial Chic para inspiração.
• Tipografia: Fontes sans-serif pesadas e condensadas (por exemplo, League Gothic, Oswald).
• Imagens: Fotografia de alto contraste e granulada funciona melhor quando mapeada para duotone.

Implementação Web

• CSS moderno pode alcançar efeitos duotone em imagens sem Photoshop, usando mix-blend-mode e filtros.
• Exemplo de CSS:

:root {
  --duo-dark: #1E0045; /* Deep Purple */
  --duo-light: #CCFF00; /* Neon Lime */
}

body {
  background-color: var(--duo-dark);
  color: var(--duo-light);
}

/* CSS Duotone Image Effect */
.duotone-container {
  position: relative;
  width: 100%;
  height: 400px;
  background-color: var(--duo-light); /* Base color */
}

.duotone-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Convert image to grayscale, increase contrast */
  filter: grayscale(100%) contrast(1.5); 
  /* Multiply the grayscale image against the light background */
  mix-blend-mode: multiply;
}

.duotone-container::after {
  /* Overlay the dark color using screen/lighten */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--duo-dark);
  mix-blend-mode: screen;
}

.duotone-btn {
  background: var(--duo-light);
  color: var(--duo-dark);
  border: none;
  font-weight: 900;
  text-transform: uppercase;
  padding: 16px 32px;
}

Implementação de Aplicativo

SwiftUI

struct DuotoneImage: View {
    let duoDark = Color(red: 0.12, green: 0.0, blue: 0.27)  // #1E0045
    let duoLight = Color(red: 0.8, green: 1.0, blue: 0.0)   // #CCFF00
    
    var body: some View {
        ZStack {
            // Background base color
            duoLight.ignoresSafeArea()
            
            // Image processing
            Image("sample_photo")
                .resizable()
                .scaledToFill()
                .grayscale(1.0)
                .contrast(1.5)
                .colorMultiply(duoLight) // Multiplies the light color into the grays
            
            // Dark color overlay
            duoDark
                .blendMode(.screen) // Equivalent to CSS screen blend mode
                .allowsHitTesting(false)
        }
        .frame(height: 400)
        .clipped()
    }
}

• O processamento de imagem em tempo real é fácil no SwiftUI.
• Converta para .grayscale(), aumente o .contrast(), e então use camadas .colorMultiply() e .blendMode(.screen) para mapear as duas cores exatamente como no CSS mix-blend-mode.

Flutter

class DuotoneImage extends StatelessWidget {
  final Color duoDark = const Color(0xFF1E0045);
  final Color duoLight = const Color(0xFFCCFF00);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      width: double.infinity,
      color: duoLight,
      child: Stack(
        fit: StackFit.expand,
        children: [
          // 1. Escala de Cinza e Contraste (usando matriz ColorFilter)
          // 2. Multiplicação da Cor Clara
          ColorFiltered(
            colorFilter: ColorFilter.mode(duoLight, BlendMode.multiply),
            child: ColorFiltered(
              // Matriz simples de escala de cinza
              colorFilter: const ColorFilter.matrix([
                0.2126, 0.7152, 0.0722, 0, 0,
                0.2126, 0.7152, 0.0722, 0, 0,
                0.2126, 0.7152, 0.0722, 0, 0,
                0,      0,      0,      1, 0,
              ]),
              child: Image.asset('assets/sample_photo.jpg', fit: BoxFit.cover),
            ),
          ),
          // 3. Sobreposição de Cor Escura em Tela
          ColorFiltered(
            colorFilter: ColorFilter.mode(duoDark, BlendMode.screen),
            child: Container(color: Colors.transparent), // Aplica filtro à pilha abaixo
          ),
        ],
      ),

…