Skip to content

Redesign Redwoods theme — unclear visual identity #3348

@gregpriday

Description

@gregpriday

Summary

The Redwoods theme is a dark theme with deep auburn-brown surfaces. While not broken, it lacks a clear visual identity — it reads as "generic dark brown" and doesn't evoke its namesake's character. It also sits uncomfortably close to Namib in feel and is worth rethinking to give each theme a distinct personality.

Problem Statement

Redwoods uses surfaces (#1A1210 canvas, #120C0A sidebar, #1E1512 panel) that are very dark auburn-brown, nearly indistinguishable from Namib's surfaces at a glance. The design intent is presumably inspired by California's coastal redwood forests: deep shadow, rich reddish-brown bark, filtered green light. But the current tokens don't deliver that picture:

  • The surface-to-sidebar contrast is minimal (#1A1210 vs #120C0A) — both are so dark that the sidebar barely separates from the canvas.
  • text-primary (#D4C5B8) is a warm off-white that works but reads as "dusty beige" rather than giving the cool filtered-light-under-canopy feel the theme could have.
  • Terminal colors are muted and unsaturated: terminal-green (#6D7A4D) is an olive-grey, terminal-red (#A65142) is a dull clay. This is coherent for a low-contrast aesthetic but makes the terminal feel dim and tired.
  • syntax-comment (#4E6A59) is a dark muted green — nearly invisible at typical terminal contrast levels.
  • The accent #3F9366 (Canopy green) is fine but has no relationship to the other hues in the palette. There's no "narrative" — the warm bark tones and the cool green accent don't dialogue.
  • The theme is too similar to Namib in overall impression: both are dark warm-brown themes. They need differentiation.

Relevant code:

Desired Behavior

Redwoods should feel like standing inside a coastal redwood grove: deep shadow with rich reddish-brown and russet tones, shafts of cool grey-green light filtering through the canopy. It should be:

  • Distinguishable at a glance from Namib (arid/sandy) and Highlands (warm Scottish moorland).
  • Rich in the russet-to-auburn surface range — more textured and saturated than Namib's sandy approach.
  • Terminal colors that lean into filtered forest light: muted greens, deep browns, and sharp accent yellows for warnings.
  • Sidebar and panel separation should be clear — the deep shadow vs. slightly lighter surfaces should read as meaningful depth.

Verification Workflow

  1. Apply the theme in E2E: await setAppTheme(window, "redwoods").
  2. Capture a full-page screenshot.
  3. Measure: sidebar vs. canvas contrast, panel vs. grid, toolbar text readability.
  4. AI visual evaluation: does the theme evoke redwood forest? Is it distinct from Namib and Highlands? Are surfaces differentiated?
  5. Iterate token values; confirm the paired terminal scheme (from PR feat(terminal): match terminal color scheme to app theme automatically #3345) still reads cohesively.
  6. npm run check — zero new errors.

Acceptance Criteria

  • Sidebar and canvas surfaces are visually distinct — the sidebar clearly recedes or separates from the main canvas.
  • The theme's character (russet bark, forest shadow, cool green light) is recognizable and distinct from Namib and Highlands in a side-by-side screenshot comparison.
  • Terminal colors meet minimum legibility contrast on the Redwoods canvas background.
  • syntax-comment is legible — contrast ratio against canvas ≥ 3:1.
  • All E2E tests pass; no regressions in dark theme contrast checks.

Edge Cases & Risks

  • border-default is set to #2B1D19 which is identical to surface-panel-elevated — this means borders and elevated panels have the same token value, making them visually indistinguishable. The redesign should address this.
  • The terminal palette matching from PR feat(terminal): match terminal color scheme to app theme automatically #3345 maps Redwoods to a specific scheme — check pairing cohesion after any significant token changes.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions