Art & design movements · 1917–1931
De Stijl
Universal harmony through reduction: only primary colours, only horizontal and vertical lines, only the rectangle.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(99% 0 0) - --fg
oklch(8% 0 0) - --muted
oklch(42% 0 0) - --surface
oklch(100% 0 0) - --surface-2
oklch(95% 0 0) - --border
oklch(8% 0 0) - --accent
oklch(54% 0.24 26) - --accent-fg
oklch(99% 0 0) - --focus
oklch(54% 0.24 26)
| Token | Value |
|---|---|
| --font-body | 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif |
| --font-display | 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif |
| --font-mono | 'Helvetica Neue', Helvetica, monospace |
| --radius | 0px |
| --radius-sm | 0px |
| --shadow | none |
| --shadow-lg | none |
:root {
--bg: oklch(99% 0 0);
--fg: oklch(8% 0 0);
--muted: oklch(42% 0 0);
--surface: oklch(100% 0 0);
--surface-2: oklch(95% 0 0);
--border: oklch(8% 0 0);
--accent: oklch(54% 0.24 26);
--accent-fg: oklch(99% 0 0);
--focus: oklch(54% 0.24 26);
--font-body: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
--font-display: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
--font-mono: 'Helvetica Neue', Helvetica, monospace;
--radius: 0px;
--radius-sm: 0px;
--shadow: none;
--shadow-lg: none;
}Where it came from
Origin: Netherlands — the journal De Stijl, Leiden
Theo van Doesburg founded the De Stijl journal in 1917. Piet Mondrian was its most famous practitioner, building paintings of red, yellow and blue rectangles divided by black lines. Gerrit Rietveld designed the Red and Blue Chair around 1918 and painted it in its famous colours in the early 1920s. The movement sought a universal visual language transcending individual expression — a spiritual geometry. Van Doesburg introduced the diagonal in 1924, splitting him from Mondrian. The movement effectively ended with Van Doesburg's death in 1931.
How to spot it
- Primary colours — red, yellow, blue — and only black and white
- Strictly horizontal and vertical lines; no curves, no diagonals
- Rectangular grids that extend across the whole composition
- Asymmetric balance achieved through scale, not position alone
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Iconic — Mondrian's grid patterns are among the most recognised in design history | Extremely limited palette — not suitable for complex information |
| Extreme constraint produces unexpected solutions | Feels like 'design history' rather than contemporary UI |
| Maps cleanly onto CSS grid and border systems | Thick black rules are bulky on dense screens |
In the wild
- Mondrian's Composition with Red Yellow and Blue
- Rietveld's Red and Blue Chair
- Rietveld Schröder House interior
Use it when
A design portfolio, cultural institution, or a hero moment that can afford to be highly recognisable and reductive.