What happened?

The current UI uses 14px as a universal font size for almost all text elements, resulting in a flat visual hierarchy that makes the interface feel cluttered and indistinct. Group headers in the sidebar are too small to read comfortably in dark mode, while the empty-state headline is disproportionately large compared to the rest of the UI.

Steps to reproduce

1. Open PawWork
2. Look at the left sidebar session list — all session titles use text-14-regular (14px / 400 weight) with no distinction between active and inactive
3. Observe the group headers (e.g., "All", "Pinned") — they use text-11-medium (11px), nearly invisible against the dark background
4. Click "New Session" to enter the empty state — the headline "今天想做什么？" uses text-20-medium (20px), creating a jarring jump from the 14px baseline
5. Compare with ChatGPT / Codex / Claude desktop apps — they use 13px as the body baseline and establish hierarchy through weight and color, not just size

What did you expect to happen?

• Session list items should have clear visual distinction between active (bold/strong) and inactive (regular/weak) states
• Group headers should be readable without straining, acting as clear section dividers
• The empty-state headline should feel integrated with the overall typography scale, not oversized
• The font size scale should have smooth gradations (11px → 12px → 13px → 14px → 16px → 20px) instead of large gaps

PawWork version

v0.2.14

OS version

macOS 15.4.1 (also reproducible on Windows 11)

Can you reproduce it again?

Yes, every time

Screenshots, recordings, or extra context

Current font size distribution:

Competitor comparison:

Competitors use 13px as the body baseline and establish hierarchy primarily through weight (400/500/600) and color (text-strong / text-base / text-weak), not size jumps.

Proposed changes:

Files involved:

• packages/ui/src/styles/utilities.css — font utility classes
• packages/ui/src/styles/theme.css — font size variables
• packages/app/src/pages/layout/sidebar-items.tsx — session list items
• packages/app/src/pages/layout/pawwork-sidebar.tsx — sidebar group headers
• packages/app/src/components/session/session-new-view.tsx — empty-state headline
• packages/app/src/pages/session/message-timeline.tsx — session title header

Acceptance criteria:

• Active session titles are visually distinct from inactive ones (via weight or color)
• Group headers are clearly readable in both light and dark modes
• Empty-state headline feels proportional to the rest of the UI
• Changes use existing color tokens; only size and weight are adjusted
• Consistent rendering on macOS and Windows