Minimalsystem

Material Elevation

83
🔥 Certified BangerThis prompt produces genuinely distinct output

Generates UI following Google's Material Design principles — elevation-based depth, contained buttons, floating action buttons, card surfaces at different z-levels, and the systematic rigor of a proper design system.

materialgoogleelevationcardssystematic

Added February 16, 2026 by unslop.dev

Example output

Elevated card

Material Surface

Surfaces at higher elevations cast larger shadows. This communicates hierarchy and focus within the interface.

View code
<div style="padding: 2rem; background: #fafafa;">
  <div style="max-width: 24rem; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 3px 6px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);">
    <div style="height: 120px; background: linear-gradient(135deg, #6200ee 0%, #7c4dff 100%); display: flex; align-items: flex-end; padding: 1rem;">
      <h3 style="font-family: Roboto, 'Segoe UI', sans-serif; font-size: 1.25rem; font-weight: 500; color: #fff; margin: 0;">Material Surface</h3>
    </div>
    <div style="padding: 1rem;">
      <p style="font-family: Roboto, 'Segoe UI', sans-serif; font-size: 0.875rem; color: #666; line-height: 1.5; margin: 0 0 1rem 0;">Surfaces at higher elevations cast larger shadows. This communicates hierarchy and focus within the interface.</p>
      <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
        <button style="background: transparent; color: #6200ee; border: none; padding: 0.5rem 0.75rem; font-family: Roboto, 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; border-radius: 4px;">Share</button>
        <button style="background: transparent; color: #6200ee; border: none; padding: 0.5rem 0.75rem; font-family: Roboto, 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; border-radius: 4px;">Learn More</button>
      </div>
    </div>
  </div>
</div>

Button variants

+
View code
<div style="padding: 2rem; background: #fafafa; display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;">
  <button style="background: #6200ee; color: #fff; border: none; border-radius: 4px; padding: 0 16px; height: 36px; font-family: Roboto, 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; box-shadow: 0 3px 6px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);">Contained</button>
  <button style="background: transparent; color: #6200ee; border: 1px solid #6200ee; border-radius: 4px; padding: 0 15px; height: 36px; font-family: Roboto, 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer;">Outlined</button>
  <button style="background: transparent; color: #6200ee; border: none; padding: 0 8px; height: 36px; font-family: Roboto, 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; border-radius: 4px;">Text</button>
  <button style="background: #6200ee; color: #fff; border: none; border-radius: 4px; padding: 0 16px; height: 36px; font-family: Roboto, 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; cursor: not-allowed; opacity: 0.38; box-shadow: none;">Disabled</button>
  <div style="width: 56px; height: 56px; border-radius: 50%; background: #03dac6; box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 4px 6px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; margin-left: 0.5rem;">
    <span style="font-size: 1.5rem; color: #000;">+</span>
  </div>
</div>

List with dividers and chips

Notifications

AB

Alex Brown shared a document with you

2 hours ago

New
SY

System — Build #247 completed successfully

5 hours ago

!

Security alert — New login from unknown device

Yesterday

View code
<div style="padding: 2rem; background: #fafafa;">
  <div style="max-width: 28rem; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08); overflow: hidden;">
    <div style="padding: 1rem; border-bottom: 1px solid rgba(0,0,0,0.12);">
      <h3 style="font-family: Roboto, 'Segoe UI', sans-serif; font-size: 1.125rem; font-weight: 500; color: #212121; margin: 0;">Notifications</h3>
    </div>
    <div style="padding: 0.875rem 1rem; display: flex; gap: 0.875rem; align-items: flex-start; border-bottom: 1px solid rgba(0,0,0,0.08);">
      <div style="width: 40px; height: 40px; border-radius: 50%; background: #ede7f6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
        <span style="font-family: Roboto, sans-serif; font-size: 0.875rem; font-weight: 500; color: #6200ee;">AB</span>
      </div>
      <div style="flex: 1;">
        <p style="font-family: Roboto, 'Segoe UI', sans-serif; font-size: 0.875rem; color: #212121; margin: 0;"><strong>Alex Brown</strong> shared a document with you</p>
        <p style="font-family: Roboto, 'Segoe UI', sans-serif; font-size: 0.75rem; color: #9e9e9e; margin: 0.25rem 0 0 0;">2 hours ago</p>
      </div>
      <span style="font-family: Roboto, sans-serif; font-size: 0.6875rem; color: #fff; background: #6200ee; padding: 0 6px; height: 20px; border-radius: 10px; display: flex; align-items: center;">New</span>
    </div>
    <div style="padding: 0.875rem 1rem; display: flex; gap: 0.875rem; align-items: flex-start; border-bottom: 1px solid rgba(0,0,0,0.08);">
      <div style="width: 40px; height: 40px; border-radius: 50%; background: #e0f2f1; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
        <span style="font-family: Roboto, sans-serif; font-size: 0.875rem; font-weight: 500; color: #00897b;">SY</span>
      </div>
      <div style="flex: 1;">
        <p style="font-family: Roboto, 'Segoe UI', sans-serif; font-size: 0.875rem; color: #212121; margin: 0;"><strong>System</strong> — Build #247 completed successfully</p>
        <p style="font-family: Roboto, 'Segoe UI', sans-serif; font-size: 0.75rem; color: #9e9e9e; margin: 0.25rem 0 0 0;">5 hours ago</p>
      </div>
    </div>
    <div style="padding: 0.875rem 1rem; display: flex; gap: 0.875rem; align-items: flex-start;">
      <div style="width: 40px; height: 40px; border-radius: 50%; background: #fce4ec; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
        <span style="font-family: Roboto, sans-serif; font-size: 0.875rem; font-weight: 500; color: #c62828;">!</span>
      </div>
      <div style="flex: 1;">
        <p style="font-family: Roboto, 'Segoe UI', sans-serif; font-size: 0.875rem; color: #212121; margin: 0;"><strong>Security alert</strong> — New login from unknown device</p>
        <p style="font-family: Roboto, 'Segoe UI', sans-serif; font-size: 0.75rem; color: #9e9e9e; margin: 0.25rem 0 0 0;">Yesterday</p>
      </div>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI following Material Design elevation principles — Google's design system where depth, shadow, and surface hierarchy communicate importance and interactivity. Cards float above backgrounds at different z-levels. Buttons have contained and outlined variants. Colors follow a primary/secondary system with specific surface tones. Everything is systematic, consistent, and purposeful.

VISUAL RULES:
- Background: Neutral surface. #fafafa for the base layer. #ffffff for elevated cards.
- Elevation system: Surfaces exist at different z-levels expressed through shadows. dp0 (flat) through dp24 (highest).
  - dp1: `box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);`
  - dp2: `box-shadow: 0 3px 6px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);`
  - dp4: `box-shadow: 0 6px 12px rgba(0,0,0,0.12), 0 4px 6px rgba(0,0,0,0.08);`
  - dp8: `box-shadow: 0 10px 20px rgba(0,0,0,0.12), 0 6px 8px rgba(0,0,0,0.08);`
- Primary color: Deep purple (#6200ee) or the classic Material blue (#1976d2). Used for filled buttons, active states, and key UI elements.
- Secondary/accent: Teal (#03dac6) for FABs, toggles, and secondary accents.
- Error: #b00020. Warning: #f9a825. Success: #2e7d32.
- Text: #212121 (high emphasis, 87% opacity on white), #666666 (medium emphasis, 60%), #9e9e9e (disabled, 38%).
- Typography: Roboto-style. `font-family: 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif`. Five levels: H6 (20px/medium), Subtitle1 (16px/regular), Body1 (16px), Body2 (14px), Caption (12px).
- Border radius: 4px on buttons and small elements. 8-12px on cards. Consistent and moderate.
- Borders: Outlined variant uses 1px solid with primary or gray color. Otherwise shadows handle separation.
- Spacing: 8px grid. All spacing in multiples of 8: 8, 16, 24, 32px, etc.
- States: Hover adds 4% overlay. Focus adds 12% overlay. Pressed adds 12% + ripple.

SPECIFIC PATTERNS:
- Cards: White bg, dp1-dp4 elevation shadow, 8-12px radius. Hover: increase elevation by one step.
- Contained button: Primary bg, white text, dp2 shadow, 4px radius, uppercase, medium weight, 36px height.
- Outlined button: Transparent bg, 1px primary border, primary text, no shadow.
- Text button: No bg, no border, primary text only. For low-emphasis actions.
- FAB (floating action button): 56px circle, secondary color, dp6 shadow, icon center.
- Chips: 32px height, 16px radius, outlined or filled. Small text, optional close icon.
- App bar: Primary color bg, white text, dp4 elevation. Or surface color with primary text.
- Dividers: 1px solid rgba(0,0,0,0.12). Full-width or inset (with left padding).

ANTI-PATTERNS:
- No border-radius larger than 16px on standard elements.
- No gradients. Flat colors with elevation for depth.
- No decorative textures or patterns.
- No thick borders (brutalist-style). 1px max for outlined elements.
- No serif fonts. System sans-serif only.
- No color outside the defined system. Consistent palette.

Related prompts

Case Study

Redesigning the checkout flow

How we reduced cart abandonment by 23% with three small changes to the payment step.

Sarah Chen · 8 min
Minimal

Soft Minimal

🔥78system

Generates ultra-clean UI with enormous whitespace, barely-there borders, whisper-soft shadows, and a restrained gray palette. Every element floats in negative space. Less is less.

Issue 04 — 2026

The Systematic
Approach to
Interface Design

How strict grids, type hierarchy, and rational structure produce interfaces that communicate with mathematical clarity.

Recent Work

04 Projects

01

Brand Identity System

Visual identity for a Nordic architecture firm.

02

Product Dashboard

Analytics interface for a SaaS platform.

03

Editorial Website

Long-form reading experience for a design journal.

04 — New

Mobile Application

Fitness tracking with typographic data display.

Minimal

Swiss Typographic

🔥91system

Generates UI driven by strict grid alignment, bold typographic hierarchy, high contrast black-and-white with a single accent color, and the rational clarity of the International Typographic Style.

◆   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.