Brutalistsystem
Bauhaus Geometric
This prompt produces genuinely distinct output
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.
geometricprimary colorsgridsystematic
Added February 6, 2026 by unslop.dev
Example output
Grid of feature cards
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.
View code
<div style="padding: 2rem; background: white;">
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 36rem;">
<div style="border: 2px solid black; padding: 1.25rem;">
<div style="width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #e63946; margin-bottom: 1rem;"></div>
<h3 style="font-family: 'Century Gothic', 'DM Sans', sans-serif; font-size: 1rem; font-weight: 900; color: black; margin: 0 0 0.5rem 0; text-transform: uppercase;">Create</h3>
<p style="font-family: 'Century Gothic', 'DM Sans', sans-serif; font-size: 0.8125rem; color: black; line-height: 1.5; margin: 0;">Build from geometric primitives. Every complex form begins with a circle, a square, a line.</p>
</div>
<div style="border: 2px solid black; border-left: 0; padding: 1.25rem;">
<div style="width: 1.5rem; height: 1.5rem; background: #457b9d; margin-bottom: 1rem;"></div>
<h3 style="font-family: 'Century Gothic', 'DM Sans', sans-serif; font-size: 1rem; font-weight: 900; color: black; margin: 0 0 0.5rem 0; text-transform: uppercase;">Compose</h3>
<p style="font-family: 'Century Gothic', 'DM Sans', sans-serif; font-size: 0.8125rem; color: black; line-height: 1.5; margin: 0;">Arrange elements on the grid. Alignment is meaning. Position is hierarchy.</p>
</div>
<div style="border: 2px solid black; border-left: 0; padding: 1.25rem;">
<div style="width: 0; height: 0; border-left: 0.75rem solid transparent; border-right: 0.75rem solid transparent; border-bottom: 1.5rem solid #f4a261; margin-bottom: 1rem;"></div>
<h3 style="font-family: 'Century Gothic', 'DM Sans', sans-serif; font-size: 1rem; font-weight: 900; color: black; margin: 0 0 0.5rem 0; text-transform: uppercase;">Reduce</h3>
<p style="font-family: 'Century Gothic', 'DM Sans', sans-serif; font-size: 0.8125rem; color: black; line-height: 1.5; margin: 0;">Remove until nothing can be removed. The essential form is what remains.</p>
</div>
</div>
</div>Hero with geometric shapes
View code
<div style="padding: 3rem; background: white; position: relative; overflow: hidden;">
<div style="max-width: 28rem; position: relative; z-index: 1;">
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;">
<div style="width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #e63946;"></div>
<div style="width: 0.75rem; height: 0.75rem; background: #457b9d;"></div>
<div style="width: 0; height: 0; border-left: 0.375rem solid transparent; border-right: 0.375rem solid transparent; border-bottom: 0.75rem solid #f4a261;"></div>
</div>
<h1 style="font-family: 'Century Gothic', 'DM Sans', sans-serif; font-size: 2.5rem; font-weight: 900; color: black; margin: 0 0 1rem 0; line-height: 1.05; text-transform: uppercase;">Form<br>Follows<br>Function</h1>
<p style="font-family: 'Century Gothic', 'DM Sans', sans-serif; font-size: 0.9375rem; color: black; line-height: 1.6; margin: 0 0 1.5rem 0; max-width: 20rem;">The objective is not decoration but communication. Every element serves purpose. Nothing is arbitrary.</p>
<button style="background: #e63946; color: black; border: 2px solid black; padding: 0.75rem 2rem; font-family: 'Century Gothic', 'DM Sans', sans-serif; font-size: 0.875rem; font-weight: 900; text-transform: uppercase; cursor: pointer; letter-spacing: 0.05em;">Begin</button>
</div>
</div>Data table
Workshop Schedule
09:00
Typography & Grid Systems
11:00
Color Theory: Primary Palette
14:00
Material & Form Workshop
View code
<div style="padding: 2rem; background: white;">
<div style="max-width: 32rem; border: 2px solid black;">
<div style="background: black; padding: 0.625rem 1rem; display: flex; align-items: center; gap: 0.5rem;">
<div style="width: 0.625rem; height: 0.625rem; border-radius: 50%; background: #e63946;"></div>
<span style="color: white; font-family: 'Century Gothic', 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em;">Workshop Schedule</span>
</div>
<div style="display: grid; grid-template-columns: auto 1fr auto; border-bottom: 2px solid black;">
<div style="padding: 0.625rem 1rem; border-right: 2px solid black; font-family: 'Century Gothic', sans-serif; font-size: 0.75rem; font-weight: 900; color: black;">09:00</div>
<div style="padding: 0.625rem 1rem; border-right: 2px solid black; font-family: 'Century Gothic', sans-serif; font-size: 0.8125rem; font-weight: 500; color: black;">Typography & Grid Systems</div>
<div style="padding: 0.625rem 1rem; display: flex; align-items: center;"><div style="width: 0.625rem; height: 0.625rem; border-radius: 50%; background: #e63946;"></div></div>
</div>
<div style="display: grid; grid-template-columns: auto 1fr auto; border-bottom: 2px solid black;">
<div style="padding: 0.625rem 1rem; border-right: 2px solid black; font-family: 'Century Gothic', sans-serif; font-size: 0.75rem; font-weight: 900; color: black;">11:00</div>
<div style="padding: 0.625rem 1rem; border-right: 2px solid black; font-family: 'Century Gothic', sans-serif; font-size: 0.8125rem; font-weight: 500; color: black;">Color Theory: Primary Palette</div>
<div style="padding: 0.625rem 1rem; display: flex; align-items: center;"><div style="width: 0.625rem; height: 0.625rem; background: #457b9d;"></div></div>
</div>
<div style="display: grid; grid-template-columns: auto 1fr auto;">
<div style="padding: 0.625rem 1rem; border-right: 2px solid black; font-family: 'Century Gothic', sans-serif; font-size: 0.75rem; font-weight: 900; color: black;">14:00</div>
<div style="padding: 0.625rem 1rem; border-right: 2px solid black; font-family: 'Century Gothic', sans-serif; font-size: 0.8125rem; font-weight: 500; color: black;">Material & Form Workshop</div>
<div style="padding: 0.625rem 1rem; display: flex; align-items: center;"><div style="width: 0; height: 0; border-left: 0.3125rem solid transparent; border-right: 0.3125rem solid transparent; border-bottom: 0.625rem solid #f4a261;"></div></div>
</div>
</div>
</div>System prompt
Copy this into your AI system prompt
You generate UI in a Bauhaus-inspired style — the radical clarity of early 20th century modernism. Primary colors (red, blue, yellow) on black and white. Geometric shapes (circles, squares, triangles) as structural elements. Strict grid alignment. Bold sans-serif typography. Everything reduced to essential form. Form follows function, and the form is a rectangle. VISUAL RULES: - Colors: Primary palette ONLY. Red (#e63946), blue (#457b9d), yellow (#f4a261). Black (#000000) and white (#ffffff). No other colors. No tints, no pastels, no gradients. Full saturation or nothing. - Background: White or black. Cards: white with black border, or colored fill (solid red, blue, or yellow). - Text: Black on light backgrounds. White on dark/colored backgrounds. Bold is the default weight. - Typography: Geometric sans-serif. `font-family: 'DM Sans', 'Futura', 'Century Gothic', sans-serif`. Headings: text-2xl to text-4xl, font-weight: 900, uppercase optional. Body: text-sm to text-base, font-weight: 500. - Borders: 2-3px solid black. Black borders on everything. The primary structural element. - Grid: Strict. All elements align to an implicit grid. No organic flow. Columns and rows. Mathematical precision. - Shapes: Circles, squares, and rectangles as decorative and structural elements. A red circle. A blue rectangle. A yellow triangle. These ARE the design. - Spacing: Systematic. Based on a unit (4px or 8px). p-4, p-6, p-8 — nothing arbitrary. Grid gaps uniform. - Border radius: Either 0 (sharp) or 50% (perfect circle). Nothing in between. Squares or circles, no rounded rectangles. SPECIFIC PATTERNS: - Cards: White bg, 2-3px black border, p-5. May have a colored stripe (left or top) in one primary color. Content left-aligned, grid-based. - Buttons: Colored fill (red, blue, or yellow) with 2px black border. Black text. No radius. Uppercase text-sm font-bold. Hover: invert to black bg with colored text. - Geometric accents: Small colored shapes (circles, squares) used as bullets, status indicators, or decorative marks. A red circle (16px) as a list bullet. A blue square next to a heading. - Dividers: 2-3px solid black. Full width. May include a colored square or circle at the junction. - Labels: Uppercase, letter-spacing: 0.1em, small size, one primary color. ANTI-PATTERNS: - No secondary colors. No green, purple, orange (other than the specific yellow-orange), teal, etc. - No gradients. Flat color only. - No soft shadows. If any shadow, it's a solid offset like brutalist (but typically none). - No rounded rectangles. Either sharp corners (0) or perfect circles (50%). - No decorative elements beyond basic geometric shapes. - No serif fonts. No script. No monospace. Geometric sans-serif only.
Related prompts
Composition
Balance through asymmetry. Harmony through primary contrast. The grid is the universal language.
1917
Brutalist
De Stijl / Mondrian
system
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.
Meister
josef albers
Preliminary course instructor. Color theory. Interaction of color as perception.
Brutalist
Bauhaus
system
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.
System Alert Active
Production deployment pipeline requires immediate attention. 3 stages pending review.
Brutalist
Soviet Constructivism
system
Generates UI with bold red-and-black propaganda poster energy — diagonal compositions, geometric shapes, strong typography, and revolutionary graphic design. Rodchenko meets React.