Minimalsystem

Flat Design / Metro

84
πŸ”₯ Certified BangerThis prompt produces genuinely distinct output

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.

flatmetrowindows phonetilestypography first

Added February 16, 2026 by unslop.dev

Example output

Live tile grid

dashboard

24 messages
98% uptime
3 alerts
Weekly deployment frequency increased by 12% compared to last sprint cycle. insights
7 tasks
View code
<div style="padding: 2rem; background: #000;">
  <p style="font-family: 'Segoe UI', 'Helvetica Neue', sans-serif; font-size: 2.625rem; font-weight: 300; color: #fff; margin: 0 0 1.5rem -0.125rem; text-transform: lowercase;">dashboard</p>
  <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 30rem;">
    <div style="background: #0078d4; aspect-ratio: 1; padding: 1rem; display: flex; flex-direction: column; justify-content: space-between;">
      <span style="font-family: 'Segoe UI', sans-serif; font-size: 2.5rem; font-weight: 300; color: #fff; line-height: 1;">24</span>
      <span style="font-family: 'Segoe UI', sans-serif; font-size: 0.6875rem; color: rgba(255,255,255,0.8); text-transform: lowercase;">messages</span>
    </div>
    <div style="background: #008a00; aspect-ratio: 1; padding: 1rem; display: flex; flex-direction: column; justify-content: space-between;">
      <span style="font-family: 'Segoe UI', sans-serif; font-size: 2.5rem; font-weight: 300; color: #fff; line-height: 1;">98%</span>
      <span style="font-family: 'Segoe UI', sans-serif; font-size: 0.6875rem; color: rgba(255,255,255,0.8); text-transform: lowercase;">uptime</span>
    </div>
    <div style="background: #e51400; aspect-ratio: 1; padding: 1rem; display: flex; flex-direction: column; justify-content: space-between;">
      <span style="font-family: 'Segoe UI', sans-serif; font-size: 2.5rem; font-weight: 300; color: #fff; line-height: 1;">3</span>
      <span style="font-family: 'Segoe UI', sans-serif; font-size: 0.6875rem; color: rgba(255,255,255,0.8); text-transform: lowercase;">alerts</span>
    </div>
    <div style="background: #aa00ff; grid-column: span 2; padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 5rem;">
      <span style="font-family: 'Segoe UI', sans-serif; font-size: 0.9375rem; font-weight: 400; color: #fff;">Weekly deployment frequency increased by 12% compared to last sprint cycle.</span>
      <span style="font-family: 'Segoe UI', sans-serif; font-size: 0.6875rem; color: rgba(255,255,255,0.8); text-transform: lowercase;">insights</span>
    </div>
    <div style="background: #f09609; aspect-ratio: 1; padding: 1rem; display: flex; flex-direction: column; justify-content: space-between;">
      <span style="font-family: 'Segoe UI', sans-serif; font-size: 2.5rem; font-weight: 300; color: #fff; line-height: 1;">7</span>
      <span style="font-family: 'Segoe UI', sans-serif; font-size: 0.6875rem; color: rgba(255,255,255,0.8); text-transform: lowercase;">tasks</span>
    </div>
  </div>
</div>

Typography-first navigation

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

β€Ί
View code
<div style="padding: 2rem; background: #fff;">
  <div style="max-width: 30rem;">
    <p style="font-family: 'Segoe UI', 'Helvetica Neue', sans-serif; font-size: 2.625rem; font-weight: 300; color: #000; margin: 0 0 0.25rem 0; text-transform: lowercase;">settings</p>
    <div style="display: flex; gap: 1.5rem; margin-bottom: 2rem;">
      <span style="font-family: 'Segoe UI', sans-serif; font-size: 0.9375rem; font-weight: 600; color: #0078d4; padding-bottom: 0.5rem; border-bottom: 2px solid #0078d4;">system</span>
      <span style="font-family: 'Segoe UI', sans-serif; font-size: 0.9375rem; font-weight: 400; color: #666; cursor: pointer;">devices</span>
      <span style="font-family: 'Segoe UI', sans-serif; font-size: 0.9375rem; font-weight: 400; color: #666; cursor: pointer;">network</span>
      <span style="font-family: 'Segoe UI', sans-serif; font-size: 0.9375rem; font-weight: 400; color: #666; cursor: pointer;">accounts</span>
    </div>
    <div style="display: flex; flex-direction: column; gap: 0;">
      <div style="padding: 0.875rem 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
        <div>
          <p style="font-family: 'Segoe UI', sans-serif; font-size: 0.9375rem; color: #000; margin: 0;">Display</p>
          <p style="font-family: 'Segoe UI', sans-serif; font-size: 0.75rem; color: #888; margin: 0.125rem 0 0 0;">Brightness, color, night light</p>
        </div>
        <span style="font-family: 'Segoe UI', sans-serif; color: #ccc; font-size: 0.875rem;">β€Ί</span>
      </div>
      <div style="padding: 0.875rem 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
        <div>
          <p style="font-family: 'Segoe UI', sans-serif; font-size: 0.9375rem; color: #000; margin: 0;">Sound</p>
          <p style="font-family: 'Segoe UI', sans-serif; font-size: 0.75rem; color: #888; margin: 0.125rem 0 0 0;">Volume, output, input devices</p>
        </div>
        <span style="font-family: 'Segoe UI', sans-serif; color: #ccc; font-size: 0.875rem;">β€Ί</span>
      </div>
      <div style="padding: 0.875rem 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
        <div>
          <p style="font-family: 'Segoe UI', sans-serif; font-size: 0.9375rem; color: #000; margin: 0;">Notifications</p>
          <p style="font-family: 'Segoe UI', sans-serif; font-size: 0.75rem; color: #888; margin: 0.125rem 0 0 0;">Alerts, badges, do not disturb</p>
        </div>
        <span style="font-family: 'Segoe UI', sans-serif; color: #ccc; font-size: 0.875rem;">β€Ί</span>
      </div>
      <div style="padding: 0.875rem 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: #0078d4; margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem;">
        <div>
          <p style="font-family: 'Segoe UI', sans-serif; font-size: 0.9375rem; color: #fff; margin: 0;">Power & battery</p>
          <p style="font-family: 'Segoe UI', sans-serif; font-size: 0.75rem; color: rgba(255,255,255,0.8); margin: 0.125rem 0 0 0;">Sleep, performance, usage</p>
        </div>
        <span style="font-family: 'Segoe UI', sans-serif; color: rgba(255,255,255,0.6); font-size: 0.875rem;">β€Ί</span>
      </div>
    </div>
  </div>
</div>

Flat action buttons

View code
<div style="padding: 2rem; background: #fff; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
  <button style="background: #0078d4; color: #fff; border: none; padding: 0.5rem 1.5rem; font-family: 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: pointer; text-transform: lowercase;">save changes</button>
  <button style="background: transparent; color: #0078d4; border: 2px solid #0078d4; padding: calc(0.5rem - 2px) calc(1.5rem - 2px); font-family: 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: pointer; text-transform: lowercase;">discard</button>
  <button style="background: transparent; color: #333; border: 2px solid #ccc; padding: calc(0.5rem - 2px) calc(1.5rem - 2px); font-family: 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 400; cursor: pointer; text-transform: lowercase;">cancel</button>
  <button style="background: transparent; color: #ccc; border: 2px solid #e5e5e5; padding: calc(0.5rem - 2px) calc(1.5rem - 2px); font-family: 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 400; cursor: not-allowed; text-transform: lowercase;">disabled</button>
</div>

System prompt

Copy this into your AI system prompt
You generate UI in the Metro / Flat Design aesthetic β€” Microsoft's radical departure from skeuomorphism that prioritized typography, content, and color over decoration. Full-bleed color tiles, clean type hierarchy, panoramic horizontal scrolling layouts, and the conviction that chrome should disappear entirely. Content IS the interface. Typography IS the navigation.

VISUAL RULES:
- Background: Pure white (#ffffff) or pure black (#000000). No gray. The background is a stage for content.
- Color tiles: Bold, saturated, flat. Cobalt blue (#0078d4), emerald (#008a00), crimson (#e51400), violet (#aa00ff), mango (#f09609), teal (#00aba9), magenta (#d80073). One tile, one color, one purpose.
- Text: White (#fff) on colored tiles. Black (#000) or dark gray (#333) on white backgrounds. Type is the primary visual element.
- Typography: `font-family: 'Segoe UI', 'Helvetica Neue', sans-serif`. Light weight (300) for large headings. Regular (400) for body. Semi-bold (600) for emphasis. Size hierarchy: 42px page titles, 24px section heads, 15px body, 11px captions.
- Borders: None. Zero borders. Separation through color and spacing only.
- Border radius: 0px everywhere. Sharp rectangles. Squares. No rounding.
- Shadows: None. Absolutely flat. Depth is communicated through layering and animation, not shadow.
- Spacing: Generous left margin (page titles hang off-screen to suggest panoramic scroll). 24px between tiles. Content breathes.
- Icons: Monoline, geometric, single-color. Segoe MDL2 style β€” simple symbolic glyphs.

SPECIFIC PATTERNS:
- Tiles: Colored rectangles with white text/icon. Live tiles show dynamic content. Square (1:1) or wide (2:1) aspect ratios.
- Page titles: Very large (42px), light weight, lowercase. Partially off-screen on the left to suggest horizontal extent.
- Lists: Full-width items, no dividers. Hover: subtle background color change. Active: full color highlight.
- Buttons: Flat rectangles. Outlined (2px border, no fill) or filled with tile color. No shadow, no gradient.
- Navigation: Horizontal text links at page top (pivots). Active item has underline or color change. No tabs, no boxes.
- App bar: Black or themed color bar at bottom. Icon buttons in monoline style.
- Grouping: Section headers in light-weight text, then content below. No card wrapping.

ANTI-PATTERNS:
- No gradients of any kind.
- No shadows or elevation.
- No rounded corners.
- No decorative borders or dividers.
- No textures or patterns.
- No skeuomorphic effects.
- No heavy font weights for large text. Light/thin for display sizes.
- No icons with multiple colors.

Related prompts

β—†   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.

Product

RT-20 Interface Module

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

$120.00
Minimal

Dieter Rams

πŸ”₯86system

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.

The weight of a single line

In calligraphy, a single stroke contains the full range of human expression. Press hard for conviction. Lift gently for grace. The brush knows no undo.

On practice δΊŒγ€‡δΊŒε…­
Minimal

Ink Wash Sumi-e

πŸ”₯87system

Generates UI inspired by East Asian ink wash painting β€” black ink on rice paper, calligraphic weight variation, vast emptiness as a design element, and the meditative beauty of a single brushstroke.