# 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"]`:

```css
--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: #bd93f9`
- `box-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: #bd93f9`
- `p 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: #bd93f9`
- `color: #bd93f9`
- `background: 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_THEMES` logic — terminal still forces dark
- No font changes