UI-B: establish the spectral slate visual system

[Artsen]

Design Positioning

UI-B establishes Web Video Optimizer as a precision slate media tool with a controlled spectral transformation language. The interface should read primarily as calm deep slate, with iris for interaction, ember for transformation moments, and green reserved only for real success.

Summary

• Replaces the old green-primary visual system with spectral slate tokens across dark and light themes.
• Adds a custom compression-frame AppMark, favicon, SVG brand assets, and README wordmark presentation.
• Applies the 80/15/4/1 balance: slate structure first, restrained tonal elevation, focused iris interaction, rare ember accents.
• Uses the spectral gradient only for approved brand and processing moments, including the mark, subtle accents, empty-state atmosphere, progress, and deterministic fixture art.
• Refines selected states, progress states, startup/unreachable/degraded states, Compare wipe chrome, and mobile navigation without changing workflows.
• Updates deterministic UI-B screenshot review coverage and refreshes curated README screenshots.
• Adds docs/brand-system.md as the technical source of truth for palette, logo rules, gradients, accessibility, and screenshot assets.

Logo Concept

The mark is a compression-frame symbol: an outer video frame, three progressively narrowing source bands, and a terminal output/play shape. It is authored as SVG, supports a monochrome variant, and is aria-hidden when paired with visible product text.

Brand files:

• apps/web/src/assets/brand/mark.svg
• apps/web/src/assets/brand/mark-monochrome.svg
• apps/web/src/assets/brand/wordmark-dark.svg
• apps/web/src/assets/brand/wordmark-light.svg
• apps/web/public/favicon.svg
• docs/assets/brand/mark.svg
• docs/assets/brand/wordmark-dark.svg
• docs/assets/brand/wordmark-light.svg

Palette

Dark theme core:

• App: #080c12
• Sidebar: #090e15
• Workspace: #0e151f
• Surface: #141d29
• Selected: #1c2440
• Primary iris: #6a5bcf
• Ember: #f2763f
• Success: #35c981

Light theme core:

• App: #f2f4f7
• Sidebar: #e9edf2
• Workspace/surface: #ffffff
• Recessed: #eef1f5
• Selected: #eeeafe
• Primary iris: #5848b8
• Ember: #b84c1f
• Success: #187a4b

Canonical gradient:

linear-gradient(120deg, #5f6fe5 0%, #765bc8 54%, #e66a3a 100%)

Major Screen Changes

• App shell: cooler slate foundation, custom mark, iris navigation indicators, subtle top accent.
• Empty state: restrained ambient signal field and compression-motif treatment.
• Results: iris selected-output rails, semantic success only for completed/savings states, neutral package panel.
• Compare: dark theatre preserved, fixture colors moved from old green to spectral slate, ember used only for the wipe marker.
• Processing: active progress uses controlled iris-to-ember treatment.
• Startup states: API unreachable and degraded bootstrap styled within the new system.
• Mobile: bottom navigation retains safe spacing, active destination uses iris, package actions remain above fixed chrome.
• Light theme: deliberately cool gray-blue chrome with darker accessible subtle text after axe review.

Screenshot Review

• Deterministic screenshot review: 43 PNG captures generated under .tmp/ui-review/.
• Curated committed README screenshots: 6 WebP files, 260,638 bytes total.
• Curated list:
  • prepare-dark.webp
  • results-dark.webp
  • results-light.webp
  • compare-wipe-dark.webp
  • custom-export-dark.webp
  • mobile-results-dark.webp

Visual review covered empty, Prepare, Results, Compare grid/three-up/four-up/wipe/A-B/zoom, Custom, Library, poster dialog, mobile, API unreachable, degraded startup, processing, success, warning, and selected-output states.

Accessibility

• Added focused AppMark rendering/accessibility test.
• Preserved visible focus states and forced-colors support for key brand treatments.
• Browser E2E axe checks passed after fixing a light-theme subtle-text contrast issue.
• No status is conveyed by color alone; semantic success/info/warning/danger colors remain distinct.

Verification

• npm ci: passed
• npm run format:check: passed
• npm run lint: passed
• npm run typecheck: passed
• npm run test:run: passed, 388 passed / 1 skipped
• npm run build: passed
• npm run check: passed
• npm run test:coverage: passed
  • API coverage headline: 87.27% lines, 83.19% branches, 87.52% functions
  • Web coverage headline: 83.90% lines, 77.35% branches, 55.06% functions
• npm audit --omit=dev: passed, 0 vulnerabilities
• npm run test:e2e: passed, 10 passed
• npm run test:integration:media: passed, 5 passed
• npm run review:ui-screens: passed, 43 captures
• git diff --check: passed
• Local npm run dev smoke: passed
  • Web loaded
  • API /health responded
  • API /ready responded
  • Theme toggle worked
  • No console errors
  • No uncaught page errors
  • Processes were cleaned up after smoke

Docker was not tested locally; remote GitHub Actions remains authoritative for Docker smoke.

Scope Boundaries

No application workflow, API, persistence, storage, Docker behavior, media-processing behavior, FFmpeg settings, package contents, route model, or public DTO behavior changed.

No real media, personal paths, local data, .tmp review output, coverage output, build output, reports, secrets, or environment files were committed.

No dependency changes were made.

CI

Opened ready for owner review. CI should run build, media integration, browser E2E, and Docker smoke on GitHub Actions.