4.9 KiB
Terminal Theme Redesign — Design Spec
Date: 2026-05-18
Status: Approved
Summary
Redesign the existing Terminal design theme from a sparse green-on-black aesthetic into a polished Dracula-palette, soft-modern style. The theme keeps its forced-dark, monospace character while gaining a richer color story, rounded cards, and a more refined hover system.
Design Direction
Palette: Dracula
Card style: Soft modern — rounded corners, surface color fill, subtle shadow
Background: Dot matrix — #282a36 base with 20px radial dot grid
Accent strategy: Purple Focus — single primary accent #bd93f9, pink #ff79c6 used only in the title gradient
Color Tokens
| Token | Value | Usage |
|---|---|---|
| Background | #282a36 |
Page base |
| Surface | #313244 |
Card background |
| Surface-alt | #383a4a |
Pin card background |
| Border | #44475a |
Card/control border |
| Accent (purple) | #bd93f9 |
Primary accent — borders on hover, h2 on hover, controls on hover, title start |
| Pink | #ff79c6 |
Title gradient end only |
| Foreground | #f8f8f2 |
Body text, card h2 |
| Muted | #6272a4 |
Card p, beian, description |
| Hover fg | #cdd6f4 |
Card p on hover |
CSS variables to set on html[data-design-theme="terminal"]:
--accent: #bd93f9;
--accent-rgb: 189, 147, 249;
--accent-2: #ff79c6;
--accent-3: #8be9fd;
--accent-secondary-rgb: 255, 121, 198;
--page-gradient: #282a36;
--page-texture: radial-gradient(circle, rgba(98,114,164,0.55) 1px, transparent 1px);
--title-gradient: linear-gradient(90deg, #bd93f9 0%, #ff79c6 100%);
--control-bg: rgba(40, 42, 54, 0.92);
--control-border: #44475a;
--control-inset: transparent;
--control-fg: #f8f8f2;
The --page-texture background-size must be set to 20px 20px on the body::before element for terminal theme.
Components
Background
body uses --page-gradient (#282a36) as a flat color.
body::before applies the dot matrix texture via --page-texture at background-size: 20px 20px.
No backdrop-filter anywhere in the terminal theme.
Title
- Gradient text:
linear-gradient(90deg, #bd93f9 0%, #ff79c6 100%)via-webkit-background-clip: text - Uppercase,
letter-spacing: 0.04em - Blinking
█cursor via::after(\2588, unchanged), color#bd93f9 - Remove the current
text-shadow(conflicts with gradient text)
Cards
| Property | Value |
|---|---|
background |
#313244 |
border |
1px solid #44475a |
border-radius |
10px |
box-shadow |
0 4px 16px rgba(0,0,0,0.45) |
backdrop-filter |
none |
transform |
none (no translateY at rest) |
Pin card: background: #383a4a
Hover / focus:
border-color: #bd93f9box-shadow: 0 0 0 1px rgba(189,147,249,0.25), 0 8px 28px rgba(189,147,249,0.15), 0 4px 12px rgba(0,0,0,0.5)transform: translateY(-2px)h2 color: #bd93f9p color: #cdd6f4
Card ::before: display: none (no gradient border overlay)
Card h2: #f8f8f2 at rest
Card p: #6272a4 at rest
Controls (theme button + toggle)
| Property | Value |
|---|---|
background |
rgba(40, 42, 54, 0.92) |
border |
1px solid #44475a |
border-radius |
8px |
color |
#f8f8f2 |
box-shadow |
none |
backdrop-filter |
none |
Hover:
border-color: #bd93f9color: #bd93f9background: rgba(189, 147, 249, 0.08)- No
transform
Dark toggle: remains cursor: not-allowed and visually disabled (terminal forces dark).
Dropdown list
| Property | Value |
|---|---|
background |
rgba(40, 42, 54, 0.96) |
border |
1px solid #44475a |
border-radius |
10px |
box-shadow |
none |
Options hover / selected: background: rgba(189, 147, 249, 0.15), color: #bd93f9
Options: keep text-transform: uppercase (terminal feel)
Beian
- Rest:
#6272a4 - Hover:
#bd93f9(remove current invert-to-black-bg behavior)
Body text
color: #f8f8f2- Font chain unchanged:
ui-monospace, "JetBrains Mono", "Fira Code", "VT323", Menlo, Consolas, "Liberation Mono", monospace
What Changes vs Current
| Element | Before | After |
|---|---|---|
| Accent color | #33ff00 green |
#bd93f9 purple |
| Background | #0a0a0a |
#282a36 |
| Texture | Horizontal scanlines | Dot matrix 20px |
| Card bg | Transparent | #313244 surface fill |
| Card corners | border-radius: 0 |
border-radius: 10px |
| Card hover | Green tint bg | Purple glow + lift |
| Title | Green text-shadow | Purple→pink gradient |
| Button hover | Full green bg invert | Subtle purple tint |
| Dropdown options | Uppercase, green invert | Uppercase, purple highlight |
Out of Scope
- No changes to any other theme (Fluent, Material You, Nord, Cyberpunk, Animal Crossing, Minecraft)
- No new animations beyond the existing cursor blink
- No changes to
FORCED_DARK_DESIGN_THEMESlogic — terminal still forces dark - No font changes