Constructivism

---
name: constructivism
description: Apply the Constructivism visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Constructivism, mentions Russian constructivism, agitprop style, Rodchenko style, or describes red black and off-white palette, 30–45 degree diagonal composition, heavy all-caps grotesque type — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Constructivism Design System

Russian revolutionary graphic language of the 1920s: red, black, and off-white only, heavy all-caps grotesque type set on 30–45 degree diagonals, hard geometric shapes, and photomontage. Every composition is a shout — dynamic, angular, and built for maximum agitation.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Constructivism.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (Russian constructivism, agitprop style, Rodchenko style, revolutionary poster, El Lissitzky style), or describes its traits: red black and off-white palette; 30–45 degree diagonal composition; heavy all-caps grotesque type; photomontage; hard geometric shapes; propaganda-poster energy.

## Design tokens

### Color palette

- Aged off-white poster stock: `#f0ebe0` (--color-bg)
- Dense ink black: `#181512` (--color-text)
- Revolutionary red — wedges, bars, CTAs, emphasis: `#c1121f` (--color-accent)
- Slightly deeper paper tone for panels: `#e6dfd0` (--color-surface)
- Deep red for hover and overprint states: `#8e0d16` (--color-accent-dark)

### Typography

- Display / headings: Anton (fallback: Impact, Arial Black, sans-serif)
- Body: Oswald (fallback: Arial Narrow, Helvetica, sans-serif)
- Type scale: 1.5 ratio, base 16px — computed steps: 16px / 24px / 36px / 54px / 81px / 122px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.1, letter-spacing 0.02em, uppercase
- Body: line-height 1.4, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 40, 64, 96, 128 — Dynamic, not dense: big type and big shapes with taut asymmetric gaps. Whitespace is a compositional force pushing against the diagonals.
- Border radius: none 0px, circle 50% — Hard edges only; circles appear as compositional elements (targets, dots), never as corner rounding.
- Border treatment: 3px solid #181512 — Heavy black rules and boxes; red bars used as structural borders on section edges. No soft or gray lines.

### Shadows

- none: `none` — Flat poster printing — hierarchy is carried entirely by scale, angle, and the red/black opposition

### Layout

- Max content width: 1280px
- One dominant diagonal axis (30–45deg) per composition; align rotated type and bars to it
- Asymmetric balance: heavy red mass on one side countered by black type on the other
- Photomontage: high-contrast duotone photo fragments cut into hard-edged shapes
- Vertical text strips (writing-mode) as compositional columns and labels

### Effects

- Rotated headline blocks and red wedges (transform: rotate(-30deg to -45deg))
- Duotone/high-contrast photo treatment (black + paper, or red + paper)
- Halftone or coarse grain on photo fragments
- Red circle/target motifs anchoring diagonal compositions

### Motion

- Easing: cubic-bezier(0.7, 0, 0.3, 1); durations 100ms / 180ms / 300ms
- Elements charge in along the diagonal axis and stop hard
- Hover inverts blocks: black to red or red to black, instantly
- No floating, drifting, or gentle fades — motion is forceful and brief

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f0ebe0;
  --color-text: #181512;
  --color-accent: #c1121f;
  --color-surface: #e6dfd0;
  --color-accent-dark: #8e0d16;
  --radius-none: 0px;
  --radius-circle: 50%;
  --border-default: 3px solid #181512;
  --font-display: Anton, Impact, "Arial Black", sans-serif;
  --font-body: Oswald, "Arial Narrow", Helvetica, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.1;
  --leading-body: 1.4;
  --tracking-heading: 0.02em;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.7, 0, 0.3, 1);
  --duration-fast: 100ms;
  --duration-base: 180ms;
  --duration-slow: 300ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Anton:wght@400&family=Oswald:wght@400;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Off-white bar with 3px black bottom rule; wordmark in Anton uppercase; links in Oswald uppercase, active item marked by a solid red block behind it
- **Hero:** Huge rotated Anton headline crossing a red wedge, duotone photomontage fragment behind, vertical text strip on one edge, black CTA punched into the diagonal
- **Card:** Paper surface with 3px black border, a red corner triangle or top bar, uppercase Anton title, Oswald body, square corners, 24px padding
- **Button (primary):** Red fill, off-white uppercase Anton/Oswald label, square corners; hover inverts to black fill
- **Button (secondary):** Off-white fill, 3px black border, black uppercase label; hover fills black with off-white text
- **Form fields:** Off-white field, 3px black border, uppercase label set vertically or above; focus swaps border to red

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A composition organized around one aggressive diagonal axis — a red wedge or rotated headline bar driving through the layout at 30–45 degrees, à la El Lissitzky's 'Beat the Whites with the Red Wedge'. Spend boldness here; keep everything else quiet.

## Do

- Hold the palette to exactly red, black, and off-white
- Commit to the diagonal — rotate real content, not just decoration
- Use scale contrast brutally: one word can fill half the viewport
- Cut photos into hard geometric fragments and duotone them

## Don't

- No third hue, no gradients, no soft shadows
- Don't rotate body paragraphs — only display type and shapes go diagonal
- No rounded corners or friendly curves; the geometry is militant
- Don't center-align everything; symmetric calm kills the agitation

## Accessibility notes

- Red (#c1121f) on off-white passes AA (about 5.2:1); black on off-white is excellent — but off-white text on red is only ~4:1, so use it at 18.5px+/bold, which the all-caps display style naturally satisfies
- Rotated headlines must keep their unrotated text in the DOM order and remain short — screen magnifier users lose track of long diagonal lines
- All-caps body styling should be done via text-transform so assistive tech reads normal casing
- The hard entrance animations must be suppressed under prefers-reduced-motion

## Reference sites

- Tate — Constructivism: https://www.tate.org.uk/art/art-terms/c/constructivism
- MoMA — Rodchenko: https://www.moma.org
- El Lissitzky — overview: https://en.wikipedia.org/wiki/El_Lissitzky

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip constructivism.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/constructivism.json

Settings → Capabilities → Skills → Upload skill → constructivism.zip