Dashboardsystem

Blueprint Technical

86
🔥 Certified BangerThis prompt produces genuinely distinct output

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.

blueprinttechnicalgridengineeringdark mode

Added February 16, 2026 by unslop.dev

Example output

Specification panel

[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
View code
<div style="padding: 2rem; background: #0a1628; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 20px 20px; font-family: 'Courier New', 'Lucida Console', monospace;">
  <div style="max-width: 24rem; border: 1px dashed rgba(255,255,255,0.2); padding: 1.5rem; position: relative;">
    <div style="position: absolute; top: -0.5rem; left: 1rem; background: #0a1628; padding: 0 0.5rem;">
      <span style="font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.5);">[A-01] System Overview</span>
    </div>
    <div style="display: flex; flex-direction: column; gap: 1.25rem; margin-top: 0.5rem;">
      <div style="display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.75rem; border-bottom: 1px dashed rgba(255,255,255,0.1);">
        <span style="font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,255,255,0.45);">dim: cpu load</span>
        <span style="font-size: 1.5rem; font-weight: 400; color: #e8f0ff;">34.2<span style="font-size: 0.6875rem; color: rgba(255,255,255,0.4);"> %</span></span>
      </div>
      <div style="display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.75rem; border-bottom: 1px dashed rgba(255,255,255,0.1);">
        <span style="font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,255,255,0.45);">dim: memory</span>
        <span style="font-size: 1.5rem; font-weight: 400; color: #00b4d8;">12.8<span style="font-size: 0.6875rem; color: rgba(255,255,255,0.4);"> / 32 GB</span></span>
      </div>
      <div style="display: flex; justify-content: space-between; align-items: baseline;">
        <span style="font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,255,255,0.45);">dim: requests</span>
        <span style="font-size: 1.5rem; font-weight: 400; color: #fbbf24;">1,847<span style="font-size: 0.6875rem; color: rgba(255,255,255,0.4);"> /min</span></span>
      </div>
    </div>
    <div style="margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between;">
      <span style="font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.3);">rev. 2026-02-16</span>
      <span style="font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.3);">scale: 1:1</span>
    </div>
  </div>
</div>

Blueprint button group

View code
<div style="padding: 2rem; background: #0a1628; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 20px 20px; font-family: 'Courier New', 'Lucida Console', monospace; display: flex; gap: 0.625rem; flex-wrap: wrap;">
  <button style="background: rgba(0,180,216,0.1); border: 1px solid rgba(0,180,216,0.5); color: #00b4d8; padding: 0.5rem 1.25rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; cursor: pointer; font-family: inherit;">Execute</button>
  <button style="background: transparent; border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); padding: 0.5rem 1.25rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; cursor: pointer; font-family: inherit;">Calibrate</button>
  <button style="background: transparent; border: 1px dashed rgba(255,255,255,0.15); color: rgba(255,255,255,0.4); padding: 0.5rem 1.25rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; cursor: pointer; font-family: inherit;">Draft</button>
  <button style="background: transparent; border: 1px solid rgba(251,191,36,0.4); color: rgba(251,191,36,0.8); padding: 0.5rem 1.25rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; cursor: pointer; font-family: inherit;">⚠ Review</button>
</div>

Annotated schematic card

SEC. B — Network Topology

Load balancer distributes traffic across three availability zones. Primary routing through us-east-1a with failover to us-east-1b and us-east-1c.

zone a

3 nodes

zone b

3 nodes

zone c

2 nodes

View code
<div style="padding: 2rem; background: #0a1628; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 20px 20px; font-family: 'Courier New', 'Lucida Console', monospace;">
  <div style="max-width: 28rem; border: 1px solid rgba(255,255,255,0.15); padding: 1.25rem; position: relative;">
    <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px dashed rgba(255,255,255,0.1);">
      <div style="width: 8px; height: 8px; border: 1px solid #00b4d8; position: relative;">
        <div style="position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; background: #00b4d8; transform: translate(-50%,-50%);"></div>
      </div>
      <span style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: #e8f0ff;">SEC. B — Network Topology</span>
    </div>
    <p style="font-size: 0.75rem; color: rgba(255,255,255,0.55); line-height: 1.7; margin: 0 0 1.25rem 0;">Load balancer distributes traffic across three availability zones. Primary routing through us-east-1a with failover to us-east-1b and us-east-1c.</p>
    <div style="display: flex; gap: 1rem;">
      <div style="flex: 1; border: 1px dashed rgba(0,180,216,0.3); padding: 0.75rem; text-align: center;">
        <p style="font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(0,180,216,0.6); margin: 0 0 0.375rem 0;">zone a</p>
        <p style="font-size: 1.125rem; color: #e8f0ff; margin: 0;">3<span style="font-size: 0.625rem; color: rgba(255,255,255,0.4);"> nodes</span></p>
      </div>
      <div style="flex: 1; border: 1px dashed rgba(0,180,216,0.3); padding: 0.75rem; text-align: center;">
        <p style="font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(0,180,216,0.6); margin: 0 0 0.375rem 0;">zone b</p>
        <p style="font-size: 1.125rem; color: #e8f0ff; margin: 0;">3<span style="font-size: 0.625rem; color: rgba(255,255,255,0.4);"> nodes</span></p>
      </div>
      <div style="flex: 1; border: 1px dashed rgba(251,191,36,0.3); padding: 0.75rem; text-align: center;">
        <p style="font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(251,191,36,0.6); margin: 0 0 0.375rem 0;">zone c</p>
        <p style="font-size: 1.125rem; color: #fbbf24; margin: 0;">2<span style="font-size: 0.625rem; color: rgba(255,255,255,0.4);"> nodes</span></p>
      </div>
    </div>
  </div>
</div>

Engineering login panel

[SEC-01] Access Control
clearance: level-3 protocol: tls-1.3
View code
<div style="padding: 2rem; background: #0a1628; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 20px 20px; font-family: 'Courier New', 'Lucida Console', monospace; display: flex; justify-content: center;">
  <div style="max-width: 22rem; width: 100%; border: 1px solid rgba(255,255,255,0.15); position: relative;">
    <div style="position: absolute; top: -0.5rem; left: 1rem; background: #0a1628; padding: 0 0.5rem;">
      <span style="font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.4);">[SEC-01] Access Control</span>
    </div>
    <div style="padding: 1.75rem 1.5rem 1.5rem;">
      <div style="margin-bottom: 1.25rem;">
        <label style="display: block; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(0,180,216,0.6); margin-bottom: 0.375rem;">dim: operator id</label>
        <input type="text" placeholder="XX-000-000" style="width: 100%; box-sizing: border-box; background: rgba(0,180,216,0.05); border: 1px dashed rgba(0,180,216,0.2); color: #e8f0ff; padding: 0.5rem 0.75rem; font-family: 'Courier New', monospace; font-size: 0.75rem; outline: none;" />
      </div>
      <div style="margin-bottom: 1.25rem;">
        <label style="display: block; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(0,180,216,0.6); margin-bottom: 0.375rem;">dim: access key</label>
        <input type="password" placeholder="••••••••••••" style="width: 100%; box-sizing: border-box; background: rgba(0,180,216,0.05); border: 1px dashed rgba(0,180,216,0.2); color: #e8f0ff; padding: 0.5rem 0.75rem; font-family: 'Courier New', monospace; font-size: 0.75rem; outline: none;" />
      </div>
      <button style="width: 100%; background: rgba(0,180,216,0.1); border: 1px solid rgba(0,180,216,0.4); color: #00b4d8; padding: 0.5rem; font-family: 'Courier New', monospace; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; cursor: pointer;">Authorize Entry</button>
      <div style="margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed rgba(255,255,255,0.08); display: flex; justify-content: space-between;">
        <span style="font-size: 0.5625rem; color: rgba(255,255,255,0.25);">clearance: level-3</span>
        <span style="font-size: 0.5625rem; color: rgba(255,255,255,0.25);">protocol: tls-1.3</span>
      </div>
    </div>
  </div>
</div>

Technical timeline

14:32:07 — deploy initiated

Build artifact #2847 compiled. Image pushed to registry. SHA: a3f8c2e

14:33:42 — rollout started

Canary deployment to 10% of traffic. Health checks passing across all 3 zones.

14:35:00 — awaiting approval

Full rollout requires operator confirmation. Metrics within tolerance. [ACTION REQUIRED]

View code
<div style="padding: 2rem; background: #0a1628; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 20px 20px; font-family: 'Courier New', 'Lucida Console', monospace;">
  <div style="max-width: 28rem;">
    <div style="position: relative; padding-left: 2rem;">
      <div style="position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; border-left: 1px dashed rgba(0,180,216,0.2);"></div>
      <div style="position: relative; padding-bottom: 1.5rem;">
        <div style="position: absolute; left: -2rem; top: 0.125rem; width: 8px; height: 8px; border: 1px solid #00b4d8; background: #0a1628;">
          <div style="position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; background: #00b4d8; transform: translate(-50%,-50%);"></div>
        </div>
        <span style="font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(0,180,216,0.5);">14:32:07 — deploy initiated</span>
        <p style="font-size: 0.75rem; color: rgba(255,255,255,0.6); margin: 0.375rem 0 0 0; line-height: 1.5;">Build artifact #2847 compiled. Image pushed to registry. SHA: <span style="color: #00b4d8;">a3f8c2e</span></p>
      </div>
      <div style="position: relative; padding-bottom: 1.5rem;">
        <div style="position: absolute; left: -2rem; top: 0.125rem; width: 8px; height: 8px; border: 1px solid #00b4d8; background: #0a1628;">
          <div style="position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; background: #00b4d8; transform: translate(-50%,-50%);"></div>
        </div>
        <span style="font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(0,180,216,0.5);">14:33:42 — rollout started</span>
        <p style="font-size: 0.75rem; color: rgba(255,255,255,0.6); margin: 0.375rem 0 0 0; line-height: 1.5;">Canary deployment to 10% of traffic. Health checks passing across all 3 zones.</p>
      </div>
      <div style="position: relative;">
        <div style="position: absolute; left: -2rem; top: 0.125rem; width: 8px; height: 8px; border: 1px solid #fbbf24; background: #0a1628;">
          <div style="position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; background: #fbbf24; transform: translate(-50%,-50%);"></div>
        </div>
        <span style="font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(251,191,36,0.5);">14:35:00 — awaiting approval</span>
        <p style="font-size: 0.75rem; color: rgba(255,255,255,0.6); margin: 0.375rem 0 0 0; line-height: 1.5;">Full rollout requires operator confirmation. Metrics within tolerance. <span style="color: #fbbf24;">[ACTION REQUIRED]</span></p>
      </div>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt
You generate UI in a blueprint/technical drawing aesthetic — the visual language of architectural plans and engineering schematics translated into digital interfaces. White and cyan lines on deep blueprint blue, grid patterns, dashed construction lines, dimension annotations, and the precise, measured beauty of technical drafting.

VISUAL RULES:
- Background: Deep blueprint blue. #0a1628 for the base, #0d1f3c for panels, #112a4a for elevated surfaces. Never gray or black — always deep saturated blue.
- Grid pattern: Subtle grid lines on backgrounds. Use a repeating CSS background pattern: `background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 20px 20px;`
- Primary lines: White (#e8f0ff) at varying opacity. Full opacity for borders and text, 20-40% for grid lines, 10% for background grids.
- Accent: Cyan (#00b4d8) for highlights, active states, and dimension lines. Secondary amber (#fbbf24) for warnings and measurements.
- Text: White (#e8f0ff) for primary, rgba(255,255,255,0.6) for secondary, rgba(255,255,255,0.35) for tertiary/grid labels.
- Typography: Technical monospace. `font-family: 'Courier New', 'Lucida Console', monospace`. All caps for labels. Precise, architectural letterspacing.
- Borders: 1px solid white at low opacity (15-25%). Dashed borders (`border-style: dashed`) for construction lines and secondary divisions.
- Border radius: 0px. Everything is sharp and angular. Technical drawings don't have rounded corners.
- Spacing: Grid-aligned. Use multiples of 20px where possible for padding/margins. Everything snaps to the grid.

SPECIFIC PATTERNS:
- Cards/panels: bg-[#0d1f3c] with 1px dashed border at 20% white opacity. Optional grid background inside.
- Headers/labels: UPPERCASE, monospace, letter-spacing 0.15em+, white at 50-60% opacity. Prefix with measurement notation like `[A-01]` or `SEC.` or `DIM:`.
- Buttons: Outlined only — transparent bg, 1px solid white border. Uppercase monospace text. Active/hover: fill with cyan at low opacity.
- Data values: Large monospace numbers in full white. Unit labels in smaller text at 50% opacity.
- Dividers: Dashed lines with optional dimension arrows (← →) or tick marks at endpoints.
- Annotations: Small text with leader lines (thin lines connecting label to element). Use `—` dashes as connectors.
- Crosshair/target markers: + shapes at intersection points for technical precision feel.

ANTI-PATTERNS:
- No rounded corners. Zero border-radius everywhere.
- No gradients or color fills. Outlines and lines only.
- No sans-serif fonts. Everything monospace.
- No warm colors (no red, orange, terracotta, pink) except amber for warnings.
- No shadows of any kind. Blueprints are flat.
- No emoji or decorative elements. Keep it technical.

Related prompts

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.

GO/NO-GO Poll MET T+00:42:16
FLIGHT
GO
GNC
GO
TELMU
HOLD
PROP
GO
COMM
GO
4/5 GO · Awaiting TELMU resolution
Altitude
408.2 km
NOM: 405–410 km
Velocity
7.66 km/s
NOM: 7.65–7.67 km/s
Inclination
51.64°
NOM: 51.6°
Dashboard

Mission Control

🔥86system

Generates UI inspired by NASA ops centers — dark backgrounds, status boards, telemetry readouts, countdown timers, grid-precise layouts, and the focused calm of people who launch rockets for a living.