polish(my-deepagent): switch Web GUI to Claude/Anthropic design language
Earlier polish landed a dark dev-tool aesthetic (Linear / Vercel /
Resend). The user reminded that we agreed on the Claude / Anthropic
design language — cream paper background, warm charcoal ink, serif
display type, rust/terracotta accent. Pivoting accordingly.
Changes (style.css; HTML headers gain h1 → home link)
- Surface palette
- bg: #f5f0e8 (warm cream paper)
- surface-1/2/3: cream → light tan progression
- border / border-strong: soft warm tan
- Ink palette (warm-tinted neutral, not blue-tinted gray)
- text-primary: #1b1916
- text-secondary: #54514a
- text-muted: #8a857a
- text-faint: #b6b0a3
- Accent rust palette
- accent: #c14a1a (terracotta) / hover #a73d12
- success: olive green #4a6f2a
- warning: mustard #a86c1f
- danger: rust red #a33419
- info: muted slate blue #4a5d8c
- Typography: serif/sans/mono trio
- --font-serif: "Tiempos Headline", "Source Serif Pro", "IBM Plex Serif",
Georgia, "Apple SD Gothic Neo", "Noto Serif KR"
- --font-sans: "Styrene B", "Styrene A", "Inter", "Pretendard", system stack
- --font-mono: JetBrains Mono / SF Mono / Menlo
- Body font-size bumped 14 → 15 px for paper readability
- h1, page-title h2, h2 section titles all serif now (no uppercase /
letterspaced caps — Claude aesthetic favors true serif headlines)
- budget-card amount uses serif numerals
- Component tweaks
- Buttons: cream surface default; primary = rust filled; danger = outlined
- Inputs: 3 px rgba accent ring on focus (Claude form style)
- Badges: warm pill background + 1 px tinted border for definition on cream
- Cards: soft 1 px shadow-card token, no heavy elevation
- Scrollbar: themed thumb against surface-1
- Empty-state icon: serif character in accent color
- Page-title row gains a bottom border (paper-rule separator)
XSS policy comment + textContent-only contract unchanged. No build system.
Tests
- ruff check / mypy --strict / 5 static smoke tests: PASS
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
ed694c9821