Visual refresh: cohesive TUI/charm aesthetic (sketch-first) #17

Open
opened 2026-06-12 06:02:08 +00:00 by mathias · 0 comments
Owner

Problem

UI feels flat/boring. Want a fresher look, drawing from leading reader services, leaning into the TUI / Charmbracelet (bubbletea/lipgloss) graphical language the maintainer likes.

Seed already present

Charm palette (CharmMint/Pink/Purple/Cream/Dim), the ASCII tapir spinner, and a lipgloss-style progress bar already exist — but only on the summarizing spinner. The rest of the UI doesn't use that language.

Decision (agreed)

Sketch 2-3 throwaway HTML mockups first (TUI/charm direction: bordered lipgloss-style panels, mono accents, charm palette, tasteful ASCII flourishes; references: Charm's own site, terminal readers, Readwise Reader / Matter for reader UX) → review/merge → then implement. Taste seen before committed.

Process (in order)

  1. Mockups (throwaway, not wired) for review — the "explore/spec" step for visual work.
  2. Once a direction is chosen: requirements/UI-spec → ADR if it changes structure.
  3. BDD/visual checks where meaningful → TDD for any logic → implement.
  4. SemVer + docs.

Depends on / pairs with #2 (layout changes land together where sensible).

## Problem UI feels flat/boring. Want a fresher look, drawing from leading reader services, leaning into the TUI / Charmbracelet (bubbletea/lipgloss) graphical language the maintainer likes. ## Seed already present Charm palette (`CharmMint/Pink/Purple/Cream/Dim`), the ASCII tapir spinner, and a lipgloss-style progress bar already exist — but only on the summarizing spinner. The rest of the UI doesn't use that language. ## Decision (agreed) **Sketch 2-3 throwaway HTML mockups first** (TUI/charm direction: bordered lipgloss-style panels, mono accents, charm palette, tasteful ASCII flourishes; references: Charm's own site, terminal readers, Readwise Reader / Matter for reader UX) → review/merge → then implement. Taste seen before committed. ## Process (in order) 1. Mockups (throwaway, not wired) for review — the "explore/spec" step for visual work. 2. Once a direction is chosen: requirements/UI-spec → ADR if it changes structure. 3. BDD/visual checks where meaningful → TDD for any logic → implement. 4. SemVer + docs. Depends on / pairs with #2 (layout changes land together where sensible).
Sign in to join this conversation.
No labels
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: mathias/tapir#17