# DESIGN_SYSTEM — Recoil Production Console

Extracted from `editors/styles/console.css`, `canvas.css`, and `manual.css`. All implementation phases reference this document for visual decisions.

## Color Palette

```css
:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-tertiary: #1a1a24;
  --bg-card: #12121a;
  --bg-hover: #1e1e2e;
  --bg-active: #252535;

  --border-dim: #1e1e2e;
  --border-default: #2a2a3a;
  --border-bright: #3a3a4a;

  --text-primary: #e0e0e0;
  --text-secondary: #aaa;
  --text-dim: #666;
  --text-label: #888;

  --accent-cyan: #00f0ff;
  --accent-cyan-dim: #003a40;
  --accent-green: #22c55e;
  --accent-green-dim: #1a3a2e;
  --accent-amber: #f59e0b;
  --accent-amber-dim: #5a3d00;
  --accent-red: #ef4444;
  --accent-red-dim: #5a1a1a;
  --accent-magenta: #ff00aa;
  --accent-purple: #9c27b0;
}
```

## Typography

| Role | Font | Size | Weight | Transform |
|------|------|------|--------|-----------|
| Display/Brand | `Orbitron` | 11px | 700 | UPPERCASE, 4px tracking |
| UI Chrome (labels, buttons, headers) | `JetBrains Mono` | 10-12px | 400-600 | UPPERCASE, 1px tracking |
| Body/Content | `Inter` | 14px | 300-600 | Normal |
| Code/Data | `JetBrains Mono` | 12px | 400 | Normal |

```css
--font-display: 'Orbitron', monospace;
--font-mono: 'JetBrains Mono', 'SF Mono', monospace;
--font-sans: 'Inter', -apple-system, sans-serif;
```

## Spacing & Radii

```css
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;

--transition-fast: 150ms ease;
--transition-normal: 250ms ease;
```

Standard spacing scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px.

## Component Patterns

### Buttons
- **Primary action:** `background: var(--accent-cyan); color: #000; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; border: none; border-radius: var(--radius-sm); padding: 6px 14px; cursor: pointer;`
- **Secondary/back:** `background: transparent; color: var(--text-secondary); border: 1px solid var(--border-default);`
- **Danger:** `background: var(--accent-red-dim); color: var(--accent-red); border: 1px solid var(--accent-red);`
- **Success:** `background: var(--accent-green-dim); color: var(--accent-green);`

### Cards
```css
background: var(--bg-card);
border: 1px solid var(--border-dim);
border-radius: var(--radius-md);
overflow: hidden;
```

### Status Bar
Fixed bottom bar. `height: 28px; background: var(--bg-primary); border-top: 1px solid var(--border-dim);`
Font: `var(--font-mono) 10px UPPERCASE`.

### Console Bar (top)
Fixed top bar. `height: 44px; background: var(--bg-primary); border-bottom: 1px solid var(--border-dim);`
Brand in Orbitron cyan. Tabs in JetBrains Mono.

### Toast
`position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; background: var(--bg-tertiary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 8px 20px;`

## New Component: Director Mode Toggle

Visual treatment for the Director Mode toggle in the status bar:
- Default (off): subtle, blends with status bar
- Active (on): amber glow accent, clearly visible
- Pattern: checkbox + label, matching existing status bar typography

```css
.director-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  cursor: pointer;
}
.director-toggle input[type="checkbox"] { display: none; }
.director-toggle .toggle-indicator {
  width: 28px; height: 14px;
  border-radius: 7px;
  background: var(--border-default);
  position: relative;
  transition: background var(--transition-fast);
}
.director-toggle .toggle-indicator::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.director-toggle input:checked + .toggle-indicator {
  background: var(--accent-amber-dim);
}
.director-toggle input:checked + .toggle-indicator::after {
  transform: translateX(14px);
  background: var(--accent-amber);
}
.director-toggle.active { color: var(--accent-amber); }
```

## New Component: Workspace Swap Button

In the console bar, a WORKBENCH button that matches the tab button aesthetic but is visually distinct (amber accent instead of cyan).

```css
.workspace-swap-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border: 1px solid var(--accent-amber);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent-amber);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-left: 8px;
}
.workspace-swap-btn:hover {
  background: var(--accent-amber-dim);
}
.workspace-swap-btn.active {
  background: var(--accent-amber);
  color: #000;
}
```

## Dynamic Aspect Ratio Variable

All viewport/frame containers use `--project-ar` instead of hardcoded `9/16`:
```css
:root {
  --project-ar: 9 / 16; /* Default, overridden by JS on load */
}
```

Container pattern for viewports:
```css
.viewport-container {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.viewport-media {
  aspect-ratio: var(--project-ar, 9 / 16);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
```

## Client Review SPA Design

Standalone. No shared CSS with the console. Neutral, minimal, dark-mode.

```css
:root {
  --cr-bg: #111118;
  --cr-surface: #1a1a22;
  --cr-border: #2a2a35;
  --cr-text: #e0e0e0;
  --cr-text-dim: #888;
  --cr-accent: #4f8cff;
  --cr-success: #22c55e;
  --cr-warning: #f59e0b;
  --cr-font: 'Inter', -apple-system, sans-serif;
  --cr-font-mono: 'JetBrains Mono', monospace;
}
```

No Orbitron, no RECOIL branding. Clean client-facing aesthetic.