Design System

De Stijl

The Style. Pure abstraction through perpendicular lines and primary colors.

Netherlands
1917
1931
Neoplasticism
01

Color

Only primary colors are permitted: red, blue, and yellow. Combined with black, white, and occasionally gray, these create maximum visual contrast with minimal means.

Red #D40920
White #FFFFFF
Blue #1356A2
Yellow #F7D117
Black #000000

Color Principles

De Stijl rejected secondary and tertiary colors as impure. The three primary colors, along with black and white, were considered the only true colors. This radical reduction created a universal visual language free from naturalistic representation.

02

Typography

Heavy geometric sans-serif typefaces embody the movement's principles. No serifs, no flourishes. Pure geometric letterforms with strong vertical and horizontal strokes.

Display 128px / Black
Aa
Heading 1 64px / Black
Primary
Heading 2 48px / Black
Secondary
Heading 3 24px / 900
Tertiary Level
Body 16px / 400
The essential principle of De Stijl was the reduction of form and color to their most basic elements. Only horizontal and vertical lines were permitted.
Small 14px / 500
Secondary information and supporting text in a lighter weight.
Label 12px / 800 / 20%
Labels and system text
03

Spacing

A rigid 8px base unit creates the grid. All spacing derives from this fundamental unit, creating mathematical harmony and strict perpendicular relationships.

4px
0.5x
8px
1x
16px
2x
24px
3x
32px
4x
48px
6x
64px
8x
96px
12x
04

Buttons

Strictly rectangular. No rounded corners permitted. Bold borders define interactive areas. Color indicates hierarchy and purpose.

Primary Actions

Sizes

Outlined Variants

05

Forms

Input elements use bold rectangular borders. Focus states employ color shifts and perpendicular shadow offsets. No curves permitted.

Checkboxes

Radio Buttons

06

Cards

Content containers use Mondrian-inspired compositions. Asymmetric grids, bold dividing lines, and primary color blocks create dynamic visual hierarchy.

Painting

Neoplastic compositions reduce form to pure abstraction through perpendicular relationships.

Architecture

Buildings as three-dimensional paintings, with interlocking rectangular planes.

Furniture

Functional objects as sculptural compositions of intersecting planes.

Mondrian Composition Cards

Grid-based layouts inspired by Mondrian's neoplastic paintings, using asymmetric proportions and primary color fields.

A
1
2
3
4
07

Data Table

Information presented in strict grid alignment. Bold headers, perpendicular dividers, and color-coded status indicators provide clarity.

Artist Medium Period Status Works
Piet Mondrian Painting 1917-1944 Founder 250+
Theo van Doesburg Multi-disciplinary 1917-1931 Co-founder 180
Gerrit Rietveld Architecture 1919-1964 Member 95
Bart van der Leck Painting 1917-1918 Former 120
Vilmos Huszar Graphic Design 1917-1923 Former 85
08

Badges

Compact rectangular labels for status, categories, and metadata. Strictly perpendicular forms with no rounded corners.

Color Variants

Default Filled Red Blue Yellow

Status Indicators

Active Processing Pending Complete

Categories

Painting Architecture Furniture Typography Interior
09

Design Principles

The fundamental ideas that guided De Stijl: reduction to essentials, universal harmony through abstract form, and the integration of art into everyday life.

Perpendicular Lines Only

Only horizontal and vertical lines are permitted. Diagonals and curves are rejected as impure. This constraint creates a universal visual grammar that transcends cultural specificity.

Primary Colors

Red, blue, and yellow are the only chromatic colors allowed, alongside black and white. These represent the fundamental building blocks of all color, reduced to their purest essence.

Asymmetric Balance

Dynamic equilibrium is achieved through asymmetric composition rather than static symmetry. Varying proportions of colored and white planes create tension and visual interest.

Universal Harmony

The goal was to create a universal aesthetic language that could unify all art forms. Painting, architecture, furniture, and typography would share the same formal vocabulary.

Reduction to Essentials

All naturalistic forms are reduced to their geometric essence. Representation is eliminated in favor of pure abstraction, revealing the underlying structure of visual experience.

Total Integration

Art should not be separate from life. The principles of neoplasticism should extend from canvas to architecture to everyday objects, creating a complete aesthetic environment.

Neoplastic Composition

A complex Mondrian-inspired grid demonstrating the interplay of asymmetric proportions, primary colors, and perpendicular structure.