De Stijl

The Mondrian look: black horizontal and vertical lines dividing white space, with a few rectangles in red, yellow, and blue.

Mondrian grid lookred yellow blue rectangles with black linesprimary color box painting stylestrict black grid artde style designde stjilthe Mondrian dress patternred blue and yellow chair with a black framewhite squares with a few colored blocks

See it

Live demo coming soon

What it is

De Stijl was a Dutch movement founded around its namesake journal in 1917. It reduced images and objects to horizontal and vertical black lines, rectangular planes, white space, and the primary colors red, yellow, and blue. Piet Mondrian's paintings and Gerrit Rietveld's Red and Blue Chair show the same system moving between art and design. Yves Saint Laurent's 1965 Mondrian shift dresses moved it again, which is why most people meet the grid on clothing before they meet it in a museum.

Reach for it when you need a composition that feels graphic, ordered, and instantly recognizable with very few ingredients. It suits posters, packaging, cultural identities, and sectioned web layouts where the grid itself can become the image.

Gotcha: coloring every cell destroys the tension. Classic De Stijl depends on large white areas, unequal rectangles, and asymmetric balance. Keep curves, gradients, diagonals, soft shadows, and rounded corners out of a strict interpretation.

Ask AI for it

Design this in a strict De Stijl style. Use CSS Grid with uneven grid-template-columns and grid-template-rows, separated by 8px solid black rules. Leave at least half the cells white and fill only a few rectangles with pure red, yellow, or blue. Keep every edge horizontal or vertical, use asymmetric balance, and set small black sans-serif labels flush to grid edges. Use no curves, diagonals, gradients, shadows, textures, or rounded corners.

You might have meant

bauhausminimalisminternational typographic styleflat designmid century modern

Go deeper