Retrosystem
Cyberpunk Neon
This prompt produces genuinely distinct output
Generates UI drenched in neon glow — cyan, magenta, and violet on near-black surfaces. Glowing borders, scan-line textures, HUD-style overlays. Blade Runner meets Bloomberg Terminal.
neondark modesci figlowing borders
Added February 14, 2026 by unslop.dev
Example output
HUD status card
// system metrics
cpu load
23.4%
memory
8.2 / 16 GB
disk i/o
94.1%
> uptime: 14d 6h 32m
node-07
View code
<div style="padding: 2rem; background: #07070f; font-family: 'Consolas', 'Courier New', monospace;">
<div style="background: #0c0c1a; border: 1px solid rgba(0,229,255,0.2); border-radius: 4px; padding: 1.25rem; max-width: 22rem; position: relative; box-shadow: 0 0 20px rgba(0,229,255,0.05);">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(0,229,255,0.1);">
<span style="font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: #00e5ff;">// system metrics</span>
<span style="width: 6px; height: 6px; border-radius: 50%; background: #00e5ff; box-shadow: 0 0 8px rgba(0,229,255,0.6);"></span>
</div>
<div style="display: flex; flex-direction: column; gap: 0.625rem;">
<div style="display: flex; justify-content: space-between; align-items: baseline;">
<span style="font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;">cpu load</span>
<span style="font-size: 1.25rem; font-weight: 600; color: #e2e8f0;">23.4<span style="font-size: 0.75rem; color: #64748b;">%</span></span>
</div>
<div style="height: 2px; background: rgba(0,229,255,0.1); border-radius: 1px;">
<div style="width: 23.4%; height: 100%; background: #00e5ff; border-radius: 1px; box-shadow: 0 0 6px rgba(0,229,255,0.4);"></div>
</div>
<div style="display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.25rem;">
<span style="font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;">memory</span>
<span style="font-size: 1.25rem; font-weight: 600; color: #e2e8f0;">8.2<span style="font-size: 0.75rem; color: #64748b;"> / 16 GB</span></span>
</div>
<div style="height: 2px; background: rgba(0,229,255,0.1); border-radius: 1px;">
<div style="width: 51%; height: 100%; background: #a855f7; border-radius: 1px; box-shadow: 0 0 6px rgba(168,85,247,0.4);"></div>
</div>
<div style="display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.25rem;">
<span style="font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;">disk i/o</span>
<span style="font-size: 1.25rem; font-weight: 600; color: #ff2d7b;">94.1<span style="font-size: 0.75rem; color: #64748b;">%</span></span>
</div>
<div style="height: 2px; background: rgba(255,45,123,0.1); border-radius: 1px;">
<div style="width: 94.1%; height: 100%; background: #ff2d7b; border-radius: 1px; box-shadow: 0 0 6px rgba(255,45,123,0.4);"></div>
</div>
</div>
<div style="margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid rgba(0,229,255,0.1); display: flex; justify-content: space-between;">
<span style="font-size: 0.6875rem; color: #475569;">> uptime: 14d 6h 32m</span>
<span style="font-size: 0.6875rem; color: #475569;">node-07</span>
</div>
</div>
</div>Neon button group
View code
<div style="padding: 2rem; background: #07070f; font-family: 'Consolas', 'Courier New', monospace; display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;"> <button style="background: transparent; border: 1px solid rgba(0,229,255,0.5); color: #00e5ff; padding: 0.5rem 1.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; border-radius: 3px; font-family: inherit; box-shadow: 0 0 12px rgba(0,229,255,0.15), inset 0 0 12px rgba(0,229,255,0.05);">Initialize</button> <button style="background: transparent; border: 1px solid rgba(255,45,123,0.5); color: #ff2d7b; padding: 0.5rem 1.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; border-radius: 3px; font-family: inherit; box-shadow: 0 0 12px rgba(255,45,123,0.15), inset 0 0 12px rgba(255,45,123,0.05);">Terminate</button> <button style="background: transparent; border: 1px solid rgba(168,85,247,0.4); color: #a855f7; padding: 0.5rem 1.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; border-radius: 3px; font-family: inherit;">Standby</button> <button style="background: transparent; border: 1px solid rgba(100,116,139,0.3); color: #475569; padding: 0.5rem 1.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; cursor: not-allowed; border-radius: 3px; font-family: inherit; opacity: 0.5;">Offline</button> </div>
Alert notification
// critical
14:32:07 UTC
Connection pool exhausted on db-primary. Active connections: 500/500. New requests are being queued.
View code
<div style="padding: 2rem; background: #07070f; font-family: 'Consolas', 'Courier New', monospace;">
<div style="background: #0c0c1a; border: 1px solid rgba(255,45,123,0.3); border-radius: 4px; padding: 1rem 1.25rem; max-width: 28rem; box-shadow: 0 0 20px rgba(255,45,123,0.08); display: flex; gap: 0.875rem; align-items: flex-start;">
<span style="width: 8px; height: 8px; border-radius: 50%; background: #ff2d7b; box-shadow: 0 0 10px rgba(255,45,123,0.6); flex-shrink: 0; margin-top: 0.25rem;"></span>
<div>
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem;">
<span style="font-size: 0.75rem; font-weight: 600; color: #ff2d7b; text-transform: uppercase; letter-spacing: 0.08em;">// critical</span>
<span style="font-size: 0.625rem; color: #475569;">14:32:07 UTC</span>
</div>
<p style="font-size: 0.8125rem; color: #cbd5e1; margin: 0 0 0.75rem 0; line-height: 1.5;">Connection pool exhausted on db-primary. Active connections: 500/500. New requests are being queued.</p>
<div style="display: flex; gap: 0.5rem;">
<button style="background: transparent; border: 1px solid rgba(255,45,123,0.4); color: #ff2d7b; padding: 0.25rem 0.75rem; font-size: 0.6875rem; font-family: inherit; cursor: pointer; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em;">Investigate</button>
<button style="background: transparent; border: 1px solid rgba(100,116,139,0.2); color: #64748b; padding: 0.25rem 0.75rem; font-size: 0.6875rem; font-family: inherit; cursor: pointer; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em;">Dismiss</button>
</div>
</div>
</div>
</div>System prompt
Copy this into your AI system prompt
You generate UI in a cyberpunk neon aesthetic — interfaces that look like they run on a rain-soaked rooftop terminal in 2077. Dark surfaces, electric neon accents, glowing edges, and that unmistakable feeling of tech noir. This is not retro-terminal — it's futuristic, luminous, and dangerous. VISUAL RULES: - Background: Deep near-black with blue undertone. #07070f for page, #0c0c1a for panels, #12122a for elevated surfaces. Never gray — always tinted toward blue/purple. - Primary neon: Electric cyan (#00e5ff). Used for borders, highlights, active states, and key data. Apply glow: `box-shadow: 0 0 12px rgba(0,229,255,0.3), 0 0 4px rgba(0,229,255,0.15)`. - Secondary neon: Hot magenta (#ff2d7b). Used for alerts, destructive actions, badges, secondary accents. Glow: `box-shadow: 0 0 12px rgba(255,45,123,0.3)`. - Tertiary: Electric violet (#a855f7) for tertiary states, subtle accents, visited/passive states. - Text: #e2e8f0 (blue-tinted white) for primary. #94a3b8 for secondary. #64748b for dimmed. Never pure white — always slightly blue. - Typography: Use a monospace or technical sans-serif. `font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace` for data/labels. Sans-serif for headings if needed. Text should feel technical and precise. - Borders: 1px solid with neon color at low opacity. `border: 1px solid rgba(0,229,255,0.2)`. Key panels get full glow borders. - Border radius: Small. 4px-6px max. Nothing rounded — this is angular tech. - Spacing: Tight and dense like a HUD overlay. p-3 to p-4. gap-2 to gap-3. Information-dense. - Decorative elements: Corner brackets on panels (`┌ ┐ └ ┘`), thin horizontal scan lines, small glowing dots for status indicators. SPECIFIC PATTERNS: - Cards/panels: bg-[#0c0c1a] border 1px cyan/20 with subtle cyan glow on hover. Small corner accents using `::before`/`::after` pseudo-elements with neon lines. - Buttons primary: Transparent bg, 1px cyan border, cyan text, glow on hover. Uppercase text-xs tracking-widest. Never filled — outlines only. - Buttons danger: Same pattern but with magenta (#ff2d7b). - Inputs: bg-[#07070f] border 1px cyan/15, cyan text on focus, subtle glow. Monospace font. - Status indicators: Small circles (4-6px) with neon glow. Cyan = online, magenta = error, violet = pending, dimmed = offline. - Data labels: Uppercase, tracking-wider, text-xs, cyan or slate-400. Prefix with `//` or `>`. - Progress bars: Thin (2-3px), cyan fill on dark track, glowing tip. ANTI-PATTERNS: - No white backgrounds. No light mode. This is dark-only. - No warm colors (no orange, yellow, brown, terracotta). - No large border-radius. Nothing rounded-xl or rounded-full except tiny status dots. - No subtle shadows — use GLOW instead. `box-shadow` always uses neon color, never black/gray. - No serif fonts. Nothing editorial or literary. - No gradients as fills. Gradients only on borders or subtle background washes.
Related prompts
+----[ SYSTEM STATUS ]----+
$ api-server
[OK]
$ database
[OK]
$ worker-queue
[WARN]
$ cache-layer
[ERR]
$ cdn-nodes
[OK]
> 4/5 services operational | last check: 14:32:07 UTC
[ NEW DEPLOYMENT ]
Retro
Retro Terminal
system
Generates UI that channels the CRT monitor era — monospace everything, phosphor-green or amber on black, scan-line textures, blinking cursors. Nostalgic but functional, not just cosplay.
Speed
188 mph
Distance
4,720 mi
Score
98.7k
Retro
Synthwave Sunset
system
Generates UI bathed in 1980s synth aesthetics — hot pink to purple gradients, neon grid lines, chrome text effects, sunset palettes, and the retro-futuristic glow of an endless highway at dusk.
Now Playing
Live
Side B — Evening Mix
Recorded Feb 14, 2026 · C-90
27:14
Retro
Cassette Tape
system
Generates UI with analog audio warmth — muted oranges and browns, VU meter aesthetics, tape reel decorations, and the cozy lo-fi quality of a well-loved mixtape. Press play on your interface.