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;