Minimalsystem

Dieter Rams

86
šŸ”„ Certified BangerThis prompt produces genuinely distinct output

Generates UI inspired by Dieter Rams' 10 Principles of Good Design — extreme functional minimalism, Braun-era industrial aesthetics, deliberate restraint, and the conviction that less but better is the only way.

braunfunctionalindustrialless is moregerman

Added February 16, 2026 by unslop.dev

Example output

Functional product card

Product

RT-20 Interface Module

A single-purpose module for routing audio signals. Four inputs, one output. No unnecessary features.

$120.00
View code
<div style="padding: 2rem; background: #f5f5f3;">
  <div style="max-width: 24rem; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04); padding: 1.5rem;">
    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
      <div>
        <p style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #999; margin: 0 0 0.375rem 0;">Product</p>
        <h3 style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 15px; font-weight: 500; color: #1a1a1a; margin: 0;">RT-20 Interface Module</h3>
      </div>
      <span style="width: 8px; height: 8px; border-radius: 50%; background: #2d8c3c; flex-shrink: 0; margin-top: 0.375rem;"></span>
    </div>
    <p style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #666; line-height: 1.6; margin: 0 0 1.25rem 0;">A single-purpose module for routing audio signals. Four inputs, one output. No unnecessary features.</p>
    <div style="display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid #e5e5e5;">
      <span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a;">$120<span style="font-size: 11px; color: #999;">.00</span></span>
      <button style="background: transparent; color: #1a1a1a; border: 1px solid #ccc; border-radius: 2px; padding: 0.375rem 1rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 400; cursor: pointer;">Details</button>
    </div>
  </div>
</div>

Control buttons

View code
<div style="padding: 2rem; background: #fff; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
  <button style="background: transparent; color: #1a1a1a; border: 1px solid #ccc; border-radius: 2px; padding: 0.375rem 1rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 400; cursor: pointer;">Primary</button>
  <button style="background: transparent; color: #666; border: 1px solid #ddd; border-radius: 2px; padding: 0.375rem 1rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 400; cursor: pointer;">Secondary</button>
  <button style="background: transparent; color: #cc3333; border: 1px solid rgba(204,51,51,0.3); border-radius: 2px; padding: 0.375rem 1rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 400; cursor: pointer;">Remove</button>
  <button style="background: transparent; color: #ccc; border: 1px solid #e5e5e5; border-radius: 2px; padding: 0.375rem 1rem; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 400; cursor: not-allowed;">Disabled</button>
</div>

System status panel

System Status

API Gateway
12ms
Database Cluster
34ms
Search Index
degraded
Cache Layer
2ms
View code
<div style="padding: 2rem; background: #f5f5f3;">
  <div style="max-width: 28rem; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);">
    <div style="padding: 1rem 1.5rem; border-bottom: 1px solid #e5e5e5;">
      <p style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #999; margin: 0;">System Status</p>
    </div>
    <div style="padding: 0.875rem 1.5rem; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
      <span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a;">API Gateway</span>
      <div style="display: flex; align-items: center; gap: 0.5rem;">
        <span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: #999;">12ms</span>
        <span style="width: 8px; height: 8px; border-radius: 50%; background: #2d8c3c;"></span>
      </div>
    </div>
    <div style="padding: 0.875rem 1.5rem; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
      <span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a;">Database Cluster</span>
      <div style="display: flex; align-items: center; gap: 0.5rem;">
        <span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: #999;">34ms</span>
        <span style="width: 8px; height: 8px; border-radius: 50%; background: #2d8c3c;"></span>
      </div>
    </div>
    <div style="padding: 0.875rem 1.5rem; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
      <span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a;">Search Index</span>
      <div style="display: flex; align-items: center; gap: 0.5rem;">
        <span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: #e08030;">degraded</span>
        <span style="width: 8px; height: 8px; border-radius: 50%; background: #e08030;"></span>
      </div>
    </div>
    <div style="padding: 0.875rem 1.5rem; display: flex; justify-content: space-between; align-items: center;">
      <span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a;">Cache Layer</span>
      <div style="display: flex; align-items: center; gap: 0.5rem;">
        <span style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: #999;">2ms</span>
        <span style="width: 8px; height: 8px; border-radius: 50%; background: #2d8c3c;"></span>
      </div>
    </div>
  </div>
</div>

Precise data grid

Quarterly Output

Module
Units
Revenue
Status
RT-20
2,418
$290k
active
SK-4
847
$102k
eol
View code
<div style="padding: 2rem; background: #fff;">
  <div style="max-width: 30rem;">
    <p style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #999; margin: 0 0 1rem 0;">Quarterly Output</p>
    <div style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 0; border-top: 1px solid #e5e5e5;">
      <div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid #e5e5e5;">Module</div>
      <div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: #999; text-align: right; border-bottom: 1px solid #e5e5e5;">Units</div>
      <div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: #999; text-align: right; border-bottom: 1px solid #e5e5e5;">Revenue</div>
      <div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; color: #999; text-align: right; border-bottom: 1px solid #e5e5e5;">Status</div>
      <div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a; border-bottom: 1px solid #f0f0f0;">RT-20</div>
      <div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a; text-align: right; border-bottom: 1px solid #f0f0f0;">2,418</div>
      <div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a; text-align: right; border-bottom: 1px solid #f0f0f0;">$290k</div>
      <div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #2d8c3c; text-align: right; border-bottom: 1px solid #f0f0f0;">active</div>
      <div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a;">SK-4</div>
      <div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a; text-align: right;">847</div>
      <div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #1a1a1a; text-align: right;">$102k</div>
      <div style="padding: 0.625rem 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; color: #cc3333; text-align: right;">eol</div>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI inspired by Dieter Rams and the Braun design philosophy — the belief that good design is as little design as possible. Extreme functional minimalism, every element serves a purpose, nothing decorative, nothing arbitrary. The aesthetic of 1960s Braun products: white and light gray surfaces, precise grid alignment, functional color (green for on, red for off), and the quiet confidence of objects designed to disappear into usefulness.

VISUAL RULES:
- Background: Pure white (#ffffff) or very light warm gray (#f5f5f3). The quietest possible canvas.
- Surfaces: White (#ffffff) with the subtlest possible shadow. `box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04)`. Barely there.
- Text: Near-black (#1a1a1a) for primary. Medium gray (#666666) for secondary. Light gray (#999999) for tertiary.
- Functional color: Green (#2d8c3c) for active/on states. Red (#cc3333) for off/error. Orange (#e08030) for attention. Colors are ONLY used functionally — they indicate state, never decorate.
- No accent color for branding. The design IS the brand.
- Typography: Clean, precise Swiss sans-serif. `font-family: 'Helvetica Neue', 'Arial', sans-serif`. Regular weight for body, medium for headings. Never bold. Precise size hierarchy: 11px labels, 13px body, 15px subheads, 20px headings.
- Borders: 1px solid #e5e5e5. Extremely thin and subtle. Only where functionally necessary to separate regions.
- Border radius: 4px maximum. Subtle, functional rounding. Usually 2px.
- Spacing: Mathematical precision. 8px grid. Consistent margins. Symmetrical where possible. Alignment is sacred.
- Grid: Strict columnar alignment. Every element aligns to something else. Visual order through structure.

SPECIFIC PATTERNS:
- Cards: White, minimal shadow, 2px radius. Content follows a strict typographic grid inside. No decorative elements.
- Buttons: Very restrained. Small, 1px border, no fill (outlined). Or: very subtle gray fill. Text is regular weight, not bold. Buttons are understated — the content is important, not the chrome.
- Inputs: 1px border, white bg, 2px radius. Focus: border becomes slightly darker. That's it.
- Status indicators: Small (8px) circles. Green/red/orange. Functional signaling only.
- Labels: 11px, uppercase, letter-spacing 0.05em, #999. Small and out of the way.
- Numbers/data: Clean, regular weight, right-aligned in columns. Units slightly smaller and lighter.
- Dividers: 1px #e5e5e5. Used sparingly between functional groups.

ANTI-PATTERNS:
- No decoration. No ornament. No flair. No personality.
- No bold text. Medium weight maximum.
- No large text. Nothing above 24px.
- No color for decoration. Color = function only.
- No thick borders. 1px maximum.
- No heavy shadows. Near-invisible separation.
- No rounded corners above 4px.
- No serif fonts. No display fonts. Helvetica is the answer.
- No icons unless absolutely necessary for comprehension.

Related prompts

ā—‹

Birch Side Table

€189

Solid birch with oil finish. Ƙ 45 cm.

In Stock Sustainable
New Arrivals

Designed for everyday living

Simple, considered objects that bring warmth and function to your home. Each piece is made from responsibly sourced materials.

Minimal

Nordic Scandi

šŸ”„68system

Generates UI with Scandinavian design sensibility — muted pastels, warm wood tones, functional beauty, clean lines, and the cozy pragmatism of a well-designed Copenhagen apartment.

ā—†   Artisan Collection   ā—†

The Language of Pattern

Each tile tells a story. In repetition, individual forms become something greater — a visual rhythm that transforms walls into canvases.

Lisboa, 2026 ā— Hand-painted
ā—   ā—   ā—   ā—   ā—

348

Patterns

12

Artisans

5th

Century

Minimal

Ceramic Tile

šŸ”„77system

Generates UI inspired by Portuguese azulejo and Moroccan zellige — intricate blue-and-white patterns, decorative borders, tile-grid layouts, and the handcrafted warmth of traditional ceramic artistry.

dashboard

24 messages
98% uptime
3 alerts
Weekly deployment frequency increased by 12% compared to last sprint cycle. insights
7 tasks

settings

system devices network accounts

Display

Brightness, color, night light

›

Sound

Volume, output, input devices

›

Notifications

Alerts, badges, do not disturb

›

Power & battery

Sleep, performance, usage

›
Minimal

Flat Design / Metro

šŸ”„84system

Generates UI in Microsoft's Metro / Modern UI flat design language — typography-first layouts, full-bleed color tiles, zero ornamentation, content over chrome, and the radical simplicity that killed the skeuomorphic era.