Dashboardsystem

Dense Dashboard

🔥 Certified BangerThis prompt produces genuinely distinct output

Generates data-heavy, dark-mode-first UI — compact tables, stat cards, sparklines, status badges. The kind of interface an ops engineer stares at for 8 hours and still finds readable.

tablesstatsdark modedata dense

Added February 11, 2026 by unslop.dev

Example output

Stat cards

Requests

1.24M

↑ 12.3%

Error rate

0.04%

↓ 0.01%

p95 Latency

142ms

↑ 23ms

View code

<div style="padding: 1.5rem; background: #0a0a0a; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; max-width: 48rem;">
  <div style="background: #141414; border: 1px solid #262626; border-radius: 0.5rem; padding: 1rem;">
    <p style="font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: #737373; margin: 0 0 0.5rem 0;">Requests</p>
    <div style="display: flex; align-items: baseline; gap: 0.5rem;">
      <p style="font-size: 1.5rem; font-weight: 600; color: #e5e5e5; margin: 0; font-family: ui-monospace, monospace;">1.24M</p>
      <span style="font-size: 0.6875rem; font-weight: 500; color: #22c55e;">↑ 12.3%</span>
    </div>
  </div>
  <div style="background: #141414; border: 1px solid #262626; border-radius: 0.5rem; padding: 1rem;">
    <p style="font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: #737373; margin: 0 0 0.5rem 0;">Error rate</p>
    <div style="display: flex; align-items: baseline; gap: 0.5rem;">
      <p style="font-size: 1.5rem; font-weight: 600; color: #e5e5e5; margin: 0; font-family: ui-monospace, monospace;">0.04%</p>
      <span style="font-size: 0.6875rem; font-weight: 500; color: #22c55e;">↓ 0.01%</span>
    </div>
  </div>
  <div style="background: #141414; border: 1px solid #262626; border-radius: 0.5rem; padding: 1rem;">
    <p style="font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: #737373; margin: 0 0 0.5rem 0;">p95 Latency</p>
    <div style="display: flex; align-items: baseline; gap: 0.5rem;">
      <p style="font-size: 1.5rem; font-weight: 600; color: #e5e5e5; margin: 0; font-family: ui-monospace, monospace;">142ms</p>
      <span style="font-size: 0.6875rem; font-weight: 500; color: #ef4444;">↑ 23ms</span>
    </div>
  </div>
</div>

Data table

Endpoint	Requests	Latency	Status
/api/users	45.2k	89ms	Healthy
/api/payments	12.8k	234ms	Degraded
/api/search	8.1k	67ms	Healthy

View code

<div style="padding: 1.5rem; background: #0a0a0a; max-width: 48rem;">
  <div style="background: #141414; border: 1px solid #262626; border-radius: 0.5rem; overflow: hidden;">
    <table style="width: 100%; border-collapse: collapse; font-size: 0.75rem;">
      <thead>
        <tr style="border-bottom: 1px solid #262626;">
          <th style="text-align: left; padding: 0.625rem 1rem; color: #737373; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.6875rem;">Endpoint</th>
          <th style="text-align: right; padding: 0.625rem 1rem; color: #737373; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.6875rem;">Requests</th>
          <th style="text-align: right; padding: 0.625rem 1rem; color: #737373; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.6875rem;">Latency</th>
          <th style="text-align: right; padding: 0.625rem 1rem; color: #737373; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.6875rem;">Status</th>
        </tr>
      </thead>
      <tbody>
        <tr style="border-bottom: 1px solid #1a1a1a;">
          <td style="padding: 0.625rem 1rem; color: #e5e5e5; font-family: ui-monospace, monospace;">/api/users</td>
          <td style="padding: 0.625rem 1rem; color: #a3a3a3; text-align: right; font-family: ui-monospace, monospace;">45.2k</td>
          <td style="padding: 0.625rem 1rem; color: #a3a3a3; text-align: right; font-family: ui-monospace, monospace;">89ms</td>
          <td style="padding: 0.625rem 1rem; text-align: right;"><span style="display: inline-flex; align-items: center; gap: 0.375rem; color: #22c55e; font-size: 0.6875rem;"><span style="width: 6px; height: 6px; border-radius: 9999px; background: #22c55e; display: inline-block;"></span>Healthy</span></td>
        </tr>
        <tr style="border-bottom: 1px solid #1a1a1a;">
          <td style="padding: 0.625rem 1rem; color: #e5e5e5; font-family: ui-monospace, monospace;">/api/payments</td>
          <td style="padding: 0.625rem 1rem; color: #a3a3a3; text-align: right; font-family: ui-monospace, monospace;">12.8k</td>
          <td style="padding: 0.625rem 1rem; color: #a3a3a3; text-align: right; font-family: ui-monospace, monospace;">234ms</td>
          <td style="padding: 0.625rem 1rem; text-align: right;"><span style="display: inline-flex; align-items: center; gap: 0.375rem; color: #eab308; font-size: 0.6875rem;"><span style="width: 6px; height: 6px; border-radius: 9999px; background: #eab308; display: inline-block;"></span>Degraded</span></td>
        </tr>
        <tr>
          <td style="padding: 0.625rem 1rem; color: #e5e5e5; font-family: ui-monospace, monospace;">/api/search</td>
          <td style="padding: 0.625rem 1rem; color: #a3a3a3; text-align: right; font-family: ui-monospace, monospace;">8.1k</td>
          <td style="padding: 0.625rem 1rem; color: #a3a3a3; text-align: right; font-family: ui-monospace, monospace;">67ms</td>
          <td style="padding: 0.625rem 1rem; text-align: right;"><span style="display: inline-flex; align-items: center; gap: 0.375rem; color: #22c55e; font-size: 0.6875rem;"><span style="width: 6px; height: 6px; border-radius: 9999px; background: #22c55e; display: inline-block;"></span>Healthy</span></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

System prompt

Copy this into your AI system prompt

You generate dashboard UI in a dark, data-dense style — built for people who monitor systems, analyze metrics, and need maximum information density without visual chaos. Think Linear, Vercel dashboard, or a trading terminal.

VISUAL RULES:
- Background: Dark. #0a0a0a for page, #141414 for cards, #1a1a1a for elevated surfaces.
- Borders: 1px #262626 (gray-800). Subtle separation, not decoration.
- Text: #e5e5e5 (gray-200) for primary, #a3a3a3 (gray-400) for secondary, #737373 (gray-500) for tertiary. Never pure white for body text.
- Accent: One color for positive/active states. Green (#22c55e) for success, red (#ef4444) for errors, blue (#3b82f6) for links, yellow (#eab308) for warnings.
- Typography: System mono for numbers/data/code. System sans for labels. text-xs and text-sm dominate — text-base is large in this context.
- Spacing: Compact. p-3 inside cards. gap-3 in grids. Tight but not cramped.
- Radius: rounded-lg on cards, rounded-md on inputs/buttons. Not too round — professional.
- Tables: No alternating row colors. Borders between rows (border-b border-gray-800). Hover: bg-gray-800/50.

SPECIFIC PATTERNS:
- Stat cards: bg-[#141414] rounded-lg border border-[#262626] p-4. Label in text-xs text-gray-500 uppercase tracking-wider. Value in text-2xl font-semibold text-gray-100 font-mono. Delta badge (green/red) with arrow.
- Tables: Compact, text-xs. Header in text-gray-500 uppercase. Cells in text-gray-300. Monospace for numbers.
- Status badges: Small dots or pill badges. Green dot = active, yellow = pending, red = error. Inline with a text-xs label.
- Buttons: bg-white text-black rounded-md px-3 py-1.5 text-xs font-medium (primary). bg-gray-800 text-gray-300 border border-gray-700 (secondary).
- Inputs: bg-[#141414] border border-[#262626] text-gray-200 text-sm rounded-md. Focus: ring-1 ring-blue-500 border-blue-500.

ANTI-PATTERNS:
- No large text. text-2xl is for stat values only.
- No colorful backgrounds. Color is for data, not decoration.
- No thick shadows. Separation comes from borders and background layers.
- No rounded-full on containers. Professional corners only.
- No light mode. This is dark-mode only.

Related prompts

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.

      [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.