Apply Color Blocking Principles to UI Designs

A visual sub-style reference for "Color Blocking" - a Mondrian-inspired design language where the viewport is divided into large rectangular blocks of solid, highly contrasting color with no margins between them, typically separated by thick black grid lines or no line at all, letting the colors clash directly. It is a child reference of a parent design-it skill and is not meant to be triggered directly - it applies when a user's aesthetic request matches this specific look. Its core principles are geometric division of the layout into large color blocks, blocks touching directly with only a stark 1-2px black line, or none, between them, and typography used as visual texture placed precisely to balance each block's color weight. Visual DNA calls for 3-4 strong, highly contrasting colors, such as an Industrial Chic red/black/grey/white palette or bold custom pairings like yellow/navy/pink, very clean bold sans-serifs that can hold their own against large color fields, and thick black borders reminiscent of Mondrian paintings. It provides full, complete implementations across five platforms: CSS Grid for web, using grid-template-columns/grid-template-rows and a gap that exposes a black background as the grid line; SwiftUI, a black-background VStack/HStack with spacing exposing the grid lines and .ignoresSafeArea() to bleed to the device edge; Flutter, Expanded with varying flex factors and SizedBox spacers on a black Scaffold; React Native, flexbox gap on a black-background parent View; and Jetpack Compose, Arrangement.spacedBy on a black-background Column/Row with Modifier.weight. Each platform section explains the same underlying trick: a solid black parent background peeking through fixed-width gaps between color blocks recreates the thick Mondrian grid line without drawing explicit borders. Do's and don'ts call for extreme text/background contrast, black text on yellow, white text on dark blue, and explicitly forbid drop shadows, rounded corners, or gradients - the style must stay completely flat and sharp.

Use this sub-style when a user's aesthetic request matches large, solid, contrasting color blocks with a visible grid structure - it is invoked as a reference within the parent design-it skill's style selection, not called directly by name. Do not use it when the desired look calls for soft edges, gradients, shadows, or muted or blended colors, since those directly violate its flat, sharp, high-contrast core principle.

Input is a target platform - web, iOS, Flutter, React Native, or Android/Compose - and content to lay out. Output is complete, ready-to-adapt code implementing the color-block grid pattern for that platform, for example the web CSS:

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

Provides parallel implementations in CSS Grid, SwiftUI, Flutter, React Native, and Jetpack Compose, all built around the same solid-background-peeking-through-gaps technique for rendering thick grid lines without explicit borders.

Designers and frontend or mobile engineers implementing a Mondrian-style, high-contrast color-block layout across web or native app platforms.