Style combination · Pairs well
De Stijl × Flat Design
Flat UI colour blocking descends from De Stijl; use black separators and primary fields for bold, legible interfaces.
01
What each style brings
Each part of the design comes from the style with the stronger say in it, and each style gives at least two.
De Stijl Flat Design
- Type from Flat Design
- Colour from De Stijl
- Form from De Stijl
- Composition from De Stijl
- Surface from Flat Design
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Text · De Stijl
A Dutch movement formed around Theo van Doesburg's journal De Stijl and Piet Mondrian's Neoplasticism, which sought universal harmony through the most elementary means: horizontal and vertical lines, rectangles, the three primaries and black, white and grey. In typography it produced block-constructed letters and orthogonal, asymmetric layouts whose principles flowed directly into the Bauhaus and the New Typography.
Archivo; De Stijl used Theo van Doesburg's rectilinear alphabet and Vilmos Huszár's block-letter De Stijl masthead
03
The colours
The ground and leading colours come from De Stijl, with a counter-accent from Flat Design. The ink reads on the ground at 4.5:1 or more.
De Stijl Flat Design
-
#f5f3eeground · 36% -
#111111ink · 14% -
#f4c20daccent · 18% -
#d52b1eaccent · 14% -
#e74c3caccent · 10% -
#1f4ea1accent · 8%
As CSS
:root {
--ground: #f5f3ee;
--ink: #111111;
--accent-1: #f4c20d;
--accent-2: #d52b1e;
--accent-3: #e74c3c;
--accent-4: #1f4ea1;
--font-display: "Inter", sans-serif;
--font-text: "Archivo", sans-serif;
}04
The two styles
05
More combinations
With De Stijl
- Memphis Design Contrasts · Memphis reuses the primaries with squiggles and irony; compare the two to decide whether geometry should be earnest or playful.
- International Typographic Style Pairs well · Drop one De Stijl primary field into a Swiss grid for structure with a jolt of colour.
- Psychedelic Poster Contrasts · Vibrating, melting colour against still primaries: contrast them to present order and ecstasy as opposite poles.
- Dutch Expressive Postmodernism (Studio Dumbar & Hard Werken) Pairs well · Dumbar's forerunner at Teldesign, the Mondriaan poster for the Gemeentemuseum Den Haag (1971–72), photographed De Stijl's coloured bars standing in real space like an installation, and his De Stijl poster with Lex van Pieterson (1982) was a staged arrangement of objects, among them a portrait of Rietveld; lift the primaries and bars off the page, build them as a set and photograph it for the Dutch postmodern twist on the movement.
- Mechano-Faktura & Polish Constructivist Advertising Pairs well · Shared flat colour and orthogonal discipline; swap the Dutch primaries for red-black-white.
- NK Textilkammare Geometric Print (Astrid Sampe, Signerad Textil) Pairs well · Sampe's late-1940s fabrics followed Mondrian: take De Stijl's black lines and primary accents and turn them into an even, directionless repeat.
- Wendingen & Amsterdam School Typography Contrasts · Same country, same years and the same rules and bars: De Stijl set them asymmetrically in primaries as pure abstraction, Wendingen piled them symmetrically into monumental, decorative frames; set one against the other to choose between open balance and a formal facade.
With Flat Design
- Skeuomorphic UI Contrasts · Its direct predecessor and foil: one realistic, textured object on an otherwise flat screen becomes an instant focal point.
- Japanese Postwar Modernism Pairs well · Add the emblematic circles and calm colour fields of Japanese postwar posters to give flat screens a stronger focal image.
- Victorian Letterpress & Wood Type Contrasts · Ornamented wood type and dense rules show everything flat design removed; quote one decorative headline to warm a sterile interface.
- Isotype Pictorial Statistics Pairs well · Borrow Isotype's rows of identical counting pictograms to turn a flat icon set into honest, readable data graphics.
- Indie Pixel Art Revival Contrasts · Resolution-independent vector flatness against a deliberately coarse grid lit with glows and depth.
- Arts & Crafts Movement Contrasts · Borrow one engraved border or initial to give a flat interface a crafted, editorial moment against its vector minimalism.
- WPA Silkscreen Posters Pairs well · Its flat layered shapes translate directly to vector; use the national-park look for warm, civic flat illustration.
- Munich 1972 Olympic Design (Otl Aicher) Pairs well · Flat icon families descend from these round-headed figures; borrow a single stroke width (which, as Holt shows, the 1972 figures only approximate, since a limb built from an orthogonal and a 45-degree segment cannot keep one thickness) and the 0, 45 and 90-degree rule to keep a screen icon set coherent.