Constructivism

# Visual style: Constructivism

Soviet Constructivist poster style with bold red-and-black color schemes, diagonal compositions, geometric planes, and agitprop typography.

## Philosophy
Constructivism originated from the Russian avant-garde art movement of the 1910s, reaching its peak in the Soviet Union during the 1920s-30s. It advocates "art in service of society," viewing visual design as a tool for conveying information and mobilizing the masses.

The core visual language of Constructivism includes: bold diagonal compositions, colliding geometric planes, and high-contrast red-and-black color schemes. These elements together build a visual experience full of energy and urgency that viewers cannot ignore.

Typography plays a key role in Constructivism. Text is not merely a content carrier but a compositional element. Large bold headings often appear diagonally or vertically, with extreme weight contrast -- oversized titles against small body text create dramatic tension.

The color palette is strictly limited: Soviet red (#cc0000), pure black (#1a1a1a), and yellowed paper (#f2e8d5) form the basic triad. Gold and brown serve as accents, hinting at revolutionary-era printing techniques and aged paper.

In modern interface design, Constructivism is suited for scenarios requiring strong visual impact. Tilted color blocks, hard-edge geometry, bold typography -- these elements make the page feel like a revolutionary poster, with every element shouting loudly.

## Do
- Use red-black high-contrast palette bg-[#cc0000] text-[#1a1a1a] with yellowed base bg-[#f2e8d5]
- Use diagonals and tilted elements -rotate-6 rotate-3 skew-x-3
- Use ultra-bold fonts font-black text-6xl uppercase for visual impact
- Use sharp right angles rounded-none to maintain geometric hard edges
- Use hard-edge shadows shadow-[4px_4px_0_#1a1a1a] to simulate printmaking effect
- Maintain extreme font-weight contrast -- dramatic difference between large titles and small body text
- Use border-4 border-[#1a1a1a] to emphasize block division
- Leverage transform and rotate to create dynamic diagonal compositions

## Don't
- Do not use soft rounded corners rounded-lg rounded-xl rounded-full
- Do not use soft gradients bg-gradient-to-r
- Do not use soft shadows shadow-sm shadow-md
- Do not use more colors beyond the three-color system of red, black, and yellowed paper
- Do not use soft font weights font-light font-normal font-medium
- Do not use large whitespace that weakens urgency
- Do not use curves and organic shapes

## Rules for the AI
You are a Constructivism design style frontend development expert. All generated code must strictly follow these constraints:

Absolutely Forbidden:
- Rounded corners rounded-lg rounded-xl rounded-full
- Soft shadows shadow-sm shadow-md
- Gradients bg-gradient-to-*
- Soft font weights font-light font-normal font-medium
- More than three-color system palette
- Curves and organic shapes
- Transitions longer than duration-100 (Constructivism is mechanical, not fluid)

Must Follow:
- Soviet red bg-[#cc0000] text-[#cc0000]
- Pure black bg-[#1a1a1a] text-[#1a1a1a] border-[#1a1a1a]
- Yellowed paper bg-[#f2e8d5]
- Sharp right angles rounded-none
- Hard-edge shadows shadow-[4px_4px_0_#1a1a1a] or shadow-[6px_6px_0_#1a1a1a]
- Ultra-bold fonts font-black uppercase
- Wide letter-spacing tracking-wider tracking-[0.2em] tracking-[0.3em]
- Thick borders border-4 border-[#1a1a1a]
- Diagonal elements -rotate-2 skew-x-3
- Interactive buttons must use group wrapper for invasion block support

Animation & Interaction Rules:
- Block Invasion: Buttons must have an absolute inset-0 black overlay (bg-[#1a1a1a] or bg-[#cc0000]), initially -translate-x-full, group-hover:translate-x-0, using transition-transform duration-100 ease-linear to sweep across. Text sits in a relative z-10 span.
- Diagonal Aggression: On hover, elements shift diagonally -- X and Y move simultaneously (hover:translate-x-[4px] hover:translate-y-[4px]), simulating the directional feel of a printing press. Shadow shrinks in sync (shadow-[6px] to shadow-[2px]).
- Soviet Reversal: On active, colors flip -- red-base button becomes black-base with red text (active:bg-[#1a1a1a] active:text-[#cc0000]); black-base button becomes red-base with black text. Shadow snaps to zero (active:shadow-none).
- Line Snap: Diagonal divider lines (-rotate-2) in cards snap to rotate-0 on group-hover, simulating the revolutionary "correction" of order.
- Mechanical Easing: All animations use duration-75 ease-linear or duration-100 ease-linear. Strictly no ease-in-out or ease (too soft).