# Web UI Comparison (old / new)

> Starting with v1.3.4, Web UI styling is optimized by Claude Opus first, because the developer really doesn't enjoy designing interfaces.
> This revision only changes styles (`page/src/sass` and the Usage chart colors); no feature logic or interaction flow was changed.

## Overall direction

| Item | old | new |
| --- | --- | --- |
| Theme | Light only | Dark by default, switches to light automatically via the system `prefers-color-scheme` |
| Color | Mostly black, white and gray; primary buttons in pure black | Cool neutral grays plus a single blue accent (light `#2563eb`, dark `#4f8cff`); all colors are now design tokens |
| Background | Flat color | Dot grid behind the sidebar and preview panel; the main panel is a "sheet" with a rounded top-left corner, flush with the right and bottom edges |
| Cards and forms | Light gray fill, no border | White fill + 1px border + soft shadow; border darkens on hover |
| Buttons | Height and radius varied across pages | Unified 2.25rem height, 0.5rem radius, weight 500; primary actions use the dark button |
| Typography | System default font, light weight (300), 10px small text | SF Pro / Inter / Segoe UI Variable + PingFang TC / Noto Sans TC; minimum weight 400, minimum size 12px; unified monospace font; tabular numerals in tables |
| Motion | Transitions varied | Unified 0.15s with a single easing curve |

## Page by page

### Chat home

**old**

![old-chat-0](/docs/diff/old-chat-0.png)

**new (light)**

![new-chat-0](/docs/diff/new-chat-0.png)

**new (dark)**

![new-chat-dark-0](/docs/diff/new-chat-dark-0.png)

- The send button changes from black to the blue accent with a glow.
- The input box uses a border with layered shadows and shows a blue focus ring; the voice recording ring is unchanged.
- Sidebar group labels become small uppercase (`CHATS`, `TERMINALS`), and items get taller rows.

### Chat conversation

**old**

![old-chat-1](/docs/diff/old-chat-1.png)

**new (light)**

![new-chat-1](/docs/diff/new-chat-1.png)

**new (dark)**

![new-chat-dark-1](/docs/diff/new-chat-dark-1.png)

- The top toolbar becomes a frosted-glass pill with border and shadow; it is hidden when there is no session.
- User message bubbles use asymmetric rounded corners.
- The selected sidebar item changes from a gray fill to a white card.

### File preview

**old**

![old-subview](/docs/diff/old-subview.png)

**new (light)**

![new-subview](/docs/diff/new-subview.png)

**new (dark)**

![new-subview-dark](/docs/diff/new-subview-dark.png)

- The preview panel is separated from the conversation by a shadow (light) or background color (dark) instead of a plain divider.
- Markdown body uses 1.7 line height and tighter letter spacing; code block colors follow the theme.

### Skills

**old**

![old-skill](/docs/diff/old-skill.png)

**new (light)**

![new-skill](/docs/diff/new-skill.png)

**new (dark)**

![new-skill-dark](/docs/diff/new-skill-dark.png)

- Top tabs change from an underline style to rounded blocks, with blue for the selected tab.
- The left list becomes separate cards; rows in the checklist get a fill on hover.

### Schedule

**old**

![old-schedule](/docs/diff/old-schedule.png)

**new (light)**

![new-schedule](/docs/diff/new-schedule.png)

**new (dark)**

![new-schedule-dark](/docs/diff/new-schedule-dark.png)

- Field labels are bold (600) with more spacing between fields.
- The `SKILL.md` editor uses the monospace font and its own background.
- The form footer gets a divider, grouping the submit button and test info at the bottom.

### Model

**old**

![old-model](/docs/diff/old-model.png)

**new (light)**

![new-model](/docs/diff/new-model.png)

**new (dark)**

![new-model-dark](/docs/diff/new-model-dark.png)

- Provider and setting cards are unified as white fill + border, with titles at weight 600.
- Fallback priority cards get more padding and height for a tidier layout.

### System

**old**

![old-system](/docs/diff/old-system.png)

**new (light)**

![new-system](/docs/diff/new-system.png)

**new (dark)**

![new-system-dark](/docs/diff/new-system-dark.png)

- Inputs and buttons inside cards share the same height and alignment.
- Inputs use a white fill + border to stand apart from the card background.

### Usage

**old**

![old-usage](/docs/diff/old-usage.png)

**new (light)**

![new-usage](/docs/diff/new-usage.png)

**new (dark)**

![new-usage-dark](/docs/diff/new-usage-dark.png)

- Chart colors read theme color variables (input blue, output green, cache read light gray) and repaint immediately when switching between dark and light.
- Summary cards and table figures use tabular numerals; table rows get a fill on hover.

### Lessons

**old**

![old-lesson](/docs/diff/old-lesson.png)

**new (light)**

![new-lesson](/docs/diff/new-lesson.png)

**new (dark)**

![new-lesson-dark](/docs/diff/new-lesson-dark.png)

- Each record becomes a bordered card with more padding; tags become rounded pills.
- The filter row and pager buttons are unified at 2.25rem height.