Cyberpunk — TUI Design System

Neon lights in dark rain. High contrast, electric colors, data streams. Inspired by Blade Runner, Ghost in the Shell, and the CLI as a hacking interface.

1. Theme Overview

Mood: Futuristic, electric, high-energy
Density: Compact — dense information, multiple panels
Target: Hacker tools, security dashboards, network monitors, creative CLI apps, TUI games
Terminal: TrueColor required for best effect, 256-color acceptable

2. Color Palette

Semantic Roles

Role	Hex	ANSI 256	ANSI 16	Usage
Background	`#0d0d1a`	`232`	`black`	Deep dark blue-black
Foreground	`#e0e0ff`	`189`	`white`	Default text, slight blue tint
Primary	`#00ffff`	`51`	`bright cyan`	Cyan neon — main accent
Secondary	`#ff00ff`	`201`	`bright magenta`	Magenta neon — secondary
Accent	`#ffff00`	`226`	`bright yellow`	Yellow — hot highlights
Success	`#00ff88`	`48`	`green`	Neon green
Warning	`#ffaa00`	`214`	`yellow`	Orange warning
Error	`#ff0044`	`197`	`red`	Hot red/pink
Muted	`#4a4a6a`	`60`	`bright black`	Faded blue-gray
Surface	`#1a1a2e`	`234`	`black`	Panel background

Neon Gradient (for decorative elements)

#00ffff → #00ff88 → #ffff00 → #ff00ff → #ff0044
  cyan      green     yellow    magenta     red

Use sparingly — for borders, headers, or decorative lines only.

3. Typography & ASCII Art

Header font: cyberlarge or slant (figlet) — angular, aggressive
Body text: plain terminal font
Emphasis: BOLD + neon color, or reverse with Primary
Code/values: Primary (cyan) color

Text Hierarchy

Level	Style	Example Usage
H1	figlet `slant` + Primary (cyan)	Splash screen, app title
H2	BOLD + Primary	Section headers
H3	BOLD + Secondary (magenta)	Subsections
Body	Foreground	Content text
Caption	Muted	Timestamps, metadata
Data	Primary (cyan)	Numbers, values, IP addresses

4. Borders & Box Drawing

Primary Border

╔══════════════════╗
║    content       ║
╚══════════════════╝

Double-line in Primary (cyan) color.

Parts Table

Part	Character	Usage
top_left	`╔`	Main panels
top_right	`╗`
bottom_left	`╚`
bottom_right	`╝`
horizontal	`═`
vertical	`║`
cross	`╬`
tee_down	`╦`
tee_up	`╩`
tee_right	`╠`
tee_left	`╣`

Secondary Border

Heavy single-line in Secondary (magenta) for nested panels:

┏━━━━━━━━━━┓
┃  nested  ┃
┗━━━━━━━━━━┛

Dividers

Horizontal: ═══════════════════ (Primary color)
Section break: ══╣ SECTION ╠══ (mixed Primary + Accent)
Data stream: ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ (Muted, decorative)

5. Components

Buttons / Actions

 ╔═══════════╗   ┏━━━━━━━━━━━┓   ┌───────────┐
 ║ > EXECUTE ║   ┃  CANCEL   ┃   │   HELP    │
 ╚═══════════╝   ┗━━━━━━━━━━━┛   └───────────┘
      ↑                ↑              ↑
  focused(cyan)   unfocused(mag)    muted

Focused: double-border + Primary (cyan) + > prefix
Unfocused: heavy single-border + Secondary (magenta)
Disabled: single-border + Muted + dim

Input Fields

  TARGET: ║ 192.168.1.1_          ║
          ╚════════════════════════╝

Active: double-line bottom + Primary glow
Inactive: single-line + Muted
Error: Error color border + flashing !

Tables

╔═══════════════════╦══════════╦═════════╗
║ NODE              ║ STATUS   ║ LATENCY ║
╠═══════════════════╬══════════╬═════════╣
║ node-alpha-01     ║ ● ONLINE ║   12ms  ║
║ node-beta-02      ║ ● ONLINE ║   34ms  ║
║ node-gamma-03     ║ ○ DOWN   ║    --   ║
╚═══════════════════╩══════════╩═════════╝

Full borders. Status dots ● in Success/Error color. Numbers in Primary.

Lists / Menus

  ╔══════════════════════╗
  ║  [1] SCAN NETWORK    ║
  ║  [2] PORT SWEEP      ║
  ║ >[3] TRACE ROUTE     ║
  ║  [4] PACKET CAPTURE  ║
  ║  [0] EXIT            ║
  ╚══════════════════════╝

Selected: > + BOLD + Primary (cyan)
Normal: Foreground
Hotkey: [n] in Accent (yellow)

Panels / Cards

╔══╣ NETWORK TRAFFIC ╠═══════════════════╗
║                                         ║
║  IN  ████████████████░░░░  845 MB/s     ║
║  OUT ██████████░░░░░░░░░░  412 MB/s     ║
║                                         ║
║  ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪  ║
║  PEAK: 1.2 GB/s  AVG: 623 MB/s         ║
║                                         ║
╚═════════════════════════════════════════╝

Title with ╣ ╠ markers. Data values in Primary. Labels in Secondary.

Status Bar

║ ● CONNECTED ║ NODE: alpha-01 ║ LATENCY: 12ms ║ ▲ 845MB/s ▼ 412MB/s ║

Neon-colored segments. ● status dot in Success/Error.

6. Layout & Spacing

Min terminal width: 100
Ideal terminal width: 140
Padding inside panels: 1 line top/bottom, 1 char left/right
Gap between components: 0-1 line (dense!)
Indent level: 2 spaces

Alignment Principles

Split layout: multiple panels side by side (like tmux panes)
Right-align all numbers and metrics
Center splash screens and titles
Dense tiling — minimize dead space

7. Icons & Indicators

Purpose	Icon	Fallback (ASCII)
Online	`●`	`[*]`
Offline	`○`	`[ ]`
Success	`✓`	`OK`
Error	`✗`	`ERR`
Warning	`⚠`	`[!]`
Locked	`◆`	`[#]`
Unlocked	`◇`	`[.]`
Upload	`▲`	`UP`
Download	`▼`	`DN`
Signal	`█▓▒░`	`####..`
Spinner	`◐◓◑◒`	`\|/-`
Data	`▪`	`.`
Cursor	`▌`	`_`
Prompt	`›`	`>`

8. Animation & Motion

Spinners

Default: ◐◓◑◒ at 100ms — rotating quarter circle
Processing: ▰▱▱▱▱ → ▰▰▱▱▱ → ▰▰▰▱▱ → ▰▰▰▰▱ → ▰▰▰▰▰ → ▱▰▰▰▰ → ▱▱▰▰▰ → ▱▱▱▰▰ → ▱▱▱▱▰ → ▱▱▱▱▱ at 80ms

Transitions

“Matrix rain” — random characters falling for loading screens
Text “decode” — random chars → real chars for reveals (30ms/char)
Glitch — occasional random char replacement for atmosphere (subtle!)

Progress

  ▐████████████░░░░░░░░▌ 58% ▸ SCANNING

Filled: █ in Primary, Empty: ░ in Muted
Caps: ▐ ▌
Show percentage + action label
Color shifts from Primary to Success on completion

9. Agent Prompt Guide

Quick Reference

Background: #0d0d1a  (deep blue-black)
Foreground: #e0e0ff  (light blue-white)
Primary:    #00ffff  (neon cyan)
Secondary:  #ff00ff  (neon magenta)
Accent:     #ffff00  (electric yellow)
Border:     ╔═╗║╚═╝  (double line, cyan)
Style:      cyberpunk neon, high contrast, dense panels, data-heavy

Example Prompts

“Build a network dashboard: cyberpunk style, neon cyan borders, magenta secondary panels, dense tile layout, ● status dots, traffic bars, all numbers in cyan”
“Create a system monitor: dark blue-black bg, double-line cyan borders, ╣TITLE╠ headers, real-time metrics with neon colors, glitch aesthetic”
“Design a hacker-style menu: numbered options [1]-[9] in yellow, > selector in cyan, bordered box, ALL CAPS, keyboard-driven”

Do’s and Don’ts

Do

Use neon colors boldly — this theme IS about color
Keep backgrounds dark — neon only pops on darkness
Use double-line borders for main containers
Pack information densely — multiple panels, split views
Add decorative elements (▪ dot lines, signal bars) for atmosphere

Don’t

Don’t use light backgrounds — kills the neon effect
Don’t mix too many neon colors in one component (2 max)
Don’t use rounded corners — too soft for cyberpunk
Don’t use emoji — breaks the hacker aesthetic
Don’t use pastel colors — everything should be vivid and electric

Palette

At a glance

Design System · Cyberpunk