Dashboardsystem

Data Brutalism

79
🔥 Certified BangerThis prompt produces genuinely distinct output

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.

datarawtablesmonospaceutilitarian

Added February 16, 2026 by unslop.dev

Example output

Data table

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
View code
<div style="padding: 1rem; background: #fff; font-family: Consolas, Monaco, 'Courier New', monospace;">
  <div style="max-width: 36rem;">
    <div style="font-size: 0.6875rem; color: #888; margin-bottom: 0.5rem;">QUERY RESULT — 4 ROWS — 0.003s</div>
    <table style="width: 100%; border-collapse: collapse; font-size: 0.75rem;">
      <thead>
        <tr style="background: #f0f0f0;">
          <th style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; text-align: left; font-weight: 700; font-size: 0.6875rem; text-transform: uppercase; color: #333;">ID</th>
          <th style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; text-align: left; font-weight: 700; font-size: 0.6875rem; text-transform: uppercase; color: #333;">Endpoint</th>
          <th style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; text-align: right; font-weight: 700; font-size: 0.6875rem; text-transform: uppercase; color: #333;">Latency</th>
          <th style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; text-align: right; font-weight: 700; font-size: 0.6875rem; text-transform: uppercase; color: #333;">Req/s</th>
          <th style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; text-align: center; font-weight: 700; font-size: 0.6875rem; text-transform: uppercase; color: #333;">Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; color: #888;">001</td>
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; color: #000;">/api/users</td>
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; text-align: right; color: #000;">12ms</td>
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; text-align: right; color: #000;">4,231</td>
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; text-align: center; color: #008800;">[OK]</td>
        </tr>
        <tr style="background: #f8f8f8;">
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; color: #888;">002</td>
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; color: #000;">/api/orders</td>
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; text-align: right; color: #000;">34ms</td>
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; text-align: right; color: #000;">1,847</td>
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; text-align: center; color: #008800;">[OK]</td>
        </tr>
        <tr>
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; color: #888;">003</td>
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; color: #000;">/api/payments</td>
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; text-align: right; color: #cc0000;">892ms</td>
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; text-align: right; color: #000;">203</td>
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; text-align: center; color: #cc0000;">[ERR]</td>
        </tr>
        <tr style="background: #f8f8f8;">
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; color: #888;">004</td>
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; color: #000;">/api/analytics</td>
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; text-align: right; color: #000;">67ms</td>
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; text-align: right; color: #000;">982</td>
          <td style="border: 1px solid #ddd; padding: 0.25rem 0.5rem; text-align: center; color: #888;">[PENDING]</td>
        </tr>
      </tbody>
    </table>
    <div style="font-size: 0.625rem; color: #888; margin-top: 0.375rem;">last updated: 2026-02-16T14:32:07Z | source: prod-monitor-03 | ttl: 30s</div>
  </div>
</div>

Raw controls

| rows: 4 of 4 | page: 1/1
View code
<div style="padding: 1rem; background: #fff; font-family: Consolas, Monaco, 'Courier New', monospace; display: flex; gap: 0.375rem; flex-wrap: wrap; align-items: center;">
  <button style="background: #fff; border: 1px solid #000; padding: 0.125rem 0.5rem; font-family: inherit; font-size: 0.75rem; cursor: pointer;">[REFRESH]</button>
  <button style="background: #fff; border: 1px solid #000; padding: 0.125rem 0.5rem; font-family: inherit; font-size: 0.75rem; cursor: pointer;">[EXPORT CSV]</button>
  <button style="background: #fff; border: 1px solid #0055ff; color: #0055ff; padding: 0.125rem 0.5rem; font-family: inherit; font-size: 0.75rem; cursor: pointer;">[FILTER]</button>
  <button style="background: #fff; border: 1px solid #ddd; color: #888; padding: 0.125rem 0.5rem; font-family: inherit; font-size: 0.75rem; cursor: not-allowed;">[LOCKED]</button>
  <span style="font-size: 0.625rem; color: #888; margin-left: 0.5rem;">| rows: 4 of 4 | page: 1/1</span>
</div>

Summary block

SYSTEM SUMMARY
UPTIME
99.97%
AVG RESP
23ms
ERRORS
3
NODES
8/8
View code
<div style="padding: 1rem; background: #fff; font-family: Consolas, Monaco, 'Courier New', monospace;">
  <div style="max-width: 32rem;">
    <div style="font-size: 0.625rem; text-transform: uppercase; color: #888; letter-spacing: 0.05em; margin-bottom: 0.375rem; border-bottom: 1px solid #ddd; padding-bottom: 0.25rem;">SYSTEM SUMMARY</div>
    <div style="display: flex; gap: 0;">
      <div style="flex: 1; border: 1px solid #ddd; padding: 0.5rem 0.75rem;">
        <div style="font-size: 0.5625rem; text-transform: uppercase; color: #888; margin-bottom: 0.25rem;">UPTIME</div>
        <div style="font-size: 1.25rem; font-weight: 700; color: #000;">99.97%</div>
      </div>
      <div style="flex: 1; border: 1px solid #ddd; border-left: none; padding: 0.5rem 0.75rem;">
        <div style="font-size: 0.5625rem; text-transform: uppercase; color: #888; margin-bottom: 0.25rem;">AVG RESP</div>
        <div style="font-size: 1.25rem; font-weight: 700; color: #000;">23ms</div>
      </div>
      <div style="flex: 1; border: 1px solid #ddd; border-left: none; padding: 0.5rem 0.75rem;">
        <div style="font-size: 0.5625rem; text-transform: uppercase; color: #888; margin-bottom: 0.25rem;">ERRORS</div>
        <div style="font-size: 1.25rem; font-weight: 700; color: #cc0000;">3</div>
      </div>
      <div style="flex: 1; border: 1px solid #ddd; border-left: none; padding: 0.5rem 0.75rem;">
        <div style="font-size: 0.5625rem; text-transform: uppercase; color: #888; margin-bottom: 0.25rem;">NODES</div>
        <div style="font-size: 1.25rem; font-weight: 700; color: #008800;">8/8</div>
      </div>
    </div>
  </div>
</div>

Login terminal

AUTHENTICATE
attempts: 0/5 | session: null | mfa: required
View code
<div style="padding: 1rem; background: #fff; font-family: Consolas, Monaco, 'Courier New', monospace;">
  <div style="max-width: 22rem; border: 1px solid #ddd;">
    <div style="padding: 0.375rem 0.75rem; border-bottom: 1px solid #ddd; background: #f8f8f8;">
      <span style="font-size: 0.625rem; text-transform: uppercase; color: #888;">AUTHENTICATE</span>
    </div>
    <div style="padding: 0.75rem;">
      <div style="margin-bottom: 0.5rem;">
        <label style="display: block; font-size: 0.5625rem; text-transform: uppercase; color: #888; margin-bottom: 0.125rem;">USER_ID</label>
        <input type="text" placeholder="admin" style="width: 100%; box-sizing: border-box; border: 1px solid #ddd; padding: 0.25rem 0.375rem; font-family: Consolas, Monaco, monospace; font-size: 0.75rem; outline: none;" />
      </div>
      <div style="margin-bottom: 0.625rem;">
        <label style="display: block; font-size: 0.5625rem; text-transform: uppercase; color: #888; margin-bottom: 0.125rem;">PASS_KEY</label>
        <input type="password" placeholder="••••••••" style="width: 100%; box-sizing: border-box; border: 1px solid #ddd; padding: 0.25rem 0.375rem; font-family: Consolas, Monaco, monospace; font-size: 0.75rem; outline: none;" />
      </div>
      <div style="display: flex; gap: 0.375rem;">
        <button style="background: #fff; border: 1px solid #000; padding: 0.125rem 0.5rem; font-family: inherit; font-size: 0.75rem; cursor: pointer;">[LOGIN]</button>
        <button style="background: #fff; border: 1px solid #ddd; color: #888; padding: 0.125rem 0.5rem; font-family: inherit; font-size: 0.75rem; cursor: pointer;">[RESET]</button>
      </div>
      <div style="font-size: 0.5625rem; color: #888; margin-top: 0.5rem; border-top: 1px solid #ddd; padding-top: 0.375rem;">attempts: 0/5 | session: null | mfa: required</div>
    </div>
  </div>
</div>

Changelog feed

CHANGELOG — LATEST
2026-02-16 [ADD] Rate limiting on /api/auth endpoints — max 10 req/min per IP
2026-02-15 [FIX] Memory leak in websocket connection pool (issue #847)
2026-02-15 [MOD] Upgraded postgres driver from 8.11 to 8.13
2026-02-14 [DEL] Removed deprecated v1 API routes — see migration guide
showing 4 of 127 entries | view all
View code
<div style="padding: 1rem; background: #fff; font-family: Consolas, Monaco, 'Courier New', monospace;">
  <div style="max-width: 36rem;">
    <div style="font-size: 0.625rem; text-transform: uppercase; color: #888; margin-bottom: 0.5rem; border-bottom: 1px solid #ddd; padding-bottom: 0.25rem;">CHANGELOG — LATEST</div>
    <div style="border: 1px solid #ddd;">
      <div style="padding: 0.5rem 0.75rem; border-bottom: 1px solid #ddd; display: flex; gap: 0.75rem; align-items: baseline;">
        <span style="font-size: 0.6875rem; color: #888; flex-shrink: 0; width: 5rem;">2026-02-16</span>
        <span style="font-size: 0.625rem; text-transform: uppercase; color: #008800; flex-shrink: 0; width: 3rem;">[ADD]</span>
        <span style="font-size: 0.75rem; color: #000;">Rate limiting on /api/auth endpoints — max 10 req/min per IP</span>
      </div>
      <div style="padding: 0.5rem 0.75rem; border-bottom: 1px solid #ddd; display: flex; gap: 0.75rem; align-items: baseline; background: #f8f8f8;">
        <span style="font-size: 0.6875rem; color: #888; flex-shrink: 0; width: 5rem;">2026-02-15</span>
        <span style="font-size: 0.625rem; text-transform: uppercase; color: #cc0000; flex-shrink: 0; width: 3rem;">[FIX]</span>
        <span style="font-size: 0.75rem; color: #000;">Memory leak in websocket connection pool (issue #847)</span>
      </div>
      <div style="padding: 0.5rem 0.75rem; border-bottom: 1px solid #ddd; display: flex; gap: 0.75rem; align-items: baseline;">
        <span style="font-size: 0.6875rem; color: #888; flex-shrink: 0; width: 5rem;">2026-02-15</span>
        <span style="font-size: 0.625rem; text-transform: uppercase; color: #0055ff; flex-shrink: 0; width: 3rem;">[MOD]</span>
        <span style="font-size: 0.75rem; color: #000;">Upgraded postgres driver from 8.11 to 8.13</span>
      </div>
      <div style="padding: 0.5rem 0.75rem; display: flex; gap: 0.75rem; align-items: baseline; background: #f8f8f8;">
        <span style="font-size: 0.6875rem; color: #888; flex-shrink: 0; width: 5rem;">2026-02-14</span>
        <span style="font-size: 0.625rem; text-transform: uppercase; color: #888; flex-shrink: 0; width: 3rem;">[DEL]</span>
        <span style="font-size: 0.75rem; color: #000;">Removed deprecated v1 API routes — see migration guide</span>
      </div>
    </div>
    <div style="font-size: 0.5625rem; color: #888; margin-top: 0.375rem;">showing 4 of 127 entries | <span style="color: #0055ff; text-decoration: underline; cursor: pointer;">view all</span></div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI in a data brutalist style — interfaces that worship raw information over visual polish. Monospaced type, visible table structures, exposed metadata, dense grids, and the aggressive honesty of data presented without cosmetic intervention. Think Bloomberg Terminal crossed with a government database printout. The data IS the interface. Nothing hides, nothing decorates, nothing apologizes.

VISUAL RULES:
- Background: Stark white (#ffffff) or very pale gray (#f8f8f8). No warmth, no tint. Clinical.
- Text: Pure black (#000000) for data. Dark gray (#333) for labels. Medium gray (#888) for metadata. No soft stone tones — this is a printout.
- Accent: A single functional color. Electric blue (#0055ff) for links and interactive elements only. Red (#cc0000) for negative values/errors. Green (#008800) for positive values. Colors are informational, never decorative.
- Typography: Monospace everything. `font-family: 'Consolas', 'Monaco', 'Courier New', monospace`. Same font for headings, body, data, labels. Size varies but the face is always mono.
- Borders: 1px solid #ddd for table grids. Visible cell borders. Every data cell has a visible boundary. `border-collapse: collapse` on tables.
- Border radius: 0px. Absolutely nothing rounded. Data is angular.
- Spacing: Dense and tight. Cells packed. padding: 0.25rem to 0.5rem inside cells. No generous whitespace. Information density is the goal.
- Layout: Tables and grids. Not cards, not masonry — tables. Rows and columns. Data aligned in columns with right-aligned numbers and left-aligned labels.
- Numbers: Right-aligned. Monospace. Tabular figures. Decimal points aligned vertically across rows.
- Metadata: Visible and raw. Show IDs, timestamps, byte counts, row numbers. Don't hide the plumbing.

SPECIFIC PATTERNS:
- Cards: Not really cards — more like bordered table sections. 1px border, 0 radius, tight padding. Header row in bold.
- Buttons: Minimal. 1px black border, no fill, monospace text. Small. `padding: 2px 8px`. Look like form controls, not designed buttons.
- Tables: Full borders on every cell. Header row in bold or bg-gray-100. Alternating row colors optional (white / #f8f8f8). Data is king.
- Labels: UPPERCASE, tiny (10-11px), medium gray. Right-aligned in label columns. Like a spreadsheet header.
- Status indicators: Text-only. [OK] [ERR] [PENDING] in brackets. No colored dots, no icons.
- Headers: Same monospace font, just larger or bold. No special treatment. Maybe an underline (border-bottom).
- Links: Blue, underlined. Classic web. No fancy hover states.

ANTI-PATTERNS:
- No gradients, shadows, or depth effects of any kind.
- No icons or emoji. Text labels only.
- No rounded corners on anything.
- No serif or decorative fonts. Monospace only.
- No cards with generous padding. Keep it dense.
- No color as decoration. Color is only for data meaning (positive/negative/links).
- No animation or transitions. Static. Like a printout.
- No dark mode. This is paper-white and printer-black.

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.

Reactor Core
Nominal
Temp
347°C
Pressure
15.2MPa
Output
1.21GW
Warning: Threshold Exceeded

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

Dashboard

Dark Industrial

🔥76system

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.

Requests

1.24M

↑ 12.3%

Error rate

0.04%

↓ 0.01%

p95 Latency

142ms

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

Dense Dashboard

🔥85system

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.