# Recoil Workspace Design System

## Color Palette

Derived from the Production Console (`pipeline/editors/styles/console.css`) with
adjustments for the Blender/Logic Pro utilitarian density aesthetic.

### Backgrounds
| Token | Hex | Usage |
|-------|-----|-------|
| `--bg-base` | `#08080f` | Page background, deepest layer |
| `--bg-surface` | `#0e0e18` | Panels, cards |
| `--bg-raised` | `#161622` | Hover states, active items |
| `--bg-overlay` | `#1e1e2e` | Modals, dropdowns, tooltips |

### Borders
| Token | Hex | Usage |
|-------|-----|-------|
| `--border-dim` | `#1a1a2a` | Subtle separators |
| `--border-default` | `#2a2a3a` | Standard borders |
| `--border-focus` | `#8888cc` | Focus rings, active borders |

### Text
| Token | Hex | Usage |
|-------|-----|-------|
| `--text-primary` | `#cccccc` | Body text, labels |
| `--text-secondary` | `#888888` | Metadata, timestamps |
| `--text-dim` | `#555555` | Disabled, tertiary |
| `--text-bright` | `#eeeeee` | Headings, emphasis |

### Accents
| Token | Hex | Usage |
|-------|-----|-------|
| `--accent-blue` | `#8888cc` | Primary interactive, links, focus |
| `--accent-green` | `#88cc88` | Approved, success |
| `--accent-amber` | `#cccc88` | In-progress, warning |
| `--accent-red` | `#cc8888` | Rejected, error |
| `--accent-purple` | `#aa88cc` | Generation in-flight |

### Status Colors (Shot States)
| State | Color | Indicator |
|-------|-------|-----------|
| approved / video_complete | `--accent-green` | Filled circle |
| *_generating / *_submitted | `--accent-amber` | Pulsing circle |
| *_pending | `--text-dim` | Empty circle |
| *_failed / *_rejected | `--accent-red` | X mark |
| needs_review / icu_escalated | `--accent-purple` | Diamond |

## Typography

| Context | Font | Size | Weight |
|---------|------|------|--------|
| UI chrome, labels, tabs | System monospace | 11px | 600 |
| Data values, shot IDs | System monospace | 12px | 400 |
| Body text, descriptions | System sans-serif | 13px | 400 |
| Section headers | System monospace | 11px | 700, uppercase, letter-spacing 1px |
| Metadata, timestamps | System monospace | 10px | 400 |

Font stacks:
- Monospace: `'SF Mono', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace`
- Sans-serif: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif`

## Component Patterns

### Panel
- Background: `--bg-surface`
- Border: 1px solid `--border-dim`
- Border-radius: 0 (flush panels, no rounded corners)
- Padding: 8px internal

### Tab Bar
- Background: `--bg-base`
- Active tab: bottom border 2px `--accent-blue`, text `--text-bright`
- Inactive tab: no border, text `--text-secondary`
- Tab padding: 8px 16px
- Font: monospace 11px uppercase

### Tree Item (File Browser)
- Height: 24px
- Padding-left: 16px per nesting level
- Status dot: 8px circle, left-aligned
- Shot ID: monospace 12px
- Hover: background `--bg-raised`
- Selected: background `--bg-raised`, left border 2px `--accent-blue`
- Multi-selected: background `--bg-raised` with `--accent-blue` at 10% opacity

### Inspector Section
- Header: monospace 11px uppercase, `--text-secondary`, bottom border `--border-dim`
- Content: 4px padding
- Collapsible: chevron rotates on expand
- Key-value pairs: grid layout, key `--text-secondary`, value `--text-primary`

### Activity Item
- Height: 20px
- Left: pulsing `--accent-amber` dot (in-flight) or `--accent-green` checkmark (completed)
- Text: shot ID monospace 12px, elapsed time right-aligned
- Failed: `--accent-red` X

### Button
- Background: transparent
- Border: 1px solid `--border-default`
- Color: `--text-primary`
- Hover: border `--accent-blue`, color `--text-bright`
- Border-radius: 2px
- Padding: 4px 12px
- Font: monospace 11px

### Divider (draggable)
- Width: 4px
- Background: `--border-dim`
- Hover: `--accent-blue` at 40% opacity
- Cursor: col-resize
- No decorative grip dots

## Layout Rules
- No margin > 8px anywhere
- No padding > 12px anywhere
- No border-radius > 4px
- No gradients
- No shadows
- No decorative elements
- Information density > whitespace
- Every interactive element has a visible keyboard shortcut hint

## Keyboard Shortcut Display
- Displayed as dim monospace text next to labels: `[Esc]`, `[B]`, `[Space]`
- Color: `--text-dim`
- Font: monospace 10px