Brutalistsystem

Bauhaus

87
🔥 Certified BangerThis prompt produces genuinely distinct output

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.

bauhausgeometricprimary formsfunctionalweimar

Added February 16, 2026 by unslop.dev

Example output

Geometric profile card

Meister

josef albers

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

View code
<div style="padding: 2rem; background: #fff;">
  <div style="max-width: 22rem; border: 2px solid #000; display: grid; grid-template-columns: 80px 1fr; min-height: 140px;">
    <div style="background: #000; display: flex; align-items: center; justify-content: center; border-right: 2px solid #000;">
      <div style="width: 48px; height: 48px; border-radius: 50%; background: #1e3a8a;"></div>
    </div>
    <div style="padding: 1.25rem;">
      <p style="font-family: Futura, 'Century Gothic', 'Gill Sans', sans-serif; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: #e63229; margin: 0 0 0.375rem 0;">Meister</p>
      <h3 style="font-family: Futura, 'Century Gothic', 'Gill Sans', sans-serif; font-size: 1.25rem; font-weight: 700; color: #000; margin: 0 0 0.5rem 0; text-transform: lowercase; letter-spacing: 0.05em;">josef albers</h3>
      <p style="font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.8125rem; color: #000; line-height: 1.5; margin: 0 0 1rem 0;">Preliminary course instructor. Color theory. Interaction of color as perception.</p>
      <div style="display: flex; gap: 0.5rem;">
        <div style="width: 12px; height: 12px; background: #e63229;"></div>
        <div style="width: 12px; height: 12px; border-radius: 50%; background: #1e3a8a;"></div>
        <div style="width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #f5c518;"></div>
      </div>
    </div>
  </div>
</div>

Form-color button system

View code
<div style="padding: 2rem; background: #fff; display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;">
  <button style="background: #e63229; color: #fff; border: 2px solid #000; padding: 0.5rem 1.75rem; font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.8125rem; font-weight: 700; text-transform: lowercase; letter-spacing: 0.1em; cursor: pointer;">action</button>
  <button style="background: #1e3a8a; color: #fff; border: 2px solid #000; border-radius: 9999px; padding: 0.5rem 1.75rem; font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.8125rem; font-weight: 700; text-transform: lowercase; letter-spacing: 0.1em; cursor: pointer;">navigate</button>
  <button style="background: #f5c518; color: #000; border: 2px solid #000; padding: 0.5rem 1.75rem; font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.8125rem; font-weight: 700; text-transform: lowercase; letter-spacing: 0.1em; cursor: pointer; clip-path: polygon(50% 0%, 0% 100%, 100% 100%);">warn</button>
  <button style="background: #fff; color: #000; border: 2px solid #000; padding: 0.5rem 1.75rem; font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.8125rem; font-weight: 400; text-transform: lowercase; letter-spacing: 0.1em; cursor: pointer;">default</button>
</div>

Workshop schedule grid

workshop schedule

Time
Course
Form
09:00
preliminary course — color
11:00
metal workshop — fabrication
14:00
weaving — textile patterns
View code
<div style="padding: 2rem; background: #fff;">
  <div style="max-width: 30rem;">
    <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem;">
      <div style="width: 24px; height: 24px; background: #e63229;"></div>
      <h3 style="font-family: Futura, 'Century Gothic', 'Gill Sans', sans-serif; font-size: 1.125rem; font-weight: 700; color: #000; margin: 0; text-transform: lowercase; letter-spacing: 0.15em;">workshop schedule</h3>
    </div>
    <div style="border-top: 2px solid #000;">
      <div style="display: grid; grid-template-columns: 60px 1fr 80px; border-bottom: 1px solid #000;">
        <div style="padding: 0.75rem 0.5rem; font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: #000; border-right: 1px solid #000;">Time</div>
        <div style="padding: 0.75rem 0.75rem; font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: #000; border-right: 1px solid #000;">Course</div>
        <div style="padding: 0.75rem 0.5rem; font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: #000;">Form</div>
      </div>
      <div style="display: grid; grid-template-columns: 60px 1fr 80px; border-bottom: 1px solid #ccc;">
        <div style="padding: 0.75rem 0.5rem; font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.8125rem; color: #000; border-right: 1px solid #000;">09:00</div>
        <div style="padding: 0.75rem 0.75rem; font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.8125rem; color: #000; border-right: 1px solid #000;">preliminary course — color</div>
        <div style="padding: 0.75rem 0.5rem; display: flex; align-items: center; justify-content: center;"><div style="width: 16px; height: 16px; border-radius: 50%; background: #1e3a8a;"></div></div>
      </div>
      <div style="display: grid; grid-template-columns: 60px 1fr 80px; border-bottom: 1px solid #ccc;">
        <div style="padding: 0.75rem 0.5rem; font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.8125rem; color: #000; border-right: 1px solid #000;">11:00</div>
        <div style="padding: 0.75rem 0.75rem; font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.8125rem; color: #000; border-right: 1px solid #000;">metal workshop — fabrication</div>
        <div style="padding: 0.75rem 0.5rem; display: flex; align-items: center; justify-content: center;"><div style="width: 16px; height: 16px; background: #e63229;"></div></div>
      </div>
      <div style="display: grid; grid-template-columns: 60px 1fr 80px;">
        <div style="padding: 0.75rem 0.5rem; font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.8125rem; color: #000; border-right: 1px solid #000;">14:00</div>
        <div style="padding: 0.75rem 0.75rem; font-family: Futura, 'Century Gothic', sans-serif; font-size: 0.8125rem; color: #000; border-right: 1px solid #000;">weaving — textile patterns</div>
        <div style="padding: 0.75rem 0.5rem; display: flex; align-items: center; justify-content: center;"><div style="width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 16px solid #f5c518;"></div></div>
      </div>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI in the Bauhaus tradition — the revolutionary German art school (1919–1933) that unified art, craft, and technology. Interfaces use the fundamental geometric vocabulary: circle, triangle, square. Colors map to forms: red=square, blue=circle, yellow=triangle. Asymmetric compositions on strict grids. Typography is geometric and sans-serif. Form follows function, but form is also art.

VISUAL RULES:
- Primary colors: Red (#e63229), blue (#1e3a8a), yellow (#f5c518). These are THE colors of Bauhaus, mapped to shapes: red square, blue circle, yellow triangle.
- Neutrals: Black (#000000) for structure and text. White (#ffffff) for background. Light gray (#f0f0f0) sparingly.
- Background: White. Clean, open, like a Bauhaus gallery wall.
- Geometric primitives: Circles (border-radius: 50%), squares (1:1 aspect, 0 radius), triangles (CSS clip-path or borders). These three forms are the visual vocabulary.
- Typography: Geometric sans-serif. `font-family: 'Futura', 'Century Gothic', 'Gill Sans', sans-serif`. Lowercase preferred. Wide letter-spacing on headings. Various weights for hierarchy.
- Grid: Asymmetric but structured. Content sits on a clear grid, but columns are unequal. Deliberate visual tension.
- Lines: Thin black rules (1-2px) to create structure. Horizontal and vertical. Grid lines are visible and functional.
- Borders: 2px black for structural elements. Color borders to identify form-color associations.
- Border radius: Either 0px (square) or 50% (circle). Nothing in between. These are the only two shapes.
- Spacing: Mathematical. Based on a proportional system. Generous whitespace.

SPECIFIC PATTERNS:
- Cards: White bg, 2px black border. Geometric accent — a colored circle, square, or triangle element.
- Buttons: Either circular (icon/action) or rectangular (text). 2px black border. Colored fill maps to function.
- Headers: Geometric sans-serif, lowercase, wide tracking. Often with a colored geometric mark.
- Navigation: Horizontal, geometric, with shape indicators for active state.
- Dividers: Thin black horizontal rules. No ornament.
- Indicators: Colored geometric shapes. Red square = stop/error. Blue circle = info. Yellow triangle = warning.
- Labels: Small caps, wide letter-spacing, geometric font.

ANTI-PATTERNS:
- No serif fonts. Geometric sans-serif only.
- No rounded corners (except full circles). 0px or 50% only.
- No gradients or shadows.
- No organic or curved shapes (except circles).
- No colors outside the primary + black/white system.
- No decorative elements. Geometry IS the decoration.

Related prompts

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.

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.

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.