Color Blocking

"A grade visível. Grandes áreas sólidas de cores contrastantes definindo o layout."

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. Divisão Geométrica: A área de visualização é dividida em grandes retângulos ou quadrados, cada um preenchido com uma cor sólida e distinta.
2. Sem Margens Entre Blocos: Os blocos tocam-se diretamente, muitas vezes separados apenas por uma linha preta nítida de 1px ou 2px (ou sem linha alguma, deixando as cores chocarem).
3. Tipografia como Textura: O texto é colocado precisamente dentro desses blocos para equilibrar o peso visual das cores.

DNA Visual

• Cores: Combinações altamente contrastantes e ousadas. Use 3 a 4 cores fortes de paletas como Industrial Chic (Vermelho, Preto, Cinza, Branco) ou combinações ousadas personalizadas (Amarelo, Azul Marinho, Rosa).
• Tipografia: Fontes sans-serif muito limpas e ousadas que podem se destacar contra grandes blocos de cor.
• Bordas: Frequentemente usa bordas pretas grossas (2px solid #000) entre os blocos para enfatizar a grade, lembrando as pinturas de Mondrian.

Implementação Web

• O CSS Grid é a única maneira de construir isso efetivamente.
• Exemplo de CSS:

body {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  color: #000;
}

.color-block-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 60vh 40vh;
  /* Thick black lines between blocks */
  gap: 4px;
  background-color: #000; 
  border: 4px solid #000;
  min-height: 100vh;
}

.block {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.block-yellow { background-color: #FACC15; }
.block-white  { background-color: #FFFFFF; }
.block-blue   { background-color: #2563EB; color: #FFF; }
.block-red    { background-color: #EF4444; }

.block-title {
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
}

Implementação de App

SwiftUI

struct ColorBlockingView: View {
    let gridSpacing: CGFloat = 4 // Thickness of the black lines
    
    var body: some View {
        // Black background acts as the grid lines between blocks
        VStack(spacing: gridSpacing) {
            // Top Row
            HStack(spacing: gridSpacing) {
                ColorBlock(color: .yellow, text: "CREATE", textColor: .black)
                ColorBlock(color: .blue, text: "VISION", textColor: .white)
            }
            .frame(height: 300)
            
            // Bottom Row
            HStack(spacing: gridSpacing) {
                ColorBlock(color: .red, text: "BOLD", textColor: .white)
                    .frame(width: 120) // Fixed narrow block
                ColorBlock(color: .white, text: "MINIMAL", textColor: .black)
            }
        }
        .background(Color.black) // The grid lines
        .border(Color.black, width: gridSpacing) // Outer border
        .ignoresSafeArea()
    }
}

struct ColorBlock: View {
    let color: Color
    let text: String
    let textColor: Color
    var body: some View {
        color
            .overlay(
                Text(text)
                    .font(.system(size: 32, weight: .black))
                    .foregroundColor(textColor)
                    .padding(),
                alignment: .bottomLeading
            )
    }
}

• No SwiftUI, a maneira mais fácil de criar linhas de grade pretas grossas no estilo Mondrian é definir .background(Color.black) na pilha pai e usar spacing: 4. O fundo aparece pelas frestas.
• .ignoresSafeArea() permite que os blocos se estendam até a borda do dispositivo físico.

Flutter

class ColorBlockingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Fundo preto cria as linhas da grade
      backgroundColor: Colors.black,
      body: SafeArea(
        bottom: false,
        child: Column(
          children: [
            // Linha Superior
            Expanded(
              flex: 3, // 3/5 do espaço vertical
              child: Row(
                children: [
                  Expanded(flex: 1, child: ColorBlock(color: const Color(0xFFFACC15), text: 'CRIAR', textColor: Colors.black)),
                  const SizedBox(width: 4), // Linha da grade
                  Expanded(flex: 2, child: ColorBlock(color: const Color(0xFF2563EB), text: 'VISÃO', textColor: Colors.white)),
                ],

…