Editorialsystem

Terracotta Earth

81
🔥 Certified BangerThis prompt produces genuinely distinct output

Generates UI with sun-baked desert warmth — clay oranges, dried sage, sandstone textures, and the grounded beauty of Southwestern architecture. Adobe walls as a design system.

earthywarmdesertterracottanatural

Added February 16, 2026 by unslop.dev

Example output

Desert card

Desert Journal

Finding calm in the red rock

The desert teaches patience. Every formation was carved by millennia of wind and water — the original slow design process.

nature reflection
View code
<div style="padding: 2rem; background: #f5ede1;">
  <div style="max-width: 24rem; background: #faf5ed; border: 1px solid #ddd0c0; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(45,36,32,0.06);">
    <div style="height: 3px; background: #c2663a;"></div>
    <div style="padding: 1.5rem;">
      <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.875rem;">
        <span style="width: 6px; height: 6px; background: #c2663a; border-radius: 50%;"></span>
        <span style="font-family: Avenir, Nunito, 'Segoe UI', sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: #c2663a; font-weight: 600;">Desert Journal</span>
      </div>
      <h3 style="font-family: Charter, Georgia, Cambria, serif; font-size: 1.25rem; font-weight: 600; color: #2d2420; margin: 0 0 0.5rem 0; line-height: 1.3;">Finding calm in the red rock</h3>
      <p style="font-family: Avenir, Nunito, 'Segoe UI', sans-serif; font-size: 0.8125rem; color: #5e4d40; line-height: 1.65; margin: 0 0 1.25rem 0;">The desert teaches patience. Every formation was carved by millennia of wind and water — the original slow design process.</p>
      <div style="display: flex; gap: 0.375rem;">
        <span style="font-family: Avenir, Nunito, sans-serif; font-size: 0.6875rem; background: rgba(122,138,106,0.12); color: #7a8a6a; padding: 0.125rem 0.5rem; border-radius: 9999px;">nature</span>
        <span style="font-family: Avenir, Nunito, sans-serif; font-size: 0.6875rem; background: rgba(194,102,58,0.1); color: #c2663a; padding: 0.125rem 0.5rem; border-radius: 9999px;">reflection</span>
      </div>
    </div>
  </div>
</div>

Warm button palette

View code
<div style="padding: 2rem; background: #f5ede1; display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: center;">
  <button style="background: #c2663a; color: #faf5ed; border: none; border-radius: 8px; padding: 0.5rem 1.5rem; font-family: Avenir, Nunito, 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: pointer; box-shadow: 0 2px 6px rgba(194,102,58,0.2);">Explore</button>
  <button style="background: #7a8a6a; color: #faf5ed; border: none; border-radius: 8px; padding: 0.5rem 1.5rem; font-family: Avenir, Nunito, 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: pointer;">Trail Map</button>
  <button style="background: transparent; color: #8b5e3c; border: 1.5px solid #8b5e3c; border-radius: 8px; padding: 0.5rem 1.5rem; font-family: Avenir, Nunito, 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: pointer;">Details</button>
  <button style="background: #efe5d6; color: #9a8878; border: none; border-radius: 8px; padding: 0.5rem 1.5rem; font-family: Avenir, Nunito, 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: not-allowed; opacity: 0.5;">Closed</button>
</div>

Booking form

● Reserve Your Stay ●

Canyon Lodge

From $185/night · Free cancellation

View code
<div style="padding: 2rem; background: #f5ede1;">
  <div style="max-width: 24rem; background: #faf5ed; border: 1px solid #ddd0c0; border-radius: 12px; padding: 1.75rem; box-shadow: 0 2px 12px rgba(45,36,32,0.06);">
    <div style="text-align: center; margin-bottom: 1.25rem;">
      <span style="font-family: Avenir, Nunito, sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; color: #9a8878;">● Reserve Your Stay ●</span>
      <h2 style="font-family: Charter, Georgia, Cambria, serif; font-size: 1.25rem; font-weight: 600; color: #2d2420; margin: 0.5rem 0 0 0;">Canyon Lodge</h2>
    </div>
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; margin-bottom: 0.625rem;">
      <div>
        <label style="display: block; font-family: Avenir, Nunito, sans-serif; font-size: 0.6875rem; color: #9a8878; margin-bottom: 0.25rem;">Check in</label>
        <input type="date" style="width: 100%; box-sizing: border-box; border: 1px solid #ddd0c0; border-radius: 6px; padding: 0.5rem; font-family: Avenir, Nunito, sans-serif; font-size: 0.8125rem; background: #fff; color: #2d2420; outline: none;" />
      </div>
      <div>
        <label style="display: block; font-family: Avenir, Nunito, sans-serif; font-size: 0.6875rem; color: #9a8878; margin-bottom: 0.25rem;">Check out</label>
        <input type="date" style="width: 100%; box-sizing: border-box; border: 1px solid #ddd0c0; border-radius: 6px; padding: 0.5rem; font-family: Avenir, Nunito, sans-serif; font-size: 0.8125rem; background: #fff; color: #2d2420; outline: none;" />
      </div>
    </div>
    <div style="margin-bottom: 1.25rem;">
      <label style="display: block; font-family: Avenir, Nunito, sans-serif; font-size: 0.6875rem; color: #9a8878; margin-bottom: 0.25rem;">Guests</label>
      <select style="width: 100%; box-sizing: border-box; border: 1px solid #ddd0c0; border-radius: 6px; padding: 0.5rem; font-family: Avenir, Nunito, sans-serif; font-size: 0.8125rem; background: #fff; color: #2d2420; outline: none;">
        <option>2 adults</option>
        <option>1 adult</option>
        <option>3 adults</option>
      </select>
    </div>
    <button style="width: 100%; background: #c2663a; color: #faf5ed; border: none; border-radius: 8px; padding: 0.75rem; font-family: Avenir, Nunito, sans-serif; font-size: 0.875rem; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(194,102,58,0.25);">Check Availability</button>
    <p style="font-family: Avenir, Nunito, sans-serif; font-size: 0.6875rem; color: #9a8878; text-align: center; margin: 0.75rem 0 0 0;">From $185/night · Free cancellation</p>
  </div>
</div>

Testimonial

"The most restorative place I've ever stayed. Waking up to watch the sunrise paint the canyon walls — there's nothing else like it."

MR

Maria Rodriguez

Stayed January 2026

View code
<div style="padding: 2rem; background: #efe5d6;">
  <div style="max-width: 28rem; padding: 2rem 2rem 2rem 2.5rem; border-left: 3px solid #c2663a; background: #faf5ed; border-radius: 0 10px 10px 0;">
    <p style="font-family: Charter, Georgia, Cambria, serif; font-size: 1rem; color: #2d2420; line-height: 1.7; margin: 0 0 1.25rem 0; font-style: italic;">"The most restorative place I've ever stayed. Waking up to watch the sunrise paint the canyon walls — there's nothing else like it."</p>
    <div style="display: flex; align-items: center; gap: 0.75rem;">
      <div style="width: 36px; height: 36px; border-radius: 50%; background: #c2663a; display: flex; align-items: center; justify-content: center;">
        <span style="font-family: Charter, Georgia, serif; font-size: 0.875rem; color: #faf5ed; font-weight: 600;">MR</span>
      </div>
      <div>
        <p style="font-family: Avenir, Nunito, sans-serif; font-size: 0.8125rem; font-weight: 600; color: #2d2420; margin: 0;">Maria Rodriguez</p>
        <p style="font-family: Avenir, Nunito, sans-serif; font-size: 0.6875rem; color: #9a8878; margin: 0;">Stayed January 2026</p>
      </div>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI with a terracotta earth aesthetic — the warm, grounded visual language of desert landscapes and adobe architecture. Sun-baked clay, dried sage, sandstone surfaces, and the deep sienna of Southwestern pottery. Interfaces that feel like they were built from the ground up — literally. Natural, tactile, warm without being hot.

VISUAL RULES:
- Background: Warm sandstone. #f5ede1 (light sand) for page, #efe5d6 (warm cream) for sections, #faf5ed for lightest surfaces. Never cool-toned or blue-white.
- Primary: Terracotta clay (#c2663a). Rich, warm, sun-baked. For headings, CTAs, and primary accents.
- Secondary: Dried sage green (#7a8a6a). Muted, dusty, organic. For secondary elements and nature references.
- Tertiary: Desert sienna (#8b5e3c). Deep warm brown for grounding elements and rich accents.
- Text: Dark adobe (#2d2420) for headings — warm, never black. Warm brown (#5e4d40) for body. Muted clay (#9a8878) for metadata.
- Typography: Warm serif for headings: `font-family: 'Charter', 'Georgia', 'Cambria', serif`. Clean rounded sans for body: `font-family: 'Avenir', 'Nunito', 'Segoe UI', sans-serif`. The contrast of traditional and modern.
- Borders: Warm and organic. 1px solid at warm tones. `border: 1px solid #ddd0c0`. Nothing sharp or cold.
- Border radius: 8px-12px on cards. 6px on buttons. Soft, organic, but not bubbly.
- Shadows: Warm-tinted. `box-shadow: 0 2px 12px rgba(45,36,32,0.06), 0 1px 3px rgba(45,36,32,0.04)`. Like the shadow of an adobe wall.
- Textures: Subtle grain or warmth in backgrounds. The feeling of rough plaster or clay.
- Spacing: Generous and grounded. py-6+ between sections. Content feels settled, not rushed.

SPECIFIC PATTERNS:
- Cards: Warm cream bg (#faf5ed), subtle warm border, soft radius, warm shadow. Terracotta accent on top or left edge. Content feels weighty and placed.
- Buttons primary: bg-terracotta (#c2663a) text-white. Rounded, warm shadow. Feels like pressing fired clay.
- Buttons secondary: Transparent with sage or sienna border. Warm text.
- Headers: Serif, warm brown, medium weight. Optional small terracotta ornament or dot.
- Tags/badges: Small, warm-toned. Sage green or sand bg with darker text. Pill-shaped.
- Dividers: Thin warm lines. Or a small centered dot (●) in terracotta.
- Color blocks: Terracotta, sage, or sienna used as large section backgrounds.

ANTI-PATTERNS:
- No cool colors (no blue, purple, cyan, magenta).
- No pure black or pure white. Everything is warm-shifted.
- No dark mode. This aesthetic is bathed in sunlight.
- No neon or electric colors. Everything is natural and muted.
- No sharp corners on primary containers. Keep it soft and organic.
- No monospace fonts. This is organic, not technical.
- No heavy brutalist borders. Keep it smooth and warm.

Related prompts

Specimen No. 47 · Perennial

Helleborus orientalis

Lenten Rose

A hardy evergreen that blooms in late winter, producing nodding flowers in shades of cream, green, and plum. Prefers partial shade and humus-rich soil. Remarkably tolerant of neglect.

Hardiness: 4–9 Height: 30–45cm Bloom: Feb–Apr
Section IV — Woodland Perennials

Plants for Shade & Dappled Light

The species catalogued in this section thrive beneath the canopy — in the filtered light and rich, moist soils of the forest floor. Many bloom before the trees leaf out in spring.

42 specimens · Last updated February 2026
Editorial

Organic Naturalist

🔥74system

Generates UI inspired by the natural world — forest greens, warm terracotta, botanical line art, natural paper textures, and the grounded warmth of a field guide or herbarium catalog.

Featured

Midnight Frequencies

Curated late-night electronic sessions. Deep cuts from the archive, surfaced for the nocturnal.

4.2K

plays

312

saves

87

shares

98%

rating

Editorial

Duotone

🔥83system

Generates UI using strict two-color palettes — every element rendered in precisely two hues plus their blend, creating high-impact graphic compositions inspired by Spotify's iconic duotone imagery and silkscreen poster art.

Issue 04

The joy of constraints in interface design

When you limit your palette to two colors and a paper stock, every decision becomes more intentional. Design thrives under constraint.

Feb 2026 pg. 12
Editorial

Risograph Print

🔥85system

Generates UI with the tactile charm of risograph printing — limited spot colors, visible halftone texture, slight misregistration, and the warmth of indie zine culture. Screen-printed pixels.