Design System

Constructivism

Art into life. The revolution of form.
Soviet avant-garde 1913-1930s

01

Color Palette

Bold, uncompromising colors that demand attention. Red dominates as the color of revolution, balanced by stark black and industrial tones.

Revolutionary Red #CC0000
Absolute Black #0A0A0A
Paper White #F5F5F0
Ochre #C4A35A
Industrial Grey #4A4A4A

Extended Palette

Dark Red

#990000

Cream

#E8E4DC

Steel

#6B6B6B

Concrete

#8C8C8C

02

Typography

Heavy condensed typefaces command attention. Text breaks free from horizontal constraints, angled for dynamic energy and urgency.

Display Bebas Neue / 10rem / 500
FORWARD
Heading 1 Oswald / 4rem / 700
Revolution of Form
Heading 2 Oswald / 2.5rem / 700
The Workers' Art
Heading 3 Oswald / 1.75rem / 600
Build the Future
Body Roboto Condensed / 1rem / 400
Constructivism emerged from the Russian avant-garde, demanding that art serve social purposes and embrace industrial materials.
Caption Oswald / 0.75rem / 700 / 0.2em
PROPAGANDA POSTER NO. 12 / MOSCOW 1924

Angled Typography

Text at dramatic angles creates dynamic tension and visual urgency.

Work BUILD Create FORWARD Progress
03

Spacing System

An 8px base unit creates rhythmic consistency. Generous spacing allows bold elements room to command attention.

4px
xs
8px
sm
16px
md
24px
lg
32px
xl
48px
2xl
64px
3xl
96px
4xl
04

Buttons

Angular, bold, unapologetic. Buttons are calls to action that demand response. The skewed form suggests forward motion and urgency.

Primary Actions

Sizes

Wedge Variant

Button on Dark Background

05

Form Elements

Inputs are functional tools. Bold borders and skewed forms maintain the angular aesthetic while ensuring usability.

Checkboxes

Radio Buttons

06

Cards

Content containers with diagonal compositions and bold visual hierarchies. Each card is a poster demanding attention.

Production

Industrial methods applied to art. Mass production for the masses.

Architecture

Buildings as monuments to progress. Steel, glass, and concrete.

Propaganda

Visual communication for social transformation. Art as weapon.

Propaganda Card

Workers Unite

Art and labor are one. The artist is a worker, the worker an artist. Together we build the future.

Directive

All creative work serves the collective. Individual expression through universal forms.

Priority

Photomontage Composition

Constructivist compositions combine geometric forms in dynamic arrangements.

07

Data Table

Information organized with clarity and purpose. Bold headers, clean data, and status indicators for rapid comprehension.

Artist Discipline Period Status Works
Vladimir Tatlin Architecture / Sculpture 1915-1953 Pioneer 47
Alexander Rodchenko Graphic Design / Photography 1914-1956 Active 312
El Lissitzky Typography / Architecture 1919-1941 Active 89
Varvara Stepanova Textile / Graphic Design 1920-1958 Production 156
Lyubov Popova Painting / Textile 1916-1924 Archive 78
08

Badges & Labels

Compact markers for status, category, and priority. Angular forms maintain visual consistency with the system.

Standard Badges

Primary Dark Outline Ochre Industrial

Wedge Badges

Urgent Priority Pending

Usage Examples

Revolution 1917 Moscow Factory Categorical labels for content organization
09

Design Principles

The revolutionary foundations of Constructivist design. Art must serve society, not decorate it.

Art Into Life

Reject art for art's sake. All creative work must serve practical, social purposes. The easel painting is dead; long live industrial design.

Geometric Abstraction

Pure geometric forms - lines, circles, rectangles - are the vocabulary of modern design. Reject naturalism for the clarity of abstract form.

Dynamic Composition

Diagonals create tension and movement. Static symmetry is bourgeois; asymmetric balance propels the eye forward. Every layout should suggest motion.

Industrial Materials

Embrace steel, glass, concrete, and photomontage. Modern materials for a modern society. Technology is the artist's tool.

Typography as Image

Words are visual elements. Text can shout, whisper, or march across the page. Mixed sizes, bold weights, and dramatic angles make type speak.

Collective Vision

Design serves the collective, not the individual. Universal forms over personal expression. Reproducible, accessible, democratic.

FORWARD