Minimalsystem

Ceramic Tile

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

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.

ceramicblue whitepatternartisanalmediterranean

Added February 16, 2026 by unslop.dev

Example output

Azulejo card

β—†   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
View code
<div style="padding: 2rem; background: #f5f8fc;">
  <div style="max-width: 24rem; background: white; border: 2px solid #1e4d8c; padding: 0; box-shadow: 0 1px 4px rgba(30,77,140,0.06);">
    <div style="padding: 1.5rem;">
      <div style="text-align: center; margin-bottom: 1rem;">
        <span style="font-family: 'Palatino Linotype', 'Book Antiqua', Georgia, serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.25em; color: #7ba3d4;">β—† &nbsp; Artisan Collection &nbsp; β—†</span>
      </div>
      <h3 style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif; font-size: 1.25rem; font-weight: 600; color: #1e4d8c; margin: 0 0 0.625rem 0; text-align: center; line-height: 1.3;">The Language of Pattern</h3>
      <p style="font-family: 'Gill Sans', 'Segoe UI', 'Helvetica Neue', sans-serif; font-size: 0.8125rem; color: #4a6080; line-height: 1.65; margin: 0 0 1.25rem 0; text-align: center;">Each tile tells a story. In repetition, individual forms become something greater β€” a visual rhythm that transforms walls into canvases.</p>
      <div style="text-align: center;">
        <button style="background: #1e4d8c; color: white; border: 2px solid #1e4d8c; padding: 0.5rem 1.5rem; font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer;">Explore</button>
      </div>
    </div>
    <div style="height: 0; border-top: 2px solid #1e4d8c;"></div>
    <div style="padding: 0.75rem 1.5rem; display: flex; justify-content: center; gap: 1rem;">
      <span style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.625rem; color: #8898aa; letter-spacing: 0.1em;">Lisboa, 2026</span>
      <span style="color: #7ba3d4;">●</span>
      <span style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.625rem; color: #8898aa; letter-spacing: 0.1em;">Hand-painted</span>
    </div>
  </div>
</div>

Tile-grid stat blocks

●   ●   ●   ●   ●

348

Patterns

12

Artisans

5th

Century

View code
<div style="padding: 2rem; background: #f5f8fc;">
  <div style="max-width: 28rem;">
    <div style="text-align: center; margin-bottom: 1rem;">
      <span style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.2em; color: #7ba3d4;">● &ensp; ● &ensp; ● &ensp; ● &ensp; ●</span>
    </div>
    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;">
      <div style="background: white; border: 2px solid #1e4d8c; padding: 1.25rem; text-align: center;">
        <p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 1.75rem; font-weight: 600; color: #1e4d8c; margin: 0; line-height: 1;">348</p>
        <p style="font-family: 'Gill Sans', 'Segoe UI', sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.15em; color: #8898aa; margin: 0.5rem 0 0 0;">Patterns</p>
      </div>
      <div style="background: #1e4d8c; border: 2px solid #1e4d8c; padding: 1.25rem; text-align: center;">
        <p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 1.75rem; font-weight: 600; color: white; margin: 0; line-height: 1;">12</p>
        <p style="font-family: 'Gill Sans', 'Segoe UI', sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,255,255,0.6); margin: 0.5rem 0 0 0;">Artisans</p>
      </div>
      <div style="background: white; border: 2px solid #1e4d8c; padding: 1.25rem; text-align: center;">
        <p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 1.75rem; font-weight: 600; color: #b85c38; margin: 0; line-height: 1;">5<span style="font-size: 0.875rem; color: #8898aa;">th</span></p>
        <p style="font-family: 'Gill Sans', 'Segoe UI', sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.15em; color: #8898aa; margin: 0.5rem 0 0 0;">Century</p>
      </div>
    </div>
  </div>
</div>

Mediterranean button group

View code
<div style="padding: 2rem; background: #f5f8fc; display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: center;">
  <button style="background: #1e4d8c; color: white; border: 2px solid #1e4d8c; padding: 0.5rem 1.5rem; font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer;">Primary</button>
  <button style="background: white; color: #1e4d8c; border: 2px solid #1e4d8c; padding: 0.5rem 1.5rem; font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer;">Secondary</button>
  <button style="background: #b85c38; color: white; border: 2px solid #b85c38; padding: 0.5rem 1.5rem; font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer;">Accent</button>
  <button style="background: #f5f8fc; color: #8898aa; border: 2px solid #c8d4e0; padding: 0.5rem 1.5rem; font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; cursor: not-allowed; opacity: 0.5;">Disabled</button>
</div>

Artisan contact form

β—†   Commission Request   β—†
Response within 48 hours   ●   Handcrafted estimates
View code
<div style="padding: 2rem; background: #f5f8fc;">
  <div style="max-width: 24rem; background: white; border: 2px solid #1e4d8c; padding: 0;">
    <div style="text-align: center; padding: 1.25rem 1.5rem 0;">
      <span style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.25em; color: #7ba3d4;">β—† &nbsp; Commission Request &nbsp; β—†</span>
    </div>
    <div style="padding: 1.25rem 1.5rem 1.5rem;">
      <div style="margin-bottom: 0.875rem;">
        <label style="display: block; font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: #1e4d8c; margin-bottom: 0.375rem;">Name</label>
        <input type="text" placeholder="Your full name" style="width: 100%; box-sizing: border-box; border: 2px solid #1e4d8c; padding: 0.5rem 0.75rem; font-family: 'Gill Sans', 'Segoe UI', sans-serif; font-size: 0.8125rem; background: #f5f8fc; outline: none;" />
      </div>
      <div style="margin-bottom: 0.875rem;">
        <label style="display: block; font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: #1e4d8c; margin-bottom: 0.375rem;">Email</label>
        <input type="email" placeholder="you@example.com" style="width: 100%; box-sizing: border-box; border: 2px solid #1e4d8c; padding: 0.5rem 0.75rem; font-family: 'Gill Sans', 'Segoe UI', sans-serif; font-size: 0.8125rem; background: #f5f8fc; outline: none;" />
      </div>
      <div style="margin-bottom: 1.25rem;">
        <label style="display: block; font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: #1e4d8c; margin-bottom: 0.375rem;">Message</label>
        <textarea rows="3" placeholder="Describe your vision..." style="width: 100%; box-sizing: border-box; border: 2px solid #1e4d8c; padding: 0.5rem 0.75rem; font-family: 'Gill Sans', 'Segoe UI', sans-serif; font-size: 0.8125rem; background: #f5f8fc; outline: none; resize: vertical;"></textarea>
      </div>
      <button style="width: 100%; background: #1e4d8c; color: white; border: 2px solid #1e4d8c; padding: 0.625rem; font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer;">Submit Inquiry</button>
    </div>
    <div style="border-top: 2px solid #1e4d8c; padding: 0.625rem 1.5rem; text-align: center;">
      <span style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.5625rem; color: #8898aa; letter-spacing: 0.1em;">Response within 48 hours &ensp; ● &ensp; Handcrafted estimates</span>
    </div>
  </div>
</div>

Mosaic feature grid

●   ●   ●   ●   ●

Why Choose Artisan

β—†

Hand-Painted

Every piece carries the mark of its maker. No two are identical.

β—†

Kiln-Fired

Fired at 1,050Β°C for durability that outlasts generations.

β—†

Sustainable

Local clay, natural pigments, solar-powered kilns.

β—†

Bespoke

Custom patterns designed to your exact specifications.

View code
<div style="padding: 2rem; background: #ffffff;">
  <div style="max-width: 32rem;">
    <div style="text-align: center; margin-bottom: 1.5rem;">
      <span style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; color: #7ba3d4;">● &ensp; ● &ensp; ● &ensp; ● &ensp; ●</span>
      <h2 style="font-family: 'Palatino Linotype', 'Book Antiqua', Georgia, serif; font-size: 1.375rem; font-weight: 600; color: #1e4d8c; margin: 0.75rem 0 0 0;">Why Choose Artisan</h2>
    </div>
    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;">
      <div style="background: #f5f8fc; border: 2px solid #1e4d8c; padding: 1.5rem; text-align: center;">
        <p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 1.75rem; color: #1e4d8c; margin: 0 0 0.5rem 0;">β—†</p>
        <h3 style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.9375rem; font-weight: 600; color: #1e4d8c; margin: 0 0 0.375rem 0;">Hand-Painted</h3>
        <p style="font-family: 'Gill Sans', 'Segoe UI', sans-serif; font-size: 0.75rem; color: #4a6080; line-height: 1.5; margin: 0;">Every piece carries the mark of its maker. No two are identical.</p>
      </div>
      <div style="background: #1e4d8c; border: 2px solid #1e4d8c; padding: 1.5rem; text-align: center;">
        <p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 1.75rem; color: rgba(255,255,255,0.4); margin: 0 0 0.5rem 0;">β—†</p>
        <h3 style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.9375rem; font-weight: 600; color: white; margin: 0 0 0.375rem 0;">Kiln-Fired</h3>
        <p style="font-family: 'Gill Sans', 'Segoe UI', sans-serif; font-size: 0.75rem; color: rgba(255,255,255,0.7); line-height: 1.5; margin: 0;">Fired at 1,050Β°C for durability that outlasts generations.</p>
      </div>
      <div style="background: white; border: 2px solid #1e4d8c; padding: 1.5rem; text-align: center;">
        <p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 1.75rem; color: #b85c38; margin: 0 0 0.5rem 0;">β—†</p>
        <h3 style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.9375rem; font-weight: 600; color: #1e4d8c; margin: 0 0 0.375rem 0;">Sustainable</h3>
        <p style="font-family: 'Gill Sans', 'Segoe UI', sans-serif; font-size: 0.75rem; color: #4a6080; line-height: 1.5; margin: 0;">Local clay, natural pigments, solar-powered kilns.</p>
      </div>
      <div style="background: #f5f8fc; border: 2px solid #1e4d8c; padding: 1.5rem; text-align: center;">
        <p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 1.75rem; color: #1e4d8c; margin: 0 0 0.5rem 0;">β—†</p>
        <h3 style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.9375rem; font-weight: 600; color: #1e4d8c; margin: 0 0 0.375rem 0;">Bespoke</h3>
        <p style="font-family: 'Gill Sans', 'Segoe UI', sans-serif; font-size: 0.75rem; color: #4a6080; line-height: 1.5; margin: 0;">Custom patterns designed to your exact specifications.</p>
      </div>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI with a ceramic tile aesthetic β€” the refined decorative language of Portuguese azulejo, Moroccan zellige, and Mediterranean tilework translated into digital interfaces. Blue-and-white as the core palette, intricate border patterns, grid-based layouts that echo tile mosaics, and the artisanal warmth of centuries-old craft. Clean but decorated. Simple but rich.

VISUAL RULES:
- Background: Clean white (#ffffff) or very pale blue-white (#f5f8fc). The white of glazed ceramic.
- Primary blue: Traditional tile blue. Deep cobalt (#1e4d8c) for text and primary elements, medium blue (#3b6fb5) for accents, light blue (#7ba3d4) for secondary elements.
- Accent: Warm terracotta (#b85c38) used very sparingly β€” for small highlights, active states, or decorative accents. Like the clay showing through chipped glaze.
- Text: Deep cobalt (#1e4d8c) for headings, medium blue-gray (#4a6080) for body, light blue-gray (#8898aa) for metadata.
- Typography: Refined serif for headings: `font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif`. Clean sans-serif for body: `font-family: 'Gill Sans', 'Segoe UI', 'Helvetica Neue', sans-serif`. The contrast of old and new.
- Borders: Decorative and patterned. Use 2px solid cobalt borders on primary containers. Double borders (border + outline with gap) for emphasis: `border: 2px solid #1e4d8c; outline: 1px solid #1e4d8c; outline-offset: 3px;`
- Border radius: 0px on outer containers (tiles are square), small 4px on inner elements where needed.
- Patterns: Use CSS border patterns or repeated small decorative borders to simulate tile patterning. Diamond (β—†), cross (+), or dot (●) patterns along borders.
- Spacing: Structured grid. Consistent gaps like grout between tiles. 4px gap between tight elements, 8-12px between tiles/cards.
- Shadows: Very subtle. `box-shadow: 0 1px 3px rgba(30,77,140,0.08)`. Tiles are mostly flat.

SPECIFIC PATTERNS:
- Cards: White bg, 2px cobalt border, sharp corners. Optional decorative inner border (double border effect). Content centered and balanced.
- Buttons primary: bg-cobalt text-white, sharp corners, 2px border. Uppercase serif, tracked. Dignified and solid.
- Buttons secondary: White bg, 2px cobalt border, cobalt text. Clean outline style.
- Section headers: Centered, serif, with decorative elements (β—† or ●) flanking the text. Underlined with a blue decorative border.
- Grid layouts: Even, square-ish grid cells with consistent "grout" gaps. Like a tile mosaic layout.
- Decorative dividers: Blue patterned lines β€” `● ● ● ● ●` or `β—† ─ β—† ─ β—†` in cobalt blue.
- Labels: Uppercase serif in cobalt, very small, tracked wide.

ANTI-PATTERNS:
- No dark mode. Ceramic tile is bright and clean.
- No gradients. Tile glaze is flat color.
- No neon or electric colors. Everything is traditional, artisanal.
- No rounded corners on primary containers. Tiles are square.
- No heavy shadows. Keep things flat and tile-like.
- No sans-serif headings. Serif is required for display text.
- No monospace. This is artisanal, not technical.

Related prompts

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.

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.