Brutalistsystem

Soviet Constructivism

89
🔥 Certified BangerThis prompt produces genuinely distinct output

Generates UI with bold red-and-black propaganda poster energy — diagonal compositions, geometric shapes, strong typography, and revolutionary graphic design. Rodchenko meets React.

red blackgeometricpropagandadiagonalhigh contrast

Added February 16, 2026 by unslop.dev

Example output

Propaganda card

Priority Bulletin

Build for
the people

Interfaces must serve their users with clarity and purpose. No decoration without function. No complexity without necessity.

View code
<div style="padding: 2rem; background: #f5f0e8;">
  <div style="max-width: 24rem; border: 3px solid #0a0a0a; position: relative; overflow: hidden;">
    <div style="background: #cc0000; padding: 0.5rem 1.25rem; display: flex; align-items: center; gap: 0.75rem;">
      <div style="width: 14px; height: 14px; background: #f5f0e8; border-radius: 50%; flex-shrink: 0;"></div>
      <span style="font-family: Impact, 'Arial Black', sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: #f5f0e8; font-weight: 700;">Priority Bulletin</span>
    </div>
    <div style="padding: 1.5rem; background: #f5f0e8;">
      <h3 style="font-family: Impact, 'Arial Black', sans-serif; font-size: 1.75rem; text-transform: uppercase; color: #0a0a0a; margin: 0 0 0.5rem 0; line-height: 1; letter-spacing: 0.02em;">Build for<br>the people</h3>
      <p style="font-size: 0.8125rem; color: #2a2520; line-height: 1.5; margin: 0 0 1.25rem 0;">Interfaces must serve their users with clarity and purpose. No decoration without function. No complexity without necessity.</p>
      <button style="background: #0a0a0a; color: #f5f0e8; border: 3px solid #0a0a0a; padding: 0.5rem 1.75rem; font-family: Impact, 'Arial Black', sans-serif; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; box-shadow: 3px 3px 0 #cc0000;">Mobilize</button>
    </div>
  </div>
</div>

Alert banner with diagonal

System Alert Active

Production deployment pipeline requires immediate attention. 3 stages pending review.

View code
<div style="padding: 2rem; background: #0a0a0a;">
  <div style="max-width: 32rem; position: relative; background: #cc0000; border: 3px solid #f5f0e8; padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1rem;">
    <div style="width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 18px solid #f5f0e8; flex-shrink: 0;"></div>
    <div>
      <p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; color: #f5f0e8; margin: 0 0 0.25rem 0; font-weight: 700;">System Alert Active</p>
      <p style="font-size: 0.8125rem; color: rgba(245,240,232,0.8); margin: 0; line-height: 1.4;">Production deployment pipeline requires immediate attention. 3 stages pending review.</p>
    </div>
  </div>
</div>

Stat blocks

247

Deployments

99.8

Uptime %

14ms

Avg Latency

View code
<div style="padding: 2rem; background: #f5f0e8;">
  <div style="display: flex; gap: 0; max-width: 36rem;">
    <div style="flex: 1; background: #0a0a0a; border: 3px solid #0a0a0a; padding: 1.25rem; text-align: center;">
      <p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 2.5rem; color: #cc0000; margin: 0; line-height: 1;">247</p>
      <p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; color: #f5f0e8; margin: 0.5rem 0 0 0;">Deployments</p>
    </div>
    <div style="flex: 1; background: #cc0000; border: 3px solid #0a0a0a; padding: 1.25rem; text-align: center;">
      <p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 2.5rem; color: #f5f0e8; margin: 0; line-height: 1;">99.8</p>
      <p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(245,240,232,0.7); margin: 0.5rem 0 0 0;">Uptime %</p>
    </div>
    <div style="flex: 1; background: #f5f0e8; border: 3px solid #0a0a0a; padding: 1.25rem; text-align: center;">
      <p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 2.5rem; color: #0a0a0a; margin: 0; line-height: 1;">14ms</p>
      <p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; color: #2a2520; margin: 0.5rem 0 0 0;">Avg Latency</p>
    </div>
  </div>
</div>

Login form

Authenticate

Unauthorized access will be reported

View code
<div style="padding: 2rem; background: #0a0a0a; display: flex; justify-content: center;">
  <div style="max-width: 22rem; width: 100%;">
    <div style="background: #f5f0e8; border: 3px solid #0a0a0a; padding: 0;">
      <div style="background: #cc0000; padding: 0.75rem 1.25rem; border-bottom: 3px solid #0a0a0a;">
        <h2 style="font-family: Impact, 'Arial Black', sans-serif; font-size: 1.5rem; text-transform: uppercase; color: #f5f0e8; margin: 0; letter-spacing: 0.05em;">Authenticate</h2>
      </div>
      <div style="padding: 1.5rem;">
        <label style="display: block; font-family: Impact, 'Arial Black', sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: #0a0a0a; margin-bottom: 0.375rem;">Operative ID</label>
        <input type="text" placeholder="Enter your designation" style="width: 100%; box-sizing: border-box; border: 3px solid #0a0a0a; padding: 0.5rem 0.75rem; font-family: Impact, 'Arial Black', sans-serif; font-size: 0.875rem; background: #f5f0e8; margin-bottom: 1rem; outline: none;" />
        <label style="display: block; font-family: Impact, 'Arial Black', sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: #0a0a0a; margin-bottom: 0.375rem;">Passphrase</label>
        <input type="password" placeholder="••••••••" style="width: 100%; box-sizing: border-box; border: 3px solid #0a0a0a; padding: 0.5rem 0.75rem; font-family: Impact, 'Arial Black', sans-serif; font-size: 0.875rem; background: #f5f0e8; margin-bottom: 1.25rem; outline: none;" />
        <button style="width: 100%; background: #0a0a0a; color: #f5f0e8; border: 3px solid #0a0a0a; padding: 0.625rem; font-family: Impact, 'Arial Black', sans-serif; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; box-shadow: 3px 3px 0 #cc0000;">Enter the System</button>
        <p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 0.625rem; color: #2a2520; text-align: center; margin: 0.875rem 0 0 0; text-transform: uppercase; letter-spacing: 0.1em;">Unauthorized access will be reported</p>
      </div>
    </div>
  </div>
</div>

Pricing tiers

Choose Your
Level of Access

Cadet

$0

/ month

▸ 3 projects
▸ Basic tools
▸ Community forum

Vanguard

$29

/ month

▸ Unlimited projects
▸ Advanced arsenal
▸ Priority dispatch

Commissar

$99

/ month

▸ Everything in Vanguard
▸ Custom deployment
▸ Direct line to command
View code
<div style="padding: 2rem; background: #f5f0e8;">
  <div style="max-width: 38rem;">
    <h2 style="font-family: Impact, 'Arial Black', sans-serif; font-size: 2rem; text-transform: uppercase; color: #0a0a0a; margin: 0 0 1.25rem 0; letter-spacing: 0.03em;">Choose Your<br>Level of Access</h2>
    <div style="display: flex; gap: 0;">
      <div style="flex: 1; border: 3px solid #0a0a0a; padding: 1.25rem; background: #f5f0e8;">
        <p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: #2a2520; margin: 0 0 0.5rem 0;">Cadet</p>
        <p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 2rem; color: #0a0a0a; margin: 0; line-height: 1;">$0</p>
        <p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 0.625rem; color: #2a2520; margin: 0.25rem 0 1rem 0; text-transform: uppercase; letter-spacing: 0.1em;">/ month</p>
        <div style="font-family: Impact, 'Arial Black', sans-serif; font-size: 0.6875rem; color: #2a2520; line-height: 2;">▸ 3 projects<br>▸ Basic tools<br>▸ Community forum</div>
        <button style="width: 100%; background: #f5f0e8; color: #0a0a0a; border: 3px solid #0a0a0a; padding: 0.5rem; font-family: Impact, 'Arial Black', sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; margin-top: 1rem;">Enlist</button>
      </div>
      <div style="flex: 1; border: 3px solid #0a0a0a; border-left: none; padding: 1.25rem; background: #cc0000;">
        <p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(245,240,232,0.7); margin: 0 0 0.5rem 0;">Vanguard</p>
        <p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 2rem; color: #f5f0e8; margin: 0; line-height: 1;">$29</p>
        <p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 0.625rem; color: rgba(245,240,232,0.6); margin: 0.25rem 0 1rem 0; text-transform: uppercase; letter-spacing: 0.1em;">/ month</p>
        <div style="font-family: Impact, 'Arial Black', sans-serif; font-size: 0.6875rem; color: #f5f0e8; line-height: 2;">▸ Unlimited projects<br>▸ Advanced arsenal<br>▸ Priority dispatch</div>
        <button style="width: 100%; background: #0a0a0a; color: #f5f0e8; border: 3px solid #0a0a0a; padding: 0.5rem; font-family: Impact, 'Arial Black', sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; margin-top: 1rem; box-shadow: 3px 3px 0 rgba(245,240,232,0.3);">Join the Front</button>
      </div>
      <div style="flex: 1; border: 3px solid #0a0a0a; border-left: none; padding: 1.25rem; background: #0a0a0a;">
        <p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: #cc0000; margin: 0 0 0.5rem 0;">Commissar</p>
        <p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 2rem; color: #f5f0e8; margin: 0; line-height: 1;">$99</p>
        <p style="font-family: Impact, 'Arial Black', sans-serif; font-size: 0.625rem; color: rgba(245,240,232,0.4); margin: 0.25rem 0 1rem 0; text-transform: uppercase; letter-spacing: 0.1em;">/ month</p>
        <div style="font-family: Impact, 'Arial Black', sans-serif; font-size: 0.6875rem; color: rgba(245,240,232,0.8); line-height: 2;">▸ Everything in Vanguard<br>▸ Custom deployment<br>▸ Direct line to command</div>
        <button style="width: 100%; background: #cc0000; color: #f5f0e8; border: 3px solid #cc0000; padding: 0.5rem; font-family: Impact, 'Arial Black', sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; margin-top: 1rem;">Seize Control</button>
      </div>
    </div>
  </div>
</div>

Navigation header

Collective
View code
<div style="background: #0a0a0a; padding: 0; border-bottom: 3px solid #cc0000;">
  <div style="max-width: 48rem; margin: 0 auto; padding: 0 1.5rem; display: flex; justify-content: space-between; align-items: center; height: 3.5rem;">
    <div style="display: flex; align-items: center; gap: 0.5rem;">
      <div style="width: 14px; height: 14px; background: #cc0000; border-radius: 50%;"></div>
      <span style="font-family: Impact, 'Arial Black', sans-serif; font-size: 1.125rem; text-transform: uppercase; color: #f5f0e8; letter-spacing: 0.08em;">Collective</span>
    </div>
    <div style="display: flex; gap: 1.5rem; align-items: center;">
      <a style="font-family: Impact, 'Arial Black', sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: #cc0000; text-decoration: none; cursor: pointer;">Manifesto</a>
      <a style="font-family: Impact, 'Arial Black', sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: #f5f0e8; text-decoration: none; cursor: pointer;">Projects</a>
      <a style="font-family: Impact, 'Arial Black', sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: #f5f0e8; text-decoration: none; cursor: pointer;">Members</a>
      <button style="background: #cc0000; color: #f5f0e8; border: none; padding: 0.375rem 1rem; font-family: Impact, 'Arial Black', sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer;">Join</button>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI components in a Soviet Constructivist style — the graphic language of 1920s revolutionary poster art translated into modern interfaces. Bold geometry, restricted color, diagonal energy, and typography as architecture. Every element is a composition. Every layout is a manifesto.

VISUAL RULES:
- Color palette: Red (#cc0000), black (#0a0a0a), cream (#f5f0e8), and a dark warm gray (#2a2520). That's it. No other colors. Red is power, black is structure, cream is the canvas.
- Red usage: Backgrounds on key elements, accent bars, circles, triangles. Red is the signal color — use for CTAs, alerts, badges, active states. Never muted or desaturated.
- Background: Cream (#f5f0e8) for light surfaces, black (#0a0a0a) for dark sections. Alternate between them for dramatic contrast.
- Typography: Heavy condensed sans-serif. `font-family: 'Impact', 'Arial Black', 'Haettenschweiler', sans-serif`. All headings UPPERCASE. Huge scale contrast — titles 3-5x larger than body text. Text as graphic element.
- Diagonal elements: Use `transform: rotate(-5deg)` to `-15deg` on banners, bars, and decorative stripes. Diagonals create dynamism and break the grid.
- Geometric shapes: Circles, triangles, and bold bars as decorative/structural elements. Red circles as bullet points or status indicators. Thick red diagonal bars as dividers.
- Borders: 3px solid black. Heavy and structural. No thin subtle borders.
- Spacing: Tight and packed. This is poster design — fill the frame. p-4 to p-5, small gaps. Content is dense and urgent.
- Layout: Asymmetric compositions. Off-center headings. Overlapping elements where possible.

SPECIFIC PATTERNS:
- Cards: Cream bg with 3px black border. Red accent bar (4px) on left or top edge. Heavy black heading with large scale contrast.
- Buttons: bg-[#cc0000] text-cream or bg-black text-cream. UPPERCASE, letter-spacing wide, font-bold. 3px black border with solid 3px offset shadow. No border-radius — sharp corners only.
- Badges/labels: Red bg with cream text, or black bg with red text. Uppercase, extra-bold, tight padding.
- Section headers: Oversized uppercase text with a red diagonal bar behind or beside it. Use scale to dominate.
- Dividers: Thick red or black bars, optionally rotated slightly.
- Icons/indicators: Red circles (12-16px) or red triangles as pointers/bullets.

ANTI-PATTERNS:
- No gradients, glows, or shadows (except solid offset).
- No rounded corners. Everything is sharp.
- No pastel colors. No blue, green, purple, pink.
- No thin typography. Nothing light or delicate.
- No subtle effects or transparency. Everything is bold and opaque.
- No centered, balanced layouts — embrace asymmetry.

Related prompts

Meister

josef albers

Preliminary course instructor. Color theory. Interaction of color as perception.

Brutalist

Bauhaus

🔥87system

Generates UI in the Bauhaus school tradition — primary geometric forms (circle, triangle, square), primary colors mapped to shapes, asymmetric grid compositions, and the fusion of art and industrial function.

Composition

Balance through asymmetry. Harmony through primary contrast. The grid is the universal language.

1917
Brutalist

De Stijl / Mondrian

🔥85system

Generates UI based on the De Stijl art movement — primary colors only (red, blue, yellow), thick black grid lines, asymmetric rectangular composition, and the radical geometry of Piet Mondrian's paintings as a layout system.

New

Build Faster Interfaces

Stop overthinking your component architecture. Ship it, learn from it, iterate on it.

Brutalist

Neo Brutalist

🔥94system

Generates UI with bold 2-3px black borders, solid drop shadows, raw background colors, and visible structure — design that announces itself. No subtlety, maximum clarity.