Style combination · Pairs well
De Stijl × International Typographic Style
Drop one De Stijl primary field into a Swiss grid for structure with a jolt of colour.
Mix them and make something De Stijl International Typographic Style
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 International Typographic Style
- Type from International Typographic Style
- Colour from De Stijl
- Form from De Stijl
- Composition from International Typographic Style
- Surface from De Stijl
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 International Typographic Style. The ink reads on the ground at 4.5:1 or more.
De Stijl International Typographic Style
-
#f5f3eeground · 36% -
#111111ink · 14% -
#f4c20daccent · 18% -
#e1251baccent · 14% -
#1f4e9caccent · 10% -
#9e9e9aaccent · 8%
As CSS
:root {
--ground: #f5f3ee;
--ink: #111111;
--accent-1: #f4c20d;
--accent-2: #e1251b;
--accent-3: #1f4e9c;
--accent-4: #9e9e9a;
--font-display: "Inter Tight", 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.
- Psychedelic Poster Contrasts · Vibrating, melting colour against still primaries: contrast them to present order and ecstasy as opposite poles.
- Flat Design Pairs well · Flat UI colour blocking descends from De Stijl; use black separators and primary fields for bold, legible interfaces.
- 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 International Typographic Style
- Art Nouveau Contrasts · Ornamental curves against an orthogonal grid make a strong deliberate tension.
- Brutalist Web Design Pairs well · Strip the grid to raw HTML defaults to get a rawer, contemporary take on Swiss honesty.
- Psychedelic Poster Contrasts · Its exact opposite on legibility; borrow one swirling element to break a too-cold Swiss layout.
- Japanese Postwar Modernism Pairs well · Add Japanese restraint and emblematic colour fields to the grid for warmth without losing order.
- American Traditional Tattoo Flash Contrasts · Rational grid and sans-serif against sentimental, hand-lettered emblems: one flash motif on a Swiss layout makes a sharp contrast.
- Graffiti & Hip-Hop Graphics Contrasts · Put a single tag or throw-up over a strict Swiss grid to stage the clash between institutional order and a street voice.
- Pop Art Graphics Contrasts · Set one loud appropriated Pop image inside a strict grid with a neutral grotesque so the irony reads as deliberate rather than chaotic.
- Italian Painted Film Poster (Rome Studios) Contrasts · Grid, restraint and photographic objectivity are the opposite of a crowded painted montage.