Luxurysystem

Noir Cinema

85
🔥 Certified BangerThis prompt produces genuinely distinct output

Generates UI with film noir atmosphere — high-contrast black and white with blood-red accents, dramatic shadows, venetian blind light patterns, and the dangerous elegance of a 1940s detective thriller.

high contrastdark modecinematicdramatic

Added February 2, 2026 by unslop.dev

Example output

Case file card

Case File No. 0047

The Woman Who Vanished Twice

She walked into my office on a Tuesday. Said her name was Claire. By Thursday, no one named Claire had ever existed — not in any record, any database, any memory but mine.

February 1947 · Downtown Open File →
View code
<div style="padding: 2.5rem; background: #080808;">
  <div style="background: #121210; max-width: 24rem; padding: 2rem; box-shadow: 12px 12px 40px rgba(0,0,0,0.5);">
    <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem;">
      <span style="font-family: sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: #5a5550;">Case File</span>
      <span style="font-family: sans-serif; font-size: 0.6875rem; color: #b91c1c; font-weight: 600;">No. 0047</span>
    </div>
    <div style="height: 1px; background: rgba(232,229,224,0.08); margin: 0.75rem 0;"></div>
    <h2 style="font-family: 'Playfair Display', 'Georgia', serif; font-size: 1.5rem; font-weight: 400; font-style: italic; color: #e8e5e0; margin: 0 0 0.75rem 0; line-height: 1.3;">The Woman Who Vanished Twice</h2>
    <p style="font-family: 'Georgia', serif; font-size: 0.875rem; color: #8a8580; line-height: 1.7; margin: 0 0 1.25rem 0;">She walked into my office on a Tuesday. Said her name was Claire. By Thursday, no one named Claire had ever existed — not in any record, any database, any memory but mine.</p>
    <div style="height: 1px; background: rgba(232,229,224,0.06); margin-bottom: 0.75rem;"></div>
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <span style="font-family: 'Georgia', serif; font-style: italic; font-size: 0.75rem; color: #5a5550;">February 1947 · Downtown</span>
      <a href="#" style="font-family: sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: #b91c1c; text-decoration: none;">Open File →</a>
    </div>
  </div>
</div>

Dramatic section header

Act III

Every shadow has
a secret

"In this city, the truth is just another thing someone lost. If you're lucky, you find it before it finds you."

View code
<div style="padding: 4rem 2.5rem; background: #080808; text-align: center;">
  <div style="max-width: 28rem; margin: 0 auto;">
    <span style="font-family: sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.25em; color: #5a5550; display: block; margin-bottom: 1rem;">Act III</span>
    <h1 style="font-family: 'Playfair Display', 'Georgia', serif; font-size: 2.5rem; font-weight: 400; font-style: italic; color: #e8e5e0; margin: 0 0 1rem 0; line-height: 1.15;">Every shadow has<br>a <span style="color: #b91c1c;">secret</span></h1>
    <div style="height: 1px; width: 3rem; background: rgba(232,229,224,0.15); margin: 1.5rem auto;"></div>
    <p style="font-family: 'Georgia', serif; font-size: 0.9375rem; color: #8a8580; line-height: 1.75; font-style: italic;">"In this city, the truth is just another thing someone lost. If you're lucky, you find it before it finds you."</p>
  </div>
</div>

Navigation

The Black Dahlia
View code
<div style="background: #0c0c0c; border-bottom: 1px solid rgba(232,229,224,0.06);">
  <div style="max-width: 44rem; margin: 0 auto; padding: 1.25rem 2rem; display: flex; justify-content: space-between; align-items: center;">
    <span style="font-family: 'Playfair Display', 'Georgia', serif; font-size: 1.125rem; font-style: italic; color: #e8e5e0;">The Black Dahlia</span>
    <nav style="display: flex; gap: 2rem;">
      <a href="#" style="font-family: sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: #b91c1c; text-decoration: none;">Cases</a>
      <a href="#" style="font-family: sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: #5a5550; text-decoration: none;">Suspects</a>
      <a href="#" style="font-family: sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: #5a5550; text-decoration: none;">Evidence</a>
      <a href="#" style="font-family: sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: #5a5550; text-decoration: none;">Archive</a>
    </nav>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI in a film noir style — the visual language of 1940s detective movies. High-contrast black and white, deep shadows, a single blood-red accent, dramatic lighting effects, and the tense, moody atmosphere of a rain-soaked city at night. Every element tells a story. Every shadow hides something.

VISUAL RULES:
- Background: Deep black (#080808) or near-black (#0c0c0c). Slightly warm-black for surfaces (#121210). No blue tint — this is analog, warm darkness.
- Light: Off-white (#e8e5e0) for text and illuminated elements. Not pure white — the warm white of a desk lamp in a smoky room.
- Red: Blood red (#b91c1c) as the ONLY color. Used for critical elements, links, active states. Like lipstick on a femme fatale or blood on a marble floor. Maximum one red element per component.
- Grays: Warm grays only. #8a8580 for secondary text. #4a4540 for borders and rules. #2a2520 for elevated surfaces.
- Text: Off-white (#e8e5e0) for primary. Warm gray (#8a8580) for secondary. Dim (#5a5550) for tertiary. All warm-tinted.
- Typography: `font-family: 'Playfair Display', 'Georgia', serif` for headings. Italic extensively — film noir loves italic. Body: serif (`Georgia`) or clean sans. Headings: light weight for elegance, or bold italic for drama.
- Shadows: Dramatic. Heavy shadows on one side (suggesting a single light source): `box-shadow: 12px 0 30px rgba(0,0,0,0.6)` or `box-shadow: 0 12px 30px rgba(0,0,0,0.5)`. The shadow tells you where the light is.
- Borders: Thin, warm. `border: 1px solid rgba(232,229,224,0.1)`. Or no border — let shadow define the edge.
- Border radius: 0 everywhere. Sharp edges. The geometry of cigarette cases and filing cabinets.
- Spacing: Dramatic. Very generous in hero sections (py-20+). Tight in data areas. The contrast between spacious and tight creates tension.

SPECIFIC PATTERNS:
- Cards: Dark surface, sharp corners, dramatic one-sided shadow. Minimal content. A title, a line, a detail. Sparse and mysterious.
- Buttons: Outlined in off-white or filled blood-red. Sharp corners. Serif or uppercase sans text. Understated — nothing loud.
- Dividers: Thin off-white/10 rules. Or a single red rule for emphasis.
- Pull quotes: Large italic serif, off-white, with em dash attribution. The voice-over narration of the interface.
- Headers: Italic serif, tracking-wide for labels. Dramatic size contrast between label and heading.
- Metadata: Small, dim, italic. Dates, attribution, case numbers.
- Red accent usage: A single red element draws the eye — one link, one badge, one border. Never two red elements competing.

ANTI-PATTERNS:
- No bright colors besides blood red. No blue, green, purple, orange.
- No light backgrounds. No white mode. Noir is darkness.
- No rounded corners. Every edge is sharp.
- No playful elements. No emoji, no bouncy animations.
- No sans-serif headings. Serif drama required.
- No even lighting. Shadows must be asymmetric and dramatic.

Related prompts

✦ Proclamation

The Architecture of Enduring Interfaces

Great design, like great architecture, outlasts the fashions that surrounded its creation. Build with stone, not with straw.

Anno MMXXVI
Luxury

Gothic Revival

🔥84system

Generates UI with the drama of cathedral architecture — deep purples and blacks, gold tracery details, pointed arch motifs, and the solemn grandeur of medieval illuminated manuscripts meets modern dark UI.

The Gallery Presents

Botanical Dreams

An exploration of natural forms in decorative art, featuring works from the golden age of organic design.

—— ✦ ——

March 12 – April 28, 1898

Luxury

Art Nouveau

🔥86system

Generates UI inspired by the Art Nouveau movement — sinuous organic curves, botanical motifs, whiplash lines, Mucha-style decorative borders, and the belief that art should permeate every designed surface.

⚓ Ship's Log Entry #1,247

Crossing the Meridian

Clear skies, Force 4 winds from the northwest. Made 142 nautical miles since last entry. All hands report satisfactory conditions.

Position

41°24'N 72°58'W

Heading

247° WSW

Speed

8.2 kn

Luxury

Maritime Nautical

🔥78system

Generates UI with naval precision — deep navy, brass gold, white rope borders, compass roses, and the ordered elegance of a ship captain's chart room. Every interface is seaworthy.