Retrosystem

Pixel Retro

🔥 Certified BangerThis prompt produces genuinely distinct output

Generates UI with 8-bit game aesthetics — pixelated borders, chunky elements, limited color palettes, bitmap-style typography, and the nostalgic charm of early gaming interfaces.

8 bitpixelgamingnostalgic

Added February 8, 2026 by unslop.dev

Example output

Game-style dialog box

★ Quest Log

▶ Find the Lost Artifact

The Elder spoke of a relic hidden deep within the Crystal Caves. Bring it back before moonrise.

Deliver the Message

Gather 10 Herbs [DONE]

View code

<div style="padding: 2rem; background: #1a1c2c;">
  <div style="max-width: 22rem; background: #333c57; border: 4px solid #94b0c2; box-shadow: 4px 4px 0 #0a0a14;">
    <div style="background: #5d275d; padding: 0.375rem 0.75rem; border-bottom: 4px solid #94b0c2;">
      <span style="font-family: 'Courier New', monospace; font-size: 0.6875rem; color: #ffcd75; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em;">★ Quest Log</span>
    </div>
    <div style="padding: 1rem;">
      <div style="margin-bottom: 1rem;">
        <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
          <span style="font-family: 'Courier New', monospace; font-size: 0.75rem; color: #ffcd75;">▶</span>
          <span style="font-family: 'Courier New', monospace; font-size: 0.6875rem; color: #f4f4f4; font-weight: bold;">Find the Lost Artifact</span>
        </div>
        <p style="font-family: 'Courier New', monospace; font-size: 0.625rem; color: #94b0c2; margin: 0 0 0 1.25rem; line-height: 1.6;">The Elder spoke of a relic hidden deep within the Crystal Caves. Bring it back before moonrise.</p>
      </div>
      <div style="margin-bottom: 1rem;">
        <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
          <span style="font-family: 'Courier New', monospace; font-size: 0.75rem; color: #94b0c2;">&nbsp;</span>
          <span style="font-family: 'Courier New', monospace; font-size: 0.6875rem; color: #c2c3c7;">Deliver the Message</span>
        </div>
      </div>
      <div style="display: flex; align-items: center; gap: 0.5rem;">
        <span style="font-family: 'Courier New', monospace; font-size: 0.75rem; color: #94b0c2;">&nbsp;</span>
        <span style="font-family: 'Courier New', monospace; font-size: 0.6875rem; color: #5f574f; text-decoration: line-through;">Gather 10 Herbs</span>
        <span style="font-family: 'Courier New', monospace; font-size: 0.5625rem; color: #38b764; font-weight: bold;">[DONE]</span>
      </div>
    </div>
  </div>
</div>

Character stats panel

ARIA LV.24 ♥♥♥♡

HP 87/120

MP 34/60

EXP 2840/4000

ATK: 42 DEF: 38 SPD: 56 LCK: 21

View code

<div style="padding: 2rem; background: #1a1c2c;">
  <div style="max-width: 18rem; background: #333c57; border: 4px solid #94b0c2; box-shadow: 4px 4px 0 #0a0a14;">
    <div style="background: #b13e53; padding: 0.375rem 0.75rem; border-bottom: 4px solid #94b0c2; display: flex; justify-content: space-between;">
      <span style="font-family: 'Courier New', monospace; font-size: 0.6875rem; color: #f4f4f4; font-weight: bold;">ARIA LV.24</span>
      <span style="font-family: 'Courier New', monospace; font-size: 0.6875rem; color: #ffcd75;">♥♥♥♡</span>
    </div>
    <div style="padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem;">
      <div>
        <div style="display: flex; justify-content: space-between; margin-bottom: 0.25rem;">
          <span style="font-family: 'Courier New', monospace; font-size: 0.625rem; color: #94b0c2;">HP</span>
          <span style="font-family: 'Courier New', monospace; font-size: 0.625rem; color: #f4f4f4;">87/120</span>
        </div>
        <div style="background: #1a1c2c; height: 8px; border: 2px solid #5f574f;">
          <div style="width: 72%; height: 100%; background: #38b764;"></div>
        </div>
      </div>
      <div>
        <div style="display: flex; justify-content: space-between; margin-bottom: 0.25rem;">
          <span style="font-family: 'Courier New', monospace; font-size: 0.625rem; color: #94b0c2;">MP</span>
          <span style="font-family: 'Courier New', monospace; font-size: 0.625rem; color: #f4f4f4;">34/60</span>
        </div>
        <div style="background: #1a1c2c; height: 8px; border: 2px solid #5f574f;">
          <div style="width: 57%; height: 100%; background: #29adff;"></div>
        </div>
      </div>
      <div>
        <div style="display: flex; justify-content: space-between; margin-bottom: 0.25rem;">
          <span style="font-family: 'Courier New', monospace; font-size: 0.625rem; color: #94b0c2;">EXP</span>
          <span style="font-family: 'Courier New', monospace; font-size: 0.625rem; color: #f4f4f4;">2840/4000</span>
        </div>
        <div style="background: #1a1c2c; height: 8px; border: 2px solid #5f574f;">
          <div style="width: 71%; height: 100%; background: #ffcd75;"></div>
        </div>
      </div>
      <div style="border-top: 2px solid #5f574f; padding-top: 0.5rem; margin-top: 0.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem;">
        <span style="font-family: 'Courier New', monospace; font-size: 0.5625rem; color: #94b0c2;">ATK: <span style="color: #f4f4f4;">42</span></span>
        <span style="font-family: 'Courier New', monospace; font-size: 0.5625rem; color: #94b0c2;">DEF: <span style="color: #f4f4f4;">38</span></span>
        <span style="font-family: 'Courier New', monospace; font-size: 0.5625rem; color: #94b0c2;">SPD: <span style="color: #f4f4f4;">56</span></span>
        <span style="font-family: 'Courier New', monospace; font-size: 0.5625rem; color: #94b0c2;">LCK: <span style="color: #f4f4f4;">21</span></span>
      </div>
    </div>
  </div>
</div>

Pixel button set

View code

<div style="padding: 2rem; background: #333c57; display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-start;">
  <button style="background: #38b764; color: #1a1c2c; border: none; box-shadow: 0 4px 0 0 #257942; padding: 0.5rem 1.25rem; font-family: 'Courier New', monospace; font-size: 0.6875rem; font-weight: bold; text-transform: uppercase; cursor: pointer; position: relative; top: 0;">START</button>
  <button style="background: #ef7d57; color: #1a1c2c; border: none; box-shadow: 0 4px 0 0 #b35a38; padding: 0.5rem 1.25rem; font-family: 'Courier New', monospace; font-size: 0.6875rem; font-weight: bold; text-transform: uppercase; cursor: pointer;">OPTIONS</button>
  <button style="background: #29adff; color: #1a1c2c; border: none; box-shadow: 0 4px 0 0 #1a7ab5; padding: 0.5rem 1.25rem; font-family: 'Courier New', monospace; font-size: 0.6875rem; font-weight: bold; text-transform: uppercase; cursor: pointer;">SAVE</button>
  <button style="background: #5f574f; color: #94b0c2; border: none; box-shadow: 0 4px 0 0 #3d3832; padding: 0.5rem 1.25rem; font-family: 'Courier New', monospace; font-size: 0.6875rem; font-weight: bold; text-transform: uppercase; cursor: not-allowed;">LOCKED</button>
</div>

System prompt

Copy this into your AI system prompt

You generate UI in a pixel retro style — the charm of 8-bit and 16-bit era game interfaces. Chunky pixelated borders, limited color palettes, bitmap-style elements, and the playful nostalgia of early computing. Think SNES menu screens, Game Boy UI, and early Macintosh dialogs. Functional retro, not ironic.

VISUAL RULES:
- Background: Solid colors, no gradients. Dark: #1a1c2c (midnight blue). Light: #f4f4f4 (almost white). Mid: #333c57 (steel blue). Backgrounds are flat fills, like a game screen.
- Color palette: Limited to 8-16 colors max, inspired by classic palettes. Dark blue (#1a1c2c), purple (#5d275d), red (#b13e53), orange (#ef7d57), yellow (#ffcd75), green (#38b764), light green (#a7f070), sky blue (#29adff), light blue (#73eff7), lavender (#94b0c2), cream (#f4f4f4), light gray (#c2c3c7), mid gray (#5f574f), dark gray (#333c57).
- Text: Light on dark backgrounds (cream or white). Dark on light backgrounds. Monospace only: `font-family: 'Press Start 2P', 'Courier New', monospace`. If 'Press Start 2P' (Google Font) unavailable, use system monospace at small sizes.
- Borders: Pixel-style. Use `box-shadow` to create pixel borders: `box-shadow: 0 4px 0 0 #1a1c2c, 0 -4px 0 0 #1a1c2c, 4px 0 0 0 #1a1c2c, -4px 0 0 0 #1a1c2c` for a 4px pixel border effect. OR use solid 4px borders for simplicity.
- Border radius: 0. Absolutely zero. Pixels are squares.
- Shadows: Pixel offset shadows only. `box-shadow: 4px 4px 0 #1a1c2c`. No blur. Stepped/pixelated.
- Spacing: Based on multiples of 4px (the pixel grid). p-2 (8px), p-3 (12px), p-4 (16px). Everything snaps to the grid.
- Typography size: Small. 10px-14px for body (font-size: 0.625rem to 0.875rem). Let the pixel font speak at its native scale.

SPECIFIC PATTERNS:
- Dialog boxes: Solid color fill, 4px solid black border, p-4. Title bar at top with contrasting color and centered text. Looks like a game dialog/menu.
- Buttons: Solid fill, 4px pixel border (or box-shadow border), uppercase text. Pressed state: invert shadow direction (inset) or shift down 2px. Color fills from the palette.
- HP/progress bars: Rectangular, 4px border. Fill uses a solid palette color. No rounded ends. Shows as a stepped fill.
- Menu items: Vertical list with `>` or `▶` cursor indicator next to selected item. Each item on its own line, equal spacing.
- Status badges: Small rectangles with solid fills. `[OK]`, `[!!]`, `[HP: 87]` style text badges.
- Pixel art decorations: Simple geometric shapes (hearts ♥, stars ★, arrows ▶) as accents.

ANTI-PATTERNS:
- No gradients anywhere. Flat colors only.
- No rounded corners. Zero border-radius.
- No smooth shadows (box-shadow with blur). Pixel shadows only.
- No large, fluid typography. Keep text small and pixel-grid-aligned.
- No transparency/opacity effects. Everything is opaque and solid.
- No serif or sans-serif body fonts. Monospace/pixel fonts only.

Related prompts

      *
      Lecture 12 — Data Structures
    
A binary search tree maintains sorted order through its structure. For any node n, all values in the left subtree are < n and all values in the right subtree are > n.

      → see also: AVL trees, Red-Black trees

Retro

Chalk Blackboard

🔥78system

Generates UI that feels hand-drawn on a dusty blackboard — chalky white text on dark slate green, imperfect lines, mathematical notation vibes, and the nostalgic warmth of a classroom after hours.

Now Playing

Live

Side B — Evening Mix

Recorded Feb 14, 2026 · C-90

27:14

Retro

Cassette Tape

🔥79system

Generates UI with analog audio warmth — muted oranges and browns, VU meter aesthetics, tape reel decorations, and the cozy lo-fi quality of a well-loved mixtape. Press play on your interface.

My Notebook

The most beautiful interfaces are those that feel like they exist in the real world. Texture, light, and shadow create trust through familiarity.

Retro

Skeuomorphism

🔥91system

Generates UI with rich real-world textures — leather stitching, brushed metal, wood grain, linen backgrounds, and glossy glass buttons. iOS 6 energy. Every pixel pretends to be a physical material.