# SSH Manager Transfer Console - Design System (Master)

Goal: a fast, reliable, ops-style UI for moving data across many hosts.

Design principles
- Transfer-first: primary surface is "plans / queue / progress"; connections are supporting data.
- Dense but calm: show more information without visual noise; consistent rhythm and spacing.
- Failure is actionable: errors are specific, local to the job, and keep context.
- Keyboard-friendly: visible focus rings, logical tab order, no hover-only actions.

Color and surfaces (dark-first)
- Background: deep slate with subtle gradient + faint grid/noise.
- Surfaces: layered cards (solid + slight transparency) with visible borders.
- Accent: cyan for primary actions and progress.
- Status:
  - Success: green
  - Warning: amber
  - Danger: red

Typography
- Headings: IBM Plex Sans (600-700)
- Body: IBM Plex Sans (400-500)
- Mono (paths, hostnames, commands): IBM Plex Mono

Spacing and layout
- App shell: left rail (nav) + main content; content uses max width on desktop.
- Cards: 12-16px padding on mobile, 16-20px on desktop.
- Touch targets: >= 44px for buttons / list rows.

Interaction
- Buttons: disable during async; show inline spinner + label change ("Starting…").
- Loading: skeleton for lists; avoid layout jump.
- Motion: 150-250ms transitions; respect prefers-reduced-motion.

Accessibility
- Contrast: normal text >= 4.5:1.
- Focus: always visible focus ring on interactive elements.
- Icon-only buttons must have aria-label.

Transfer UX patterns
- "Plan" = input + targets + options; "Run" produces jobs in a queue.
- Queue rows show: source, targets count, status, progress, started/finished, retry.
- Progress: per-target progress when available (XHR upload), otherwise discrete states.