C
Constructivism
StyleKit
PaletteComponentsRules DemoPhilosophyDo/Don't
← StyleKit
Soviet Constructivism — 1920s

CONSTRUCT

THE FUTURE

Art must serve the revolution. Design is a weapon of progress and collective transformation.

1920s
ORIGIN ERA
3
COLOR LIMIT
0deg
ALLOWED CURVES
100ms
MAX TRANSITION
Color System

THREE-COLOR
DOCTRINE

Soviet red, pure black, aged paper. Every deviation is counter-revolutionary. Gold and brown enter only as minimal accents of print heritage.

Soviet Red
#cc0000
Primary
Pure Black
#1a1a1a
Structural
Aged Paper
#f2e8d5
Background
Gold Star
#d4a843
Accent
Earth Brown
#8b4513
Accent
Strict Usage Protocol
Soviet Red
  • Primary CTAs
  • Section headers
  • Diagonal slabs
  • Alert borders
Pure Black
  • All borders border-4
  • Hard shadows
  • Body text
  • Structural frames
Aged Paper
  • Page background
  • Card surface
  • Text on dark
  • Form fields
Components

BUILDING
BLOCKS

Primary — Red Invasion + Diagonal Shift

Size variants — all with diagonal shift + hard shadow

Interaction Rules

FOUR LAWS OF
MECHANICAL MOTION

Every interaction follows strict mechanical principles. No fluidity. No organic easing. Pure linear machine movement — duration-75 and duration-100 only.

Rule 01
Block Invasion

On hover, a color block sweeps from left to right — absolute inset-0, -translate-x-full to translate-x-0, duration-100 ease-linear. Text stays on top via z-10.

Hover any button to trigger the invasion

Rule 02
Diagonal Aggression

On hover, elements shift diagonally — X and Y move simultaneously (translate-x-[4px] translate-y-[4px]). Shadow shrinks from 6px to 2px, simulating a woodblock pressing down.

POSTER A
1920
POSTER B
1925
POSTER C
1928
POSTER D
1932
Hover to see diagonal shift
Rule 03
Soviet Reversal

On active (click/press), colors flip completely — red becomes black, black becomes red. Shadow collapses to zero. The stamp presses down; everything inverts.

Rest state

bg-red / text-paper

Active state

bg-black / text-red

Press and hold the button above

Rule 04
Line Snap

Inside cards, the diagonal accent line sits at -rotate-2. On hover, it snaps to rotate-0 — a mechanical correction, like revolution imposing geometric order.

MANIFESTO I

Hover to snap the diagonal line to horizontal.

MANIFESTO II

The tilted line represents organic chaos — hover corrects it.

MANIFESTO III

Revolution straightens what was crooked. Geometric order.

Hover each card to snap the diagonal line

Mechanical Easing Doctrine
75ms
Standard interactions
duration-75 ease-linear
100ms
Block invasion sweep
duration-100 ease-linear
300ms+
Forbidden — too fluid
ease-in-out BANNED
Design Doctrine

LAWS &
PROHIBITIONS

Constructivism is disciplined. Every decision is a political act. These rules are non-negotiable mandates from the collective.

MANDATES

  • bg-[#cc0000] text-[#1a1a1a] — soviet red + black high contrast
  • -rotate-6 rotate-3 skew-x-3 — diagonal composition
  • font-black text-6xl uppercase — maximum typographic weight
  • rounded-none — zero softness, pure geometric hard edge
  • shadow-[4px_4px_0_#1a1a1a] — woodblock print shadow
  • border-4 border-[#1a1a1a] — thick structural borders
  • Extreme weight contrast — giant headline vs small body text
  • transform rotate — dynamic diagonal construction
CORRECT
Zero curves. Hard edges. Maximum weight.

PROHIBITIONS

  • rounded-lg rounded-xl rounded-full — absolutely forbidden
  • bg-gradient-to-r — no soft gradients whatsoever
  • shadow-sm shadow-md — no soft diffuse shadows
  • More than three colors — strict red/black/paper system
  • font-light font-normal — no weak typographic weight
  • Large white-space — suppresses urgency and tension
  • Curves and organic shapes — constructivism is geometric only
  • ease-in-out transitions — too fluid, use ease-linear
rounded-xl shadow-md bg-gradient-to-r font-light ease-in-out
ALL OF THESE ARE PROHIBITED
▲

DIAGONAL COMPOSITION

Everything tilts toward revolution

Diagonal lines create tension and urgency. Skewed blocks, rotated headlines, tilted accent lines — the world is in motion, not at rest.

■

GEOMETRIC PURITY

Only hard forms speak truth

Squares, rectangles, triangles. No curves permitted. Geometry embodies the precision of the machine and the clarity of collective purpose.

●

TYPOGRAPHIC FORCE

Letters as visual weapons

Font-black, uppercase, extreme tracking. Giant headlines contrast with tiny body text. Every glyph is a hammer strike, not a whisper.

Philosophy

ART FOR
THE MASSES

“

Constructivism maintains that design is a weapon of progress and collective transformation.

— Rodchenko, 1921

1910s
Russian avant-garde artists reject pure aestheticism. Art must function. The canvas becomes a poster, the poster becomes a tool.
1920s
Peak Constructivism. El Lissitzky, Rodchenko, Popova define the vocabulary: diagonals, geometric blocks, red-black-paper.
Today
The style reaches web design. Hard edges, hard shadows, mechanical transitions — a century later, still the most urgent visual language.
◆

Zero Curves

Every border-radius is zero. The square rules. The rectangle serves. Organic forms are counter-revolutionary.

▮

Hard Shadows

shadow-[4px_4px_0_#1a1a1a] mimics the woodblock press. No blur. No diffusion. Hard-edged like a stamp.

↗

Diagonal Force

Skewed slabs, rotated headlines, tilted lines. Static horizontals denote stagnation — diagonals mean progress.

█

Three Colors

Soviet red, pure black, aged paper. Every additional color dilutes the revolutionary message. Discipline is power.

▬

Weight Contrast

font-black for headlines. Extreme size contrast between title and body. Typography as architecture, not decoration.

⚙

Mechanical Time

duration-75 ease-linear. The machine does not ease-in-out. It starts and stops with the precision of industrial rhythm.

C
Constructivism

Soviet avant-garde design for the modern web. Hard edges, maximum contrast, mechanical interactions.

StyleDocumentationShowcaseCover
StyleKitHomeAll Styles
PaletteSoviet RedPure BlackAged PaperGold StarEarth Brown
Constructivism — StyleKit — Art Serves The Collective
← Back to StyleKit