Dracula — TUI Design System

Dark, colorful, and easy on the eyes. Based on the beloved Dracula color scheme used by millions of developers.

1. Theme Overview

• Mood: Dark, vibrant, comfortable
• Density: Balanced — clear hierarchy without crowding
• Target: Developer tools, code viewers, terminal dashboards, any dev-facing CLI
• Terminal: 256-color minimum, TrueColor recommended

2. Color Palette

Semantic Roles

Role	Hex	ANSI 256	ANSI 16	Usage
Background	#282a36	236	black	Main background
Foreground	#f8f8f2	253	white	Default text
Primary	#bd93f9	141	bright magenta	Purple — primary accent
Secondary	#6272a4	61	bright black	Comment — muted text
Accent	#ff79c6	212	magenta	Pink — highlights, links
Success	#50fa7b	84	green	Green — positive
Warning	#f1fa8c	228	yellow	Yellow — caution
Error	#ff5555	203	red	Red — errors
Muted	#6272a4	61	bright black	Comment color — dim info
Surface	#44475a	239	bright black	Current line — raised surface

Extended Dracula Palette

Name	Hex	ANSI 256	Usage
Cyan	#8be9fd	117	Types, parameters, info
Orange	#ffb86c	215	Constants, numbers
Selection	#44475a	239	Highlighted/selected items
Current Line	#44475a	239	Active row background

3. Typography & ASCII Art

• Header font: slant or standard (figlet) — bold but readable
• Body text: plain terminal font
• Emphasis: bold + Purple or Pink
• Code/values: Cyan or Green

Text Hierarchy

Level	Style	Example Usage
H1	figlet slant + Purple	App title, splash
H2	BOLD + Purple	Section headers
H3	BOLD + Pink	Subsections
Body	Foreground	Content text
Caption	Comment (muted)	Help text, metadata
Data	Cyan	Numeric values, types
Strings	Yellow	String values, paths

4. Borders & Box Drawing

Primary Border

╭──────────────╮
│   content    │
╰──────────────╯

Rounded corners in Comment color. Dracula keeps borders subtle.

Parts Table

Part	Character	Usage
top_left	╭	Panel corners
top_right	╮
bottom_left	╰
bottom_right	╯
horizontal	─
vertical	│
cross	┼	Table intersections
tee_down	┬
tee_up	┴
tee_right	├
tee_left	┤

Dividers

• Horizontal: ────────────────── (Comment color)
• Section break: ── ◆ ──

5. Components

Buttons / Actions

 ▸ Submit    Cancel    Help
   ↑          ↑        ↑
 focused    normal    muted

• Focused: ▸ prefix + BOLD + reverse (Purple bg)
• Normal: Foreground
• Disabled: Comment + dim

Input Fields

  Email: ╭────────────────────────╮
         │ user@example.com_      │
         ╰────────────────────────╯

• Active: Purple border
• Inactive: Comment border
• Error: Red border + Red error text below

Tables

  Name              Role          Status
  ──────────────────────────────────────────
  Alice             Developer     ✓ Active
  Bob               Designer      ○ Away
  Carol             DevOps        ✗ Offline

No outer border. Comment-colored divider. Clean and readable.

Lists / Menus

    File browser
  ▸ Terminal
    Settings
    Themes

• Selected: ▸ + BOLD + Purple
• Normal: Foreground
• Disabled: Comment + dim

Panels / Cards

╭── Git Status ─────────────────╮
│                                │
│  ✓ main        3 ahead        │
│  M src/app.ts  +42  -12       │
│  A README.md   +85            │
│                                │
╰────────────────────────────────╯

Title in Purple. File status in Green (added), Red (deleted), Cyan (modified).

Status Bar

 ▸ main · 3 files · ✓ clean                             ~/projects/app

Purple active dot. Comment separators. Cyan for paths.

6. Layout & Spacing

• Min terminal width: 80
• Ideal terminal width: 120
• Padding inside panels: 1 line top/bottom, 1 char left/right
• Gap between components: 1 empty line
• Indent level: 2 spaces

Alignment Principles

• Left-align content
• Right-align status bar secondary info
• Comfortable spacing — readable, not cramped

7. Icons & Indicators

Purpose	Icon	Fallback (ASCII)
Success	✓	+
Error	✗	x
Warning	!	!
Info	●	*
Pending	○	o
Running	▸	>
Spinner	⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏	|/-
Arrow	→	->
Bullet	◆	*
Selected	▸	>
Modified	M	M
Added	A	A
Deleted	D	D

8. Animation & Motion

Spinners

• Default: ⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏ at 80ms in Purple
• Processing: ◜ ◠ ◝ ◞ ◡ ◟ at 120ms in Pink

Transitions

• No animated transitions — instant state changes
• Spinners for async operations only

Progress

  ▕████████████████░░░░░░░░▏ 62%

• Filled: █ in Purple, Empty: ░ in Comment
• Caps: ▕ ▏
• Show percentage

9. Agent Prompt Guide

Quick Reference

Background: #282a36  (dark blue-gray)
Foreground: #f8f8f2  (off-white)
Purple:     #bd93f9  (primary)
Pink:       #ff79c6  (accent/links)
Green:      #50fa7b  (success)
Cyan:       #8be9fd  (info/data)
Yellow:     #f1fa8c  (warning/strings)
Red:        #ff5555  (error)
Orange:     #ffb86c  (constants)
Comment:    #6272a4  (muted/borders)
Border:     ╭─╮│╰─╯  (rounded, comment color)
Style:      dark vibrant, purple+pink accents, rounded borders, dev-focused

Example Prompts

• “Build a git dashboard: Dracula palette, rounded borders in comment gray, purple headers, green/red for diff stats, cyan for file paths”
• “Create a code viewer: dark bg #282a36, Dracula syntax colors (purple keywords, green strings, cyan types), comment-colored line numbers”
• “Design a process monitor: Dracula theme, purple progress bars, pink highlights on warnings, borderless tables with comment dividers”

Do’s and Don’ts

Do

• Use Purple as the primary accent — it’s the Dracula signature
• Use Comment color for all borders and muted elements
• Use the full color palette — Dracula is meant to be colorful
• Pair colors meaningfully: Green for positive, Red for negative, Cyan for info
• Use rounded corners for a modern feel

Don’t

• Don’t use background colors other than Background and Current Line
• Don’t use bright white — Foreground (#f8f8f2) is off-white by design
• Don’t use heavy or double-line borders — too aggressive
• Don’t overuse Pink — save it for actual highlights and links
• Don’t use emoji — Dracula is clean Unicode