Russian Constructivism — UI Kit v1.0

CONSTRUC
TION

Form follows function. Art serves the collective. Design is a weapon. A minimal system built on the principles of Rodchenko, Lissitzky, and Stepanova — 1920 to 1935.

Explore Kit View Forms

KONSTRUKT — 1920 — MOSCOW

01 — Foundation

Colour Palette

Three absolutes: Red for revolution and urgency. Black for industrial weight and authority. White for the ground on which all action takes place. The greys are the steel of the machine. No earth tones. No pastels. No ambiguity.

Red
Revolution

#CC0000

Black
Authority

#0A0A0A

White
Ground

#F5F2EC

Steel
Structure

#2C2C2C

Iron
Mid-tone

#444444

Ash
Secondary

#888888

Cream
Warm ground

#F0EDE6

Crimson
Red shadow

#990000

Primary Structural Ground Industrial

02 — Typography

Type System

Three registers. Oswald — condensed, forceful display type for headlines and labels: the visual weight of a propaganda poster. Barlow Condensed — the rational, legible voice for body text. Share Tech Mono — machine output for data and code. All capitals where authority is required.

Oswald Barlow Condensed Share Tech Mono

Display — Oswald Bold / 128px

FORM

Heading — Oswald Bold / 56px

CONSTRUCT

Subheading — Oswald Medium / 35px

FUNCTION

Body — Barlow Condensed Regular / 16px

The Constructivists believed art must serve the revolutionary state. Every printed surface — poster, book, textile — was a site of agitation. The diagonal and the circle became the language of the new world.

Small — Barlow Condensed Light / 14px

Rodchenko declared that composition must be determined by construction. The task is not to copy nature but to build a new reality — rational, functional, collective.

Condensed Label — Barlow Condensed Semibold

Module Identifier — Section 04 — State

Mono — Share Tech Mono / 14px

const state = { form: 'absolute', color: '#CC0000' }

03 — Actions

Buttons

Every button is a stamp. Hard corners, zero radius. The offset shadow creates a constructivist spatial illusion — the plane floating above the ground. On hover, a diagonal sweep crosses the surface: the agitprop gesture, the diagonal cut.

Variants

Sizes

Icon Buttons

Status Badges

Active Archived Pending Draft

04 — Input Fields

Form Elements

Fields are industrial surfaces — thick grey borders, no curvature. On focus, a red vertical bar materialises on the left edge and a black offset shadow drops. Error is red. Confirmation is black. Both are absolute.

Operative Name As listed in the collective register

Communique Address

Access Code

Registry Number — Error INVALID — alphanumeric and hyphens only

Manifest Code — Confirmed CONFIRMED — record located in central archive

Operative Statement Maximum 800 characters

04b — Selector

Dropdown

Movement

Year of Mandate

05 — Selection

Radio & Checkboxes

Selection is categorical and immediate. The red bar on the left edge marks chosen positions with the finality of a rubber stamp. Click to assign. Click again to withdraw.

Radio — select one position

Spatial Construction Three-dimensional form in real space — beyond the canvas Typographic Composition Letter as geometric unit — the text as visual system Photomontage Photographic fragments assembled into agitprop imagery Textile Pattern Design Geometric repeat — functional fabric for the collective

Checkboxes — select formal principles

The diagonal as primary axis Dynamic tension through oblique composition — Rodchenko's law Red / Black / White — the three absolutes No other colours are politically or formally necessary Circle, square, line as vocabulary Primary geometric forms — the alphabet of construction Form determined by function No decoration. No ornament. Only necessary structure.

06 — Feedback

Alert Components

Alerts are communiques: immediate, non-negotiable. The thick left bar is the colour-coded signal. The bold glyph is the stamp. The body text is the dispatch. Four states, each absolute.

N Notice

The VKhUTEMAS collective convenes on the first Monday of every month. All members of the construction faculty must submit formal position statements before assembly.

V Confirmed

The operative has been registered in the central archive under mandate VKHUT-1923-R. All formal rights and collective duties are now in effect.

! Attention

The composition contains decorative elements not sanctioned by the collective. Remove all ornament before submission to the review board.

X Rejected

The formal position submitted does not conform to the principles of construction. Restate your position using only the approved geometric vocabulary.