Brutalistsystem

De Stijl / Mondrian

85
🔥 Certified BangerThis prompt produces genuinely distinct output

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.

mondrianprimary colorsgridgeometricart movement

Added February 16, 2026 by unslop.dev

Example output

Mondrian layout card

Composition

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

1917
View code
<div style="padding: 2rem; background: #fff;">
  <div style="max-width: 28rem; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; border: 4px solid #000;">
    <div style="padding: 1.5rem; border-right: 4px solid #000; border-bottom: 4px solid #000;">
      <h3 style="font-family: Futura, 'Century Gothic', 'Gill Sans', sans-serif; font-size: 1.5rem; font-weight: 700; color: #000; margin: 0 0 0.5rem 0; text-transform: uppercase;">Composition</h3>
      <p style="font-family: Futura, 'Century Gothic', 'Gill Sans', sans-serif; font-size: 0.8125rem; color: #000; line-height: 1.6; margin: 0;">Balance through asymmetry. Harmony through primary contrast. The grid is the universal language.</p>
    </div>
    <div style="background: #FF0000; border-bottom: 4px solid #000;"></div>
    <div style="background: #FFD700; padding: 1rem; border-right: 4px solid #000;">
      <span style="font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.6875rem; font-weight: 700; color: #000; text-transform: uppercase;">1917</span>
    </div>
    <div style="padding: 1rem; display: flex; align-items: center; justify-content: center;">
      <button style="background: #000; color: #fff; border: none; padding: 0.375rem 1rem; font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; cursor: pointer;">View</button>
    </div>
  </div>
</div>

Primary button set

View code
<div style="padding: 2rem; background: #fff; display: flex; gap: 0; flex-wrap: wrap;">
  <button style="background: #FF0000; color: #fff; border: 4px solid #000; padding: 0.5rem 1.5rem; font-family: Futura, 'Century Gothic', 'Gill Sans', sans-serif; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; cursor: pointer;">Action</button>
  <button style="background: #0000FF; color: #fff; border: 4px solid #000; border-left: none; padding: 0.5rem 1.5rem; font-family: Futura, 'Century Gothic', 'Gill Sans', sans-serif; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; cursor: pointer;">Navigate</button>
  <button style="background: #FFD700; color: #000; border: 4px solid #000; border-left: none; padding: 0.5rem 1.5rem; font-family: Futura, 'Century Gothic', 'Gill Sans', sans-serif; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; cursor: pointer;">Highlight</button>
  <button style="background: #fff; color: #000; border: 4px solid #000; border-left: none; padding: 0.5rem 1.5rem; font-family: Futura, 'Century Gothic', 'Gill Sans', sans-serif; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; cursor: pointer;">Default</button>
</div>

Dashboard grid

248
Active Users

System operating within normal parameters. All nodes connected and responsive.

99%
Updated: 14:32 UTC
OK
View code
<div style="padding: 2rem; background: #fff;">
  <div style="max-width: 32rem; display: grid; grid-template-columns: 1fr 1fr 80px; grid-template-rows: 80px 1fr 60px; border: 4px solid #000; min-height: 240px;">
    <div style="background: #0000FF; border-right: 4px solid #000; border-bottom: 4px solid #000; display: flex; align-items: center; justify-content: center;">
      <span style="font-family: Futura, 'Century Gothic', sans-serif; font-size: 2rem; font-weight: 700; color: #fff;">248</span>
    </div>
    <div style="padding: 1rem; border-right: 4px solid #000; border-bottom: 4px solid #000; display: flex; align-items: center;">
      <span style="font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.6875rem; font-weight: 700; color: #000; text-transform: uppercase;">Active Users</span>
    </div>
    <div style="background: #FF0000; border-bottom: 4px solid #000;"></div>
    <div style="padding: 1rem; border-right: 4px solid #000; border-bottom: 4px solid #000;">
      <p style="font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.75rem; color: #000; line-height: 1.6; margin: 0;">System operating within normal parameters. All nodes connected and responsive.</p>
    </div>
    <div style="background: #FFD700; border-right: 4px solid #000; border-bottom: 4px solid #000; display: flex; align-items: center; justify-content: center;">
      <span style="font-family: Futura, 'Century Gothic', sans-serif; font-size: 1.5rem; font-weight: 700; color: #000;">99%</span>
    </div>
    <div style="border-bottom: 4px solid #000;"></div>
    <div style="padding: 0.75rem 1rem; border-right: 4px solid #000; display: flex; align-items: center;">
      <span style="font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; color: #000;">Updated: 14:32 UTC</span>
    </div>
    <div style="background: #000; border-right: 4px solid #000; display: flex; align-items: center; justify-content: center;">
      <span style="font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.625rem; font-weight: 700; color: #fff; text-transform: uppercase;">OK</span>
    </div>
    <div style="background: #0000FF;"></div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI in the De Stijl / Mondrian aesthetic — the visual language of the Dutch art movement where interfaces are composed entirely of black grid lines, white space, and blocks of pure primary color. Red (#FF0000), blue (#0000FF), yellow (#FFD700), white (#FFFFFF), and black (#000000) — nothing else. Layout IS the design. Every screen is a Mondrian painting that functions.

VISUAL RULES:
- Colors: ONLY these five. Red (#FF0000), blue (#0000FF), yellow (#FFD700), white (#FFFFFF), black (#000000). No other colors. No gray. No muted tones. Pure, uncompromising primary colors.
- Grid lines: Thick black borders (3-5px) form the structural grid. Every major division uses `border: 4px solid #000`. This is the skeleton of the design.
- White dominance: White is the primary background. Color blocks are used as accents — most of the composition is white with a few strategic rectangles of red, blue, or yellow.
- Asymmetry: Compositions are deliberately unbalanced. One large area and several smaller ones. Never symmetrical, never centered. Mondrian's paintings are asymmetric but balanced through visual weight.
- Text: Black (#000) on white or colored backgrounds. White (#fff) on black backgrounds. No gray text.
- Typography: Clean geometric sans-serif. `font-family: 'Futura', 'Century Gothic', 'Gill Sans', sans-serif`. Simple, unadorned, functional.
- Border radius: 0px everywhere. Absolute sharp corners. Rectangles only.
- No shadows, no gradients, no transparency. Pure flat color within black grid lines.
- Spacing: Determined by the grid. Cells have uniform internal padding. The grid IS the spacing system.

SPECIFIC PATTERNS:
- Cards/panels: White bg with 4px black border on all sides. Color accent in one cell/section.
- Buttons: Small rectangles. Black bg + white text, or colored bg + black text. 4px black border.
- Headers: Black text on white, large-ish. Or white text in a black or colored bar.
- Layouts: CSS Grid with visible 4px black borders as gap/dividers. Asymmetric column/row sizes.
- Dividers: 4px solid black. Horizontal or vertical.
- Color blocks: Large rectangles of red, blue, or yellow. Used as visual anchors, not as backgrounds for text. The color block IS the element.
- Labels: Small, uppercase, in primary color or black.

ANTI-PATTERNS:
- No colors beyond the five. No green, purple, orange, gray, or any other color.
- No rounded corners on anything.
- No thin borders. Minimum 3px. The grid lines are bold.
- No gradients or shadows.
- No decorative elements. Pure geometric abstraction.
- No images or icons.
- No serif fonts.

Related prompts

Create

Build from geometric primitives. Every complex form begins with a circle, a square, a line.

Compose

Arrange elements on the grid. Alignment is meaning. Position is hierarchy.

Reduce

Remove until nothing can be removed. The essential form is what remains.

Form
Follows
Function

The objective is not decoration but communication. Every element serves purpose. Nothing is arbitrary.

Brutalist

Bauhaus Geometric

🔥82system

Generates UI inspired by the Bauhaus school — primary colors only (red, blue, yellow), geometric shapes, strict grid alignment, bold sans-serif type, and the radical clarity of form follows function.

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.

Priority Bulletin

Build for
the people

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

System Alert Active

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

Brutalist

Soviet Constructivism

🔥89system

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