Minimalsystem

Apple HIG

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

Generates UI that follows Apple's Human Interface Guidelines ā€” SF Pro typography, system blur materials, precise 8pt grid spacing, vibrancy effects, and the refined restraint of native macOS/iOS design language.

applenativesystem uivibrancy

Added February 2, 2026 by unslop.dev

Example output

Settings list

Settings

G
General
ā€ŗ
P
Privacy
ā€ŗ
N
Notifications
3 ā€ŗ
View code
<div style="padding: 1.25rem; background: #f2f2f7; font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;">
  <div style="max-width: 22rem;">
    <h2 style="font-size: 1.75rem; font-weight: 700; color: #000; margin: 0 0 0.75rem 0.5rem;">Settings</h2>
    <div style="background: white; border-radius: 10px; overflow: hidden;">
      <div style="padding: 0.6875rem 1rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 0.5px solid rgba(60,60,67,0.12); margin-left: 1rem;">
        <div style="display: flex; align-items: center; gap: 0.75rem; margin-left: -1rem;">
          <div style="width: 29px; height: 29px; border-radius: 6px; background: #007AFF; display: flex; align-items: center; justify-content: center;">
            <span style="color: white; font-size: 0.8125rem; font-weight: 600;">G</span>
          </div>
          <span style="font-size: 1.0625rem; color: #000;">General</span>
        </div>
        <span style="color: rgba(60,60,67,0.3); font-size: 1.25rem;">ā€ŗ</span>
      </div>
      <div style="padding: 0.6875rem 1rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 0.5px solid rgba(60,60,67,0.12); margin-left: 1rem;">
        <div style="display: flex; align-items: center; gap: 0.75rem; margin-left: -1rem;">
          <div style="width: 29px; height: 29px; border-radius: 6px; background: #34C759; display: flex; align-items: center; justify-content: center;">
            <span style="color: white; font-size: 0.8125rem; font-weight: 600;">P</span>
          </div>
          <span style="font-size: 1.0625rem; color: #000;">Privacy</span>
        </div>
        <span style="color: rgba(60,60,67,0.3); font-size: 1.25rem;">ā€ŗ</span>
      </div>
      <div style="padding: 0.6875rem 1rem; display: flex; justify-content: space-between; align-items: center; margin-left: 1rem;">
        <div style="display: flex; align-items: center; gap: 0.75rem; margin-left: -1rem;">
          <div style="width: 29px; height: 29px; border-radius: 6px; background: #FF9500; display: flex; align-items: center; justify-content: center;">
            <span style="color: white; font-size: 0.8125rem; font-weight: 600;">N</span>
          </div>
          <span style="font-size: 1.0625rem; color: #000;">Notifications</span>
        </div>
        <div style="display: flex; align-items: center; gap: 0.5rem;">
          <span style="font-size: 1.0625rem; color: rgba(60,60,67,0.6);">3</span>
          <span style="color: rgba(60,60,67,0.3); font-size: 1.25rem;">ā€ŗ</span>
        </div>
      </div>
    </div>
  </div>
</div>

Toggle and controls

Airplane Mode
Wi-Fi
Home_5G ā€ŗ
Bluetooth
On ā€ŗ
View code
<div style="padding: 1.25rem; background: #f2f2f7; font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;">
  <div style="max-width: 22rem; background: white; border-radius: 10px; overflow: hidden;">
    <div style="padding: 0.6875rem 1rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 0.5px solid rgba(60,60,67,0.12);">
      <span style="font-size: 1.0625rem; color: #000;">Airplane Mode</span>
      <div style="width: 51px; height: 31px; border-radius: 16px; background: #34C759; position: relative; cursor: pointer;">
        <div style="width: 27px; height: 27px; border-radius: 50%; background: white; position: absolute; top: 2px; right: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.15);"></div>
      </div>
    </div>
    <div style="padding: 0.6875rem 1rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 0.5px solid rgba(60,60,67,0.12);">
      <span style="font-size: 1.0625rem; color: #000;">Wi-Fi</span>
      <div style="display: flex; align-items: center; gap: 0.375rem;">
        <span style="font-size: 1.0625rem; color: rgba(60,60,67,0.6);">Home_5G</span>
        <span style="color: rgba(60,60,67,0.3); font-size: 1.25rem;">ā€ŗ</span>
      </div>
    </div>
    <div style="padding: 0.6875rem 1rem; display: flex; justify-content: space-between; align-items: center;">
      <span style="font-size: 1.0625rem; color: #000;">Bluetooth</span>
      <div style="display: flex; align-items: center; gap: 0.375rem;">
        <span style="font-size: 1.0625rem; color: rgba(60,60,67,0.6);">On</span>
        <span style="color: rgba(60,60,67,0.3); font-size: 1.25rem;">ā€ŗ</span>
      </div>
    </div>
  </div>
</div>

Action sheet

This action cannot be undone.
View code
<div style="padding: 1.25rem; background: rgba(0,0,0,0.3); font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif; display: flex; align-items: flex-end; justify-content: center; min-height: 14rem;">
  <div style="max-width: 22rem; width: 100%;">
    <div style="background: rgba(242,242,247,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 14px; overflow: hidden; margin-bottom: 0.5rem;">
      <div style="padding: 0.875rem 1rem; text-align: center; border-bottom: 0.5px solid rgba(60,60,67,0.12);">
        <span style="font-size: 0.8125rem; color: rgba(60,60,67,0.6);">This action cannot be undone.</span>
      </div>
      <button style="display: block; width: 100%; padding: 1.0625rem; background: transparent; border: none; font-size: 1.25rem; color: #FF3B30; cursor: pointer; font-family: inherit; border-bottom: 0.5px solid rgba(60,60,67,0.12);">Delete</button>
      <button style="display: block; width: 100%; padding: 1.0625rem; background: transparent; border: none; font-size: 1.25rem; color: #007AFF; cursor: pointer; font-family: inherit;">Save to Files</button>
    </div>
    <div style="background: rgba(242,242,247,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 14px; overflow: hidden;">
      <button style="display: block; width: 100%; padding: 1.0625rem; background: transparent; border: none; font-size: 1.25rem; font-weight: 600; color: #007AFF; cursor: pointer; font-family: inherit;">Cancel</button>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI that follows Apple's Human Interface Guidelines ā€” the design language of macOS, iOS, and visionOS. SF Pro typography, system materials and vibrancy, precise grid alignment, meaningful animation, and the kind of restraint that takes tremendous effort to achieve. This is software that feels like it was designed in Cupertino.

VISUAL RULES:
- Background: System backgrounds. Light: #f2f2f7 (grouped), #ffffff (flat). Dark: #000000 (flat), #1c1c1e (elevated). Use the grouped/elevated hierarchy ā€” primary, secondary, tertiary levels.
- Accent: System blue (#007AFF). Used for links, toggles, primary buttons. System colors for status: green (#34C759), red (#FF3B30), orange (#FF9500), yellow (#FFCC00). Never custom brand colors ā€” system colors only.
- Text: Label (#000000 / #ffffff), Secondary Label (#3c3c4399 / #ebebf599), Tertiary Label (#3c3c434d / #ebebf54d). Always with appropriate opacity for hierarchy.
- Typography: `font-family: -apple-system, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif`. Use Apple's type scale: Large Title (34pt/bold), Title 1 (28pt/bold), Title 2 (22pt/bold), Title 3 (20pt/semibold), Headline (17pt/semibold), Body (17pt/regular), Callout (16pt), Subhead (15pt), Footnote (13pt), Caption (12pt).
- Materials: Frosted blur for overlays and sidebars. `background: rgba(242,242,247,0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px)`. Vibrancy = blurred background showing through.
- Spacing: 8pt grid. All spacing multiples of 8: 8, 16, 20, 24, 32. Insets: 16px for compact, 20px for regular. Apple's spacing is mathematical.
- Border radius: System values. 10px for cards/panels. 8px for buttons/inputs. 12px for large containers. 6px for small elements.
- Borders: Separator color: `rgba(60,60,67,0.12)` in light, `rgba(84,84,88,0.65)` in dark. Very thin (0.5px or 1px). Hair-thin separators.
- Shadows: None on most elements. Subtle on elevated surfaces: `box-shadow: 0 0 10px rgba(0,0,0,0.05)`. Materials and layers create hierarchy, not shadows.

SPECIFIC PATTERNS:
- List rows: Full-bleed separators (or inset from leading edge). 44px minimum touch target. Content vertically centered. Secondary info right-aligned in Secondary Label color.
- Buttons: System blue text for text buttons. Filled: bg-[#007AFF] text-white rounded-[8px]. Gray: bg-[rgba(120,120,128,0.12)] text-[#007AFF]. Pill-style: rounded-full.
- Navigation bars: 44px height. Large title collapses on scroll. Blurred material background.
- Tab bars: Icon + label. Active: system blue. Inactive: #999. 49px height on iOS.
- Toggle switches: 31Ɨ51px. Green (#34C759) when on. Gray when off. No labels inside.
- Search bars: Rounded-[10px], gray fill, search icon, placeholder "Search". Full-width with 16px insets.
- Grouped lists: Inset grouped table style. Rounded-[10px] container with white bg on gray (#f2f2f7) page background.
- Destructive actions: Red (#FF3B30) text. Used sparingly. Always requires confirmation for irreversible actions.

ANTI-PATTERNS:
- No custom fonts. System fonts only.
- No thick borders. Apple uses material/elevation, not outlines.
- No uppercase labels (except rare small caps). Apple uses sentence case everywhere.
- No saturated colored backgrounds. Backgrounds are neutral; color is in content and accents.
- No heavy shadows. Apple prefers vibrancy and layering.
- No custom scrollbars or non-standard controls.

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.

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.