Color Blocking

Color Blocking

"The grid made visible. Large, solid swaths of contrasting color defining the layout."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Geometric Division: The viewport is divided into large rectangles or squares, each filled with a solid, distinct color.
2. No Margins Between Blocks: Blocks touch each other directly, often separated only by a stark, 1px or 2px black line (or no line at all, letting the colors clash).
3. Typography as Texture: Text is placed precisely within these blocks to balance the visual weight of the colors.

Visual DNA

• Colors: Highly contrasting, bold pairings. Use 3 to 4 strong colors from palettes like Industrial Chic (Red, Black, Grey, White) or custom bold pairings (Yellow, Navy, Pink).
• Typography: Very clean, bold sans-serifs that can hold their own against massive blocks of color.
• Borders: Often uses thick black borders (2px solid #000) between blocks to emphasize the grid, reminiscent of Mondrian paintings.

Web Implementation

• CSS Grid is the only way to effectively build this.
• CSS Example:

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 {