Editorialsystem

Duotone

83
🔥 Certified BangerThis prompt produces genuinely distinct output

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.

duotonetwo colorgraphichigh contrastposter

Added February 16, 2026 by unslop.dev

Example output

Duotone feature card (Indigo + Pink)

Featured

Midnight Frequencies

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

View code
<div style="padding: 2rem; background: #1a0a3e;">
  <div style="max-width: 26rem; background: rgba(255,45,135,0.08); border-left: 3px solid #ff2d87; padding: 1.5rem;">
    <p style="font-family: Oswald, 'Barlow Condensed', Impact, sans-serif; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: #ff2d87; margin: 0 0 0.5rem 0;">Featured</p>
    <h3 style="font-family: Oswald, 'Barlow Condensed', Impact, sans-serif; font-size: 1.75rem; font-weight: 700; color: #ff2d87; margin: 0 0 0.75rem 0; text-transform: uppercase; line-height: 1.1;">Midnight Frequencies</h3>
    <p style="font-family: 'DM Mono', 'IBM Plex Mono', monospace; font-size: 0.8125rem; color: rgba(255,255,255,0.75); line-height: 1.6; margin: 0 0 1.25rem 0;">Curated late-night electronic sessions. Deep cuts from the archive, surfaced for the nocturnal.</p>
    <div style="display: flex; gap: 0.5rem;">
      <button style="background: #ff2d87; color: #1a0a3e; border: none; padding: 0.5rem 1.5rem; font-family: Oswald, Impact, sans-serif; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer;">Listen Now</button>
      <button style="background: transparent; color: #ff2d87; border: 2px solid #ff2d87; padding: calc(0.5rem - 2px) calc(1.5rem - 2px); font-family: Oswald, Impact, sans-serif; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer;">Save</button>
    </div>
  </div>
</div>

Stats row (Forest + Lime)

4.2K

plays

312

saves

87

shares

98%

rating

View code
<div style="padding: 2rem; background: #0a2f1f;">
  <div style="max-width: 30rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;">
    <div style="background: rgba(198,241,53,0.06); padding: 1.25rem; text-align: center; border-top: 2px solid #c6f135;">
      <p style="font-family: Oswald, Impact, sans-serif; font-size: 2.25rem; font-weight: 700; color: #c6f135; margin: 0; line-height: 1;">4.2K</p>
      <p style="font-family: 'DM Mono', monospace; font-size: 0.6875rem; color: rgba(198,241,53,0.6); margin: 0.375rem 0 0 0; text-transform: uppercase; letter-spacing: 0.1em;">plays</p>
    </div>
    <div style="background: rgba(198,241,53,0.06); padding: 1.25rem; text-align: center; border-top: 2px solid #c6f135;">
      <p style="font-family: Oswald, Impact, sans-serif; font-size: 2.25rem; font-weight: 700; color: #c6f135; margin: 0; line-height: 1;">312</p>
      <p style="font-family: 'DM Mono', monospace; font-size: 0.6875rem; color: rgba(198,241,53,0.6); margin: 0.375rem 0 0 0; text-transform: uppercase; letter-spacing: 0.1em;">saves</p>
    </div>
    <div style="background: rgba(198,241,53,0.06); padding: 1.25rem; text-align: center; border-top: 2px solid #c6f135;">
      <p style="font-family: Oswald, Impact, sans-serif; font-size: 2.25rem; font-weight: 700; color: #c6f135; margin: 0; line-height: 1;">87</p>
      <p style="font-family: 'DM Mono', monospace; font-size: 0.6875rem; color: rgba(198,241,53,0.6); margin: 0.375rem 0 0 0; text-transform: uppercase; letter-spacing: 0.1em;">shares</p>
    </div>
    <div style="background: rgba(198,241,53,0.06); padding: 1.25rem; text-align: center; border-top: 2px solid #c6f135;">
      <p style="font-family: Oswald, Impact, sans-serif; font-size: 2.25rem; font-weight: 700; color: #c6f135; margin: 0; line-height: 1;">98%</p>
      <p style="font-family: 'DM Mono', monospace; font-size: 0.6875rem; color: rgba(198,241,53,0.6); margin: 0.375rem 0 0 0; text-transform: uppercase; letter-spacing: 0.1em;">rating</p>
    </div>
  </div>
</div>

Track listing (Navy + Amber)

Now Playing

01

Signal Path

Architects of Silence

4:32
▸

Thermal Drift

Architects of Silence

6:18
03

Phase Memory

Architects of Silence

5:07
View code
<div style="padding: 2rem; background: #0a1628;">
  <div style="max-width: 28rem;">
    <h3 style="font-family: Oswald, 'Barlow Condensed', Impact, sans-serif; font-size: 1.25rem; font-weight: 700; color: #ffc233; margin: 0 0 1rem 0; text-transform: uppercase; letter-spacing: 0.1em;">Now Playing</h3>
    <div style="border-top: 2px solid #ffc233;">
      <div style="padding: 0.75rem 0; border-bottom: 1px solid rgba(255,194,51,0.15); display: flex; justify-content: space-between; align-items: center;">
        <div style="display: flex; gap: 1rem; align-items: center;">
          <span style="font-family: 'DM Mono', monospace; font-size: 0.75rem; color: rgba(255,194,51,0.4); width: 1.5rem;">01</span>
          <div>
            <p style="font-family: Oswald, Impact, sans-serif; font-size: 0.875rem; font-weight: 500; color: #ffc233; margin: 0; text-transform: uppercase;">Signal Path</p>
            <p style="font-family: 'DM Mono', monospace; font-size: 0.6875rem; color: rgba(255,255,255,0.5); margin: 0.125rem 0 0 0;">Architects of Silence</p>
          </div>
        </div>
        <span style="font-family: 'DM Mono', monospace; font-size: 0.6875rem; color: rgba(255,194,51,0.4);">4:32</span>
      </div>
      <div style="padding: 0.75rem 0; border-bottom: 1px solid rgba(255,194,51,0.15); display: flex; justify-content: space-between; align-items: center; background: rgba(255,194,51,0.06); margin: 0 -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem;">
        <div style="display: flex; gap: 1rem; align-items: center;">
          <span style="font-family: 'DM Mono', monospace; font-size: 0.75rem; color: #ffc233; width: 1.5rem;">▸</span>
          <div>
            <p style="font-family: Oswald, Impact, sans-serif; font-size: 0.875rem; font-weight: 500; color: #ffc233; margin: 0; text-transform: uppercase;">Thermal Drift</p>
            <p style="font-family: 'DM Mono', monospace; font-size: 0.6875rem; color: rgba(255,255,255,0.5); margin: 0.125rem 0 0 0;">Architects of Silence</p>
          </div>
        </div>
        <span style="font-family: 'DM Mono', monospace; font-size: 0.6875rem; color: #ffc233;">6:18</span>
      </div>
      <div style="padding: 0.75rem 0; display: flex; justify-content: space-between; align-items: center;">
        <div style="display: flex; gap: 1rem; align-items: center;">
          <span style="font-family: 'DM Mono', monospace; font-size: 0.75rem; color: rgba(255,194,51,0.4); width: 1.5rem;">03</span>
          <div>
            <p style="font-family: Oswald, Impact, sans-serif; font-size: 0.875rem; font-weight: 500; color: #ffc233; margin: 0; text-transform: uppercase;">Phase Memory</p>
            <p style="font-family: 'DM Mono', monospace; font-size: 0.6875rem; color: rgba(255,255,255,0.5); margin: 0.125rem 0 0 0;">Architects of Silence</p>
          </div>
        </div>
        <span style="font-family: 'DM Mono', monospace; font-size: 0.6875rem; color: rgba(255,194,51,0.4);">5:07</span>
      </div>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI using strict duotone color palettes — exactly two colors and their blend create the entire visual language. Inspired by Spotify's duotone treatment, silkscreen printing, and risograph layering where only two ink colors produce everything. The constraint of two colors forces bold, graphic, high-impact compositions. Every interface feels like a limited-edition print.

VISUAL RULES:
- Duotone pair: Choose two contrasting colors and use ONLY these throughout the entire interface. Example pairs:
  - Deep indigo (#1a0a3e) + Electric pink (#ff2d87)
  - Forest (#0a2f1f) + Lime (#c6f135)
  - Navy (#0a1628) + Amber (#ffc233)
  - Oxblood (#3a0a0a) + Peach (#ffb088)
- The two colors interact: One is dominant (backgrounds, large areas), the other is accent (text, highlights, interactive elements). Their mix at various opacities creates the tonal range.
- Background: The dominant color at full saturation, or very dark. Large expanses of one color.
- Text: The accent color for headings and emphasis. White (#fff) or the accent at high opacity for body text on dark dominant backgrounds. Or reverse for light sections.
- Surfaces: The dominant color at different opacities (10%, 20%, 40%) creates card and surface hierarchy against the solid background.
- Typography: Strong and graphic. `font-family: 'Oswald', 'Barlow Condensed', Impact, sans-serif` for headings — condensed, bold, impactful. `font-family: 'DM Mono', 'IBM Plex Mono', monospace` for body — clean and structured.
- Borders: The accent color. 2px solid. Used structurally to divide regions.
- Border radius: 0-4px maximum. Graphic and sharp. This is print-inspired, not app-inspired.
- Shadows: None. Flat graphic treatment. Depth through color layering only.
- Contrast: Maximum. When you only have two colors, contrast is your primary tool.

SPECIFIC PATTERNS:
- Cards: Dominant color at 15% opacity as fill on a darker background. Accent color border on one edge (left or top).
- Buttons: Accent color fill, dominant color text (or white). Or outlined in accent color. Bold and unambiguous.
- Headers: Large, condensed, all-caps in the accent color. Poster-weight impact.
- Stats/numbers: Very large, in accent color. The constraint makes big numbers incredibly striking.
- Dividers: 2px solid in accent color. Or in dominant at reduced opacity.
- Tags/pills: Small rectangles, accent border, accent text on transparent background.
- Image areas: Would be treated in duotone — here represented as solid accent-colored blocks.

ANTI-PATTERNS:
- No third color. EVER. Two colors + white/opacity variants only.
- No gradients between the two colors. Flat layering.
- No shadows.
- No rounded elements. Sharp and graphic.
- No light or airy layouts. Graphic density.
- No generic fonts. Condensed/impactful or monospace only.

Related prompts

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.

Essay

The Grid as Language

The mathematical grid is not a limitation but a framework for absolute creative freedom. Within its constraints, every element finds its precise, objective position.

Josef Müller-Brockmann demonstrated that the grid could organize the most complex information into clear, accessible form. The grid speaks.

Author

Max Keller — Zurich, 1962

Index

Typography 12
Grid Systems 24
Color Theory 8
Photography 16
Exhibition 6
Editorial

Swiss International Style

🔥88system

Generates UI in the Swiss/International Typographic Style — Helvetica, mathematical grids, asymmetric layouts, objective photography zones, and the radical clarity of the world's most influential graphic design movement.

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
Editorial

Terracotta Earth

🔥81system

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.