The Style
Pure Form

Mondrian rectangles in red, yellow, blue on white with strict horizontal and vertical black lines. Founded in the Netherlands in 1917 by Theo van Doesburg and Piet Mondrian, De Stijl strips visual composition down to its absolute essentials -- straight lines, rectangular planes, and the three primary colors plus black, white, and gray.

No curves. No diagonals. No ornament. Only universal harmony through asymmetric balance.

Visual Characteristics

The core design traits that define every De Stijl composition -- from canvas to screen.

01
Strict Horizontal and Vertical Lines
No diagonals, no curves, no angles. Every line is either perfectly horizontal or perfectly vertical.
02
Rectangular Planes of Primary Color
Red, yellow, and blue blocks of varying size arranged on a white ground.
03
Thick Black Grid Lines
Heavy black rules (4-8px) delineate and separate the rectangular color planes.
04
Asymmetric Balance
Compositions feel balanced through proportional weight distribution, never through mirror symmetry.
05
White as the Dominant Field
White occupies the majority of the composition; color blocks are strategic accents, not backgrounds.
06
No Representational Imagery
Purely abstract. No photographs, no illustrations, no icons that depict real-world objects.
07
No Gradients, No Textures, No Shadows
Every surface is a flat, solid color with no depth simulation whatsoever.
08
Open-Ended Compositions
Grids imply continuation beyond the canvas edge. The composition suggests infinite extension.
09
Mathematical Proportions
Relationships between rectangles follow harmonic ratios, creating visual music.
10
Limited Palette, Maximum Expression
The restriction to three primaries plus neutrals forces compositional mastery.
"The position of the artist is humble. He is essentially a channel."
-- Piet Mondrian

Design Principles

The philosophical foundations of De Stijl compositional thinking.

Reduction

Reduce to the absolute universal elements: horizontal, vertical, primary color, neutral. Every line and plane must be necessary; if it can be removed, it should be.

Dynamic Equilibrium

Seek dynamic equilibrium through asymmetric arrangement of unequal parts. Tension between elements creates visual rhythm; static symmetry is avoided.

Universality

Eliminate the individual and particular in favor of the universal and absolute. The grid is the composition -- it is not a scaffold beneath the design, it is the design itself.

Visual Weight

Color blocks carry visual weight proportional to their area and saturation. Red carries the most weight; yellow is lightest; blue recedes.

Active White Space

White space is active and compositional, never passive or leftover. It occupies the majority of every composition by design.

Grid as Design

The grid is not hidden infrastructure. The thick black lines are the visible, defining element -- the grid IS the design itself.

Color Palette

The most restricted palette of any design movement: three primary colors, black, white, and gray. Every other color is excluded.

Mondrian Red
#D40000
Primary accent blocks, key interactive elements
Mondrian Yellow
#FFD200
Secondary accent blocks, highlights, smaller planes
Mondrian Blue
#0047AB
Tertiary accent blocks, links, supporting color planes
Grid Black
#000000
Grid lines, text, structural rules, borders
Field White
#FFFFFF
Dominant background, majority of composition
Off-White
#F7F5F0
Warm alternative background for screens
Light Gray
#D9D9D9
Neutral plane, subtle section separation
Mid Gray
#808080
Occasional neutral block, secondary text
"Only use red, yellow, and blue. White dominates. Color blocks are accents occupying 15-30% of the total composition. Black is exclusively structural."
-- De Stijl Color Usage Guideline

Typography

Geometric sans-serif, blocky and structural. Uppercase preferred. Hierarchy through size and weight only.

Display -- Bebas Neue
Horizontal
Vertical
Primary
Body -- Work Sans
De Stijl typography is geometric sans-serif, stripped of any calligraphic or decorative quality. Letterforms echo the rectangular geometry of the compositions. Weight is the only variation -- hierarchy is created through size and weight, never through style or decoration. Text blocks are positioned along grid lines like any other rectangular element.
Geometric Sans-Serif
Stripped of any calligraphic or decorative quality. Pure geometric construction.
Blocky and Structural
Letterforms echo the rectangular geometry of the compositions.
Uppercase Preferred
Uniformity of letter height reinforces the grid. Small-caps also acceptable.
Weight as Only Variation
Hierarchy created through size and weight, never through style (italic) or decoration.

Font Pairings

Recommended Google Fonts combinations for De Stijl digital compositions.

Heading Font
Body Font
Character
Bebas Neue (400)
Work Sans (400)
Bold, architectural display
Jost (700)
DM Sans (400)
Geometric precision
Archivo Black (400)
Inter (400)
Ultra-bold structural impact
Oswald (600)
Barlow (400)
Condensed, efficient
Poppins (700)
Work Sans (400)
Clean geometric consistency

Layout Principles

The Mondrian grid is not hidden infrastructure -- it IS the design. CSS Grid as the primary tool.

Hero
Nav
Content
Feature
Sidebar
CTA
Footer
Meta

The Mondrian Grid

The layout itself is a De Stijl composition. Thick black lines divide the page into rectangular zones of varying sizes. No equal divisions -- rectangles are deliberately unequal.

CSS Grid as Tool

grid-template-columns and grid-template-rows with explicit track sizes mirror the Mondrian grid. Gaps rendered as 4-8px black lines.

Edge-to-Edge

The composition extends to the viewport edges, implying continuation beyond the screen. Content is constrained to cells, never overlapping boundaries.

Navigation
A horizontal black-bordered bar. Logo text in one cell, links in adjacent cells, separated by vertical black rules.
Hero
The largest grid cell. Oversized headline text with one or two color block accents in adjacent cells.
Features
Multiple grid cells of varying sizes, each containing a feature. Cells bordered by thick black lines.
Content
Text occupies white cells. Adjacent color cells provide visual accent without containing content.
CTA
A primary-color-filled cell with contrasting text and button.
Footer
A narrow horizontal row at the bottom of the grid composition, black background.
"Grid simplifies from complex multi-cell compositions to stacked rectangles on mobile. Black borders maintain weight at all sizes. The grid metaphor is preserved even in single-column layouts."
-- De Stijl Responsive Approach

CSS Techniques

Implementation patterns for bringing De Stijl to the screen.

Mondrian Grid Layout

Use display: grid with asymmetric track sizes like 2fr 1fr 1fr. Set gap: 0 and use thick black borders on children.

Card Components

4px solid black border. No border-radius. Color accent bars using ::before pseudo-elements positioned absolutely. Cards placed in auto-fit grids.

De Stijl Buttons

Black background, white text, border-radius: 0. Bebas Neue font. Uppercase. Hover transitions to var(--ds-red). Zero decoration.

Design Rules

The strict principles that govern every authentic De Stijl composition.

Do

  • Use only horizontal and vertical lines -- the most fundamental rule
  • Restrict palette to red, yellow, blue, black, white, and gray exclusively
  • Create asymmetric compositions where no two adjacent rectangles are the same size
  • Use thick black lines (4-8px) as the structural grid
  • Let white dominate; use primary colors as strategic accents
  • Treat the grid as the design itself, not as a hidden scaffold
  • Reference Mondrian's compositional principles of dynamic equilibrium
  • Use uppercase geometric sans-serif typography aligned to the grid

Don't

  • Use diagonal lines, curves, or circles -- these violate the core principle
  • Introduce secondary colors (green, orange, purple)
  • Create symmetrical layouts -- De Stijl demands dynamic asymmetry
  • Use thin or invisible grid lines; the black rules are defining elements
  • Add shadows, gradients, textures, or any depth simulation
  • Include representational imagery, illustrations, or photographs
  • Use serif, script, or decorative typefaces
  • Fill the entire composition with color -- white must remain dominant
Bauhaus
Contemporary sibling; shared reductive geometry and primary colors but allowed diagonals and circles.
Minimalism
Philosophical descendant; took De Stijl's reductive impulse further, eliminating even the primary colors.
International Typographic Style
Successor movement; formalized the grid system De Stijl pioneered into a comprehensive typographic methodology.
Flat Design
Digital echo; shares flat color and geometric simplicity but without De Stijl's strict compositional rules.
Constructivism
Parallel avant-garde; shared the geometric abstraction but embraced diagonals and revolutionary politics.
Neubrutalism
Shares thick borders and bold structure but embraces rawness over De Stijl's harmonic precision.
Memphis Design
Postmodern reaction; deliberately violated De Stijl's rules with curves, patterns, and pastels.
Material Design
Google's system borrows grid discipline and flat color while adding shadow layers for hierarchy.
Modernisme
Architectural parallel; shared the belief in pure form and rational construction.
Mondrian (Fashion/Product)
Direct commercial application of De Stijl compositions to clothing, furniture, and product surfaces.

The New Plastic Art

Composition in line and color. The style that seeks nothing less than the visual expression of universal harmony through the simplest possible means.

Back to Top