Dashboardsystem

Dark Industrial

🔥 Certified BangerThis prompt produces genuinely distinct output

Generates UI with the feel of an industrial control room — dark steel panels, amber/orange warning accents, monospace readouts, riveted edges, and the serious utility of heavy machinery interfaces.

dark modeindustrialmonospaceutility

Added February 13, 2026 by unslop.dev

Example output

Gauge readout panel

Reactor Core
Nominal
Temp
347°C
Pressure
15.2MPa
Output
1.21GW

View code

<div style="padding: 1.5rem; background: #1a1d21; font-family: 'Consolas', 'Courier New', monospace;">
  <div style="background: #22262b; border: 1px solid #374151; border-radius: 4px; padding: 1rem; max-width: 28rem; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid #2a2f35;">
      <span style="font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: #ff9500; font-weight: 600;">Reactor Core</span>
      <div style="display: flex; align-items: center; gap: 0.375rem;">
        <div style="width: 8px; height: 8px; background: #22c55e;"></div>
        <span style="font-size: 0.6875rem; color: #9ca3af; text-transform: uppercase;">Nominal</span>
      </div>
    </div>
    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
      <div>
        <div style="font-size: 0.625rem; text-transform: uppercase; color: #6b7280; letter-spacing: 0.08em; margin-bottom: 0.25rem;">Temp</div>
        <div style="font-size: 1.5rem; font-weight: 600; color: #f9fafb;">347<span style="font-size: 0.75rem; color: #6b7280;">°C</span></div>
      </div>
      <div>
        <div style="font-size: 0.625rem; text-transform: uppercase; color: #6b7280; letter-spacing: 0.08em; margin-bottom: 0.25rem;">Pressure</div>
        <div style="font-size: 1.5rem; font-weight: 600; color: #ff9500;">15.2<span style="font-size: 0.75rem; color: #6b7280;">MPa</span></div>
      </div>
      <div>
        <div style="font-size: 0.625rem; text-transform: uppercase; color: #6b7280; letter-spacing: 0.08em; margin-bottom: 0.25rem;">Output</div>
        <div style="font-size: 1.5rem; font-weight: 600; color: #f9fafb;">1.21<span style="font-size: 0.75rem; color: #6b7280;">GW</span></div>
      </div>
    </div>
  </div>
</div>

Warning alert

Warning: Threshold Exceeded
Coolant flow rate has dropped below minimum operational threshold. Current: 12.3 m³/s (min: 15.0 m³/s).

View code

<div style="padding: 1.5rem; background: #1a1d21; font-family: 'Consolas', 'Courier New', monospace;">
  <div style="background: rgba(255,149,0,0.08); border-left: 4px solid #ff9500; border-radius: 0 4px 4px 0; padding: 0.875rem 1rem; max-width: 28rem;">
    <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem;">
      <div style="width: 8px; height: 8px; background: #ff9500;"></div>
      <span style="font-size: 0.75rem; font-weight: 600; color: #ff9500; text-transform: uppercase; letter-spacing: 0.05em;">Warning: Threshold Exceeded</span>
    </div>
    <p style="font-size: 0.8125rem; color: #9ca3af; margin: 0 0 0.75rem 0; line-height: 1.5;">Coolant flow rate has dropped below minimum operational threshold. Current: 12.3 m³/s (min: 15.0 m³/s).</p>
    <div style="display: flex; gap: 0.5rem;">
      <button style="background: #ff9500; color: #1a1d21; border: none; border-radius: 3px; padding: 0.375rem 1rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; font-family: inherit; cursor: pointer;">Acknowledge</button>
      <button style="background: #374151; color: #d1d5db; border: 1px solid #4b5563; border-radius: 3px; padding: 0.375rem 1rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; font-family: inherit; cursor: pointer;">Details</button>
    </div>
  </div>
</div>

Status table

      Subsystem Status
    
primary-coolant-loop
WARN
turbine-generator-01
OK
emergency-backup-gen
OK
containment-pressure
CRIT

View code

<div style="padding: 1.5rem; background: #1a1d21; font-family: 'Consolas', 'Courier New', monospace;">
  <div style="max-width: 32rem; border: 1px solid #374151; border-radius: 4px; overflow: hidden;">
    <div style="background: #2a2f35; padding: 0.5rem 1rem; border-bottom: 1px solid #374151;">
      <span style="font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; font-weight: 600;">Subsystem Status</span>
    </div>
    <div style="background: #22262b; padding: 0.5rem 1rem; border-bottom: 1px solid #2a2f35; display: flex; justify-content: space-between; align-items: center;">
      <span style="font-size: 0.8125rem; color: #d1d5db;">primary-coolant-loop</span>
      <div style="display: flex; align-items: center; gap: 0.375rem;"><div style="width: 6px; height: 6px; background: #ff9500;"></div><span style="font-size: 0.75rem; color: #ff9500;">WARN</span></div>
    </div>
    <div style="background: #262b31; padding: 0.5rem 1rem; border-bottom: 1px solid #2a2f35; display: flex; justify-content: space-between; align-items: center;">
      <span style="font-size: 0.8125rem; color: #d1d5db;">turbine-generator-01</span>
      <div style="display: flex; align-items: center; gap: 0.375rem;"><div style="width: 6px; height: 6px; background: #22c55e;"></div><span style="font-size: 0.75rem; color: #22c55e;">OK</span></div>
    </div>
    <div style="background: #22262b; padding: 0.5rem 1rem; border-bottom: 1px solid #2a2f35; display: flex; justify-content: space-between; align-items: center;">
      <span style="font-size: 0.8125rem; color: #d1d5db;">emergency-backup-gen</span>
      <div style="display: flex; align-items: center; gap: 0.375rem;"><div style="width: 6px; height: 6px; background: #22c55e;"></div><span style="font-size: 0.75rem; color: #22c55e;">OK</span></div>
    </div>
    <div style="background: #262b31; padding: 0.5rem 1rem; display: flex; justify-content: space-between; align-items: center;">
      <span style="font-size: 0.8125rem; color: #d1d5db;">containment-pressure</span>
      <div style="display: flex; align-items: center; gap: 0.375rem;"><div style="width: 6px; height: 6px; background: #ef4444;"></div><span style="font-size: 0.75rem; color: #ef4444;">CRIT</span></div>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt

You generate UI in a dark industrial style — the kind of interface you'd find in a power plant control room, a submarine, or a factory floor HUD. Dark steel surfaces, amber warning accents, monospace readouts, and elements that feel machined, not designed. Built for function in harsh conditions.

VISUAL RULES:
- Background: Dark steel. #1a1d21 for page. #22262b for panels. #2a2f35 for elevated surfaces. Cool undertone — steel-gray, not warm.
- Primary accent: Amber/orange (#ff9500) for warnings, active states, important data. This is the color of indicator lights on heavy equipment.
- Secondary: Red (#ef4444) for errors/critical. Green (#22c55e) for OK/operational. Blue (#3b82f6) for info/selected. Functional colors, not decorative.
- Text: #d1d5db (cool gray-300) for primary. #9ca3af (gray-400) for secondary. #6b7280 (gray-500) for tertiary. White (#f9fafb) for highlighted values.
- Typography: Monospace for all data readouts, values, and labels. `font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace`. Sans-serif for descriptions only if needed: `font-family: 'Inter', 'Helvetica', sans-serif`.
- Borders: `border: 1px solid #374151` (gray-700). Inner borders at lower contrast: `border: 1px solid #2a2f35`. Panels are clearly delineated.
- Border radius: Small. 4px-6px. Industrial equipment has slightly rounded edges for safety, not aesthetics.
- Shadows: Subtle inset shadows to create embossed/debossed panels: `box-shadow: inset 0 1px 2px rgba(0,0,0,0.3)`. No external glow effects.
- Spacing: Compact and efficient. p-3 to p-4. Data-dense but organized. Every pixel serves a purpose.

SPECIFIC PATTERNS:
- Panels: bg-[#22262b] border gray-700, rounded-sm, p-4. Header bar with uppercase label in amber or gray. Inset shadow for depth.
- Readouts: Large monospace numbers (text-2xl to text-4xl) in white or amber. Unit label in small gray text beside it. Feels like a digital gauge.
- Status indicators: Small squares (not circles) 8x8px. Green = operational, amber = warning, red = critical, gray = offline. With text label beside.
- Buttons: bg-[#374151] border-gray-600 text-gray-300. Important actions: bg-amber-600 text-white. All with 1px inset shadow, monospace uppercase text.
- Inputs: bg-[#1a1d21] border-gray-700, monospace text. Focus: border-amber-500. Dark recessed appearance.
- Tables: Alternating rows (#22262b / #262b31). Monospace data. Compact padding. Grid lines visible.
- Warning banners: bg-amber-900/20 border-l-4 border-amber-500. Amber text. Monospace.

ANTI-PATTERNS:
- No bright white anywhere. Maximum brightness is #f9fafb, used only for key values.
- No pastel colors. No pink, lavender, or light blue.
- No serif fonts. No cursive. Nothing decorative.
- No large border-radius. Nothing rounded-xl or rounded-full.
- No gradient backgrounds. Flat, machined surfaces.
- No playful or casual elements. This interface is serious.

Related prompts

      [A-01] System Overview
    
        dim: cpu load
        34.2 %
      
        dim: memory
        12.8 / 32 GB
      
        dim: requests
        1,847 /min
      
      rev. 2026-02-16
      scale: 1:1

Dashboard

Blueprint Technical

🔥86system

Generates UI with the precision aesthetic of architectural blueprints — white lines on deep blue, grid overlays, dashed construction lines, and technical annotation styling. Every pixel is measured.

QUERY RESULT — 4 ROWS — 0.003s

      
          ID
          Endpoint
          Latency
          Req/s
          Status
        

      
          001
          /api/users
          12ms
          4,231
          [OK]
        

          002
          /api/orders
          34ms
          1,847
          [OK]
        

          003
          /api/payments
          892ms
          203
          [ERR]
        

          004
          /api/analytics
          67ms
          982
          [PENDING]
        

    last updated: 2026-02-16T14:32:07Z | source: prod-monitor-03 | ttl: 30s

ID	Endpoint	Latency	Req/s	Status
001	/api/users	12ms	4,231	[OK]
002	/api/orders	34ms	1,847	[OK]
003	/api/payments	892ms	203	[ERR]
004	/api/analytics	67ms	982	[PENDING]

  
  | rows: 4 of 4 | page: 1/1

Dashboard

Data Brutalism

🔥79system

Generates UI that treats raw data as the aesthetic — monospaced tables, visible grid structures, exposed metadata, no decoration. The beauty of information presented without apology. Bloomberg Terminal meets Craigslist.

Symbol
        Last
        Chg
        %Chg
      
AAPL
        189.84
        +2.31
        +1.23%
      
MSFT
        415.20
        -3.67
        -0.88%
      
NVDA
        924.50
        +18.42
        +2.03%
      
TSLA
        248.10
        -5.90
        -2.32%
      

NAV
$2,847,231
▲ +1.42% today
P&L (MTD)
+$124,890
▁▂▃▂▃▄▅▆▅▇
Sharpe
1.847
252d rolling
Exposure
87.2%
target: 90%

Dashboard

Financial Terminal

🔥89system

Generates UI in the style of a Bloomberg or Reuters terminal — extreme data density, green/red for up/down, monospace numbers, compact tables, and the unapologetic utility of Wall Street trading floors.