---
name: De Stijl
slug: de-stijl
category: aesthetic
status: published
created: 2026-08-21T00:00:00.000Z
modified: 2026-08-21T00:00:00.000Z
definition: A style built only from black rules, rectangular fields, and the
  three primaries on white, arranged asymmetrically with no curves and no
  diagonals.
aliases:
  - name: neoplasticism
  - name: Mondrian style
    source: community
  - name: Mondrian grid
tags:
  - editorial
  - grids
  - retro
relations:
  contrastWith:
    - constructivism
    - bauhaus-style
  variantOf: []
  partOf: []
  seeAlso: []
implementations: []
sources:
  - title: "Creative Market: Design trend report, De Stijl design"
    url: https://creativemarket.com/blog/de-stijl-design-trend
demo: inline
exhibit: false
useWhen: black rules and primary rectangles, nothing else
---

The vocabulary is shorter than any other style on this site. Straight black rules, always
horizontal or vertical and always heavy enough to read as structure rather than as outline.
Rectangular fields between them, filled with red, yellow, blue, or left white. Nothing else:
no curve, no diagonal, no gradient, no ornament, no representation of anything. Balance is
achieved by weight rather than by symmetry, so a single large red field on one side is
answered by a small blue one diagonally opposite it, and the composition settles without a
centre line. The rules are not borders around the fields, they are the fields' shared edges,
which is why a De Stijl grid never looks like a set of boxes with margins between them.

The movement began in 1917 in the Netherlands around a journal of the same name, founded by
Theo van Doesburg, with Piet Mondrian as its most famous painter and Gerrit Rietveld
carrying the same logic into furniture and architecture. Mondrian called his version
Nieuwe Beelding, translated as neoplasticism: reduce painting to the elements that cannot be
reduced further, and compose only with those. Rietveld's Red and Blue Chair of 1918 is the
programme in three dimensions, planes and sticks meeting at right angles with the joints
left visible, and the Rietveld Schroeder House of 1924 is a building made the same way. The
group broke apart over one element. Van Doesburg introduced the diagonal in the mid 1920s
and called the result elementarism; Mondrian, for whom horizontal and vertical were the
whole argument, left. That quarrel is the reason a diagonal reads as
[Bauhaus](/bauhaus-style) rather than as De Stijl even though the two movements share the
same three primaries.

The echo in interfaces is stronger than its age suggests, because a De Stijl canvas is
almost exactly a modern layout grid with the tracks made visible. Asymmetric column widths,
unequal row heights, a few cells given colour and the rest left empty: that description fits
both a 1930 painting and a dashboard. It is the favourite worked example for teaching CSS
grid for precisely this reason, and it turns up as a register in editorial covers, poster
work, and the occasional brand system that wants to look rigorous and playful at once.

Borrowing it works best where the composition is the content, so hero areas, section
dividers, empty states, and cover art. It works badly as a general product skin, and for the
same reason it works as art: the three primaries are already spoken for in an interface,
where red means an error and blue means a link, and the heavy rules add visual weight to
every boundary in a screen that probably has plenty of boundaries already. The
transferable part is the discipline, not the palette. Set your fields on unequal tracks,
balance by weight rather than by centring, and let one field be much larger than the others.