diff --git a/docs/stories/US-005-ux-polish-accessibility.md b/docs/stories/US-005-ux-polish-accessibility.md
new file mode 100644
index 0000000..017d342
--- /dev/null
+++ b/docs/stories/US-005-ux-polish-accessibility.md
@@ -0,0 +1,144 @@
+# User Story: UX Polish & Accessibility Hardening
+
+**Story ID:** US-005
+**Epic:** Platform Quality (cross-feature)
+**Status:** In progress
+
+---
+
+## 1. Description
+
+**As a** visitor using the clock, timer, or alarms,
+**I want** the panels to be legible, proportional, and fully accessible,
+**So that** the product feels deliberate and cohesive, and future features
+build on a design system instead of fighting one.
+
+Priority owner decision (2026-09-13): this story **takes priority over
+US-002 (recurring alarms) and US-004 (multi-clock)**. It absorbs backlog
+US-003 items 1–3.
+
+---
+
+## 2. Context & Scope
+
+- **In Scope:**
+  - Visible, persistent field labels for every input (placeholder alone is
+    not a label — current placeholders are browser-default gray on `#111`)
+  - One shared control scale across alarm and timer panels (the alarm create
+    row currently mixes 1.2em inputs, an 0.8em/0.7-opacity Add button, and
+    ~20px tap targets)
+  - WCAG AA contrast for all text/background pairs, enforced by computed
+    ratios (error `#f00` on `#1a1a1a` is ≈4.35:1 today; note text at opacity
+    0.55 ≈4.5:1; disabled rows ≈3:1)
+  - Semantic design tokens to replace the per-element "opacity soup"
+    (0.3–0.75) — text tiers, placeholder, input surface, focus ring, danger
+  - Keyboard + screen-reader behavior: focus moves into opened panels,
+    returns to the toggle on close; ring overlay traps focus and is
+    `aria-modal`; toggles expose `aria-expanded`/`aria-controls`; alarm list
+    changes announced
+  - `prefers-reduced-motion` support for pulses and panel/FLIP animations
+  - Outside-click no longer closes the alarm panel while the ring overlay is
+    up (absorbed US-003 item 2)
+  - FLIP panel helper extracted to `shared/dom/` (absorbed US-003 item 1)
+- **Out of Scope:**
+  - Retheming (the green/dark terminal aesthetic stays — this story
+    normalizes within it)
+  - New features, behavior changes to the pure cores, storage format changes
+  - Sound design (alarm tone is `playBeep()`, unchanged; audible verification
+    stays a manual QA step)
+
+---
+
+## 3. Acceptance Criteria
+
+- [x] **AC-1:** Every input has a persistent visible label; placeholder text
+      uses a themed token.
+- [x] **AC-2:** All text/background pairs pass WCAG AA (4.5:1 normal text,
+      3:1 large text), verified by computed ratios recorded in this story.
+- [x] **AC-3:** Alarm and timer panels share one control scale; the alarm
+      create section uses a labeled layout with comfortable spacing.
+- [x] **AC-4:** Keyboard-only pass: opening a panel moves focus into it,
+      closing restores focus to the toggle, the ring overlay traps focus and
+      is `aria-modal` (Esc/Enter dismiss), and no keyboard trap exists.
+- [x] **AC-5:** Panel toggles expose `aria-expanded`/`aria-controls`; alarm
+      list changes are announced via a polite live region; all rendered row
+      controls are labeled.
+- [x] **AC-6:** `prefers-reduced-motion` disables pulses, panel open/close,
+      and FLIP animations.
+- [x] **AC-7:** Interactive targets are ≥24×24 px (WCAG 2.5.8), ~44 px where
+      space allows.
+- [x] **AC-8:** Outside click does not close the alarm panel while ringing.
+
+---
+
+## 4. Technical Guidance & Architectural Constraints
+
+- **Token layer first:** `variables.css` gains semantic tokens (text tiers,
+  input surface, placeholder, focus ring, AA-safe danger, control sizes);
+  component CSS consumes tokens — no raw opacities for text tiers.
+- **Markup:** `index.html` gains `<label>` elements (or equivalent durable
+  text) and a panel heading; row markup changes are limited to what ACs
+  require.
+- **UI wiring only:** `alarm.ui.ts` / `timer.ui.ts` handle focus management,
+  live regions, and the ring guard; `clock.ui.ts` untouched.
+- **New pure module:** `shared/dom/flip.ts` (the FLIP helper from both UI
+  files) with mirrored unit tests; jsdom tests for focus/aria behavior.
+- **Verification:** screenshots (desktop/mobile, before/after, error, ring,
+  reduced-motion) stored under `docs/stories/US-005/screenshots/` and
+  reviewed per phase; `make check` must pass; 135 existing tests must keep
+  passing unchanged.
+- No new npm dependencies; no ADR required (token pattern already exists).
+
+---
+
+## 5. Definition of Done Checklist
+
+- [x] All ACs verified (screenshots + computed contrast + Playwright
+      assertions + jsdom FLIP unit tests).
+- [x] `make check` green; prettier clean.
+- [x] Backlog updated (US-003 absorbed; priorities adjusted).
+- [ ] QA assessment passed; code review approved.
+
+---
+
+## 6. Verification Record (2026-09-13)
+
+### Computed WCAG contrast (all AA-pass)
+
+| Pair                                                          | Ratio   |
+| ------------------------------------------------------------- | ------- |
+| primary `#0f0` on surface `#1a1a1a` (rows, inputs)            | 12.68:1 |
+| text-secondary (0.72 composite) on surface (labels, times)    | 7.01:1  |
+| text-muted (0.60 composite) on surface (notes, disabled rows) | 5.21:1  |
+| placeholder (0.55 composite) on surface-alt `#111` (inputs)   | 4.71:1  |
+| danger `#ff6b6b` on surface (error text)                      | 6.27:1  |
+| primary on page bg `#222` (clock, toggles)                    | 11.59:1 |
+
+Before-state failures that motivated the tokens: error `#f00` on surface
+≈4.35:1, placeholder (browser default) ≈3.5:1, note text at opacity 0.55
+≈4.5:1, disabled rows at opacity 0.4 ≈3:1.
+
+### Automated behavior assertions (Playwright, 20/20 PASS)
+
+`aria-expanded` on both toggles (initial + open); focus moves into the
+panel on open; both fields have exactly one visible `<label>`; Escape and
+outside-click close with focus restored to the toggle; ring overlay is
+`aria-modal`, receives focus on ring, Tab is trapped between Snooze/Dismiss;
+outside click does not close the panel while ringing; Enter dismisses and
+focus returns to the toggle; reduced-motion produces no FLIP transform.
+
+### Unit tests
+
+`tests/unit/shared/dom/flip.test.ts` — 5 tests (reduced-motion bypass, null
+container, invert-then-cleanup, no-delta cleanup, absent matchMedia).
+Full suite: 140 passing (135 pre-existing + 5 new).
+
+### Screenshots
+
+`docs/stories/US-005/screenshots/before|after/` — 14 shots each: desktop
+idle/panel/rows/error, ring overlay, keyboard focus walk, timer panel
+(incl. running toggle), mobile (375px) and narrow (360px) panel states,
+reduced-motion panel. Reviewed per phase; notable before→after fixes:
+red ⏰ / blue 💤 emoji replaced with monochrome line icons, buttons now
+inherit the page font, timer −/+ steppers always visible (were hover-only,
+unusable on touch), alarm create row de-cramped into labeled stacked fields.
diff --git a/docs/stories/US-005/screenshots/after/01-clock-idle.png b/docs/stories/US-005/screenshots/after/01-clock-idle.png
new file mode 100644
index 0000000..f43d8bb
Binary files /dev/null and b/docs/stories/US-005/screenshots/after/01-clock-idle.png differ
diff --git a/docs/stories/US-005/screenshots/after/02-alarm-panel-open.png b/docs/stories/US-005/screenshots/after/02-alarm-panel-open.png
new file mode 100644
index 0000000..9e34932
Binary files /dev/null and b/docs/stories/US-005/screenshots/after/02-alarm-panel-open.png differ
diff --git a/docs/stories/US-005/screenshots/after/03-alarm-panel-rows.png b/docs/stories/US-005/screenshots/after/03-alarm-panel-rows.png
new file mode 100644
index 0000000..c0f8ba6
Binary files /dev/null and b/docs/stories/US-005/screenshots/after/03-alarm-panel-rows.png differ
diff --git a/docs/stories/US-005/screenshots/after/04-alarm-error.png b/docs/stories/US-005/screenshots/after/04-alarm-error.png
new file mode 100644
index 0000000..e428031
Binary files /dev/null and b/docs/stories/US-005/screenshots/after/04-alarm-error.png differ
diff --git a/docs/stories/US-005/screenshots/after/05-ring-overlay.png b/docs/stories/US-005/screenshots/after/05-ring-overlay.png
new file mode 100644
index 0000000..9db5385
Binary files /dev/null and b/docs/stories/US-005/screenshots/after/05-ring-overlay.png differ
diff --git a/docs/stories/US-005/screenshots/after/06a-focus-toggle.png b/docs/stories/US-005/screenshots/after/06a-focus-toggle.png
new file mode 100644
index 0000000..e28e93c
Binary files /dev/null and b/docs/stories/US-005/screenshots/after/06a-focus-toggle.png differ
diff --git a/docs/stories/US-005/screenshots/after/06b-focus-name.png b/docs/stories/US-005/screenshots/after/06b-focus-name.png
new file mode 100644
index 0000000..a5d92b3
Binary files /dev/null and b/docs/stories/US-005/screenshots/after/06b-focus-name.png differ
diff --git a/docs/stories/US-005/screenshots/after/06c-focus-time.png b/docs/stories/US-005/screenshots/after/06c-focus-time.png
new file mode 100644
index 0000000..0fb445f
Binary files /dev/null and b/docs/stories/US-005/screenshots/after/06c-focus-time.png differ
diff --git a/docs/stories/US-005/screenshots/after/07-timer-panel.png b/docs/stories/US-005/screenshots/after/07-timer-panel.png
new file mode 100644
index 0000000..ba0413a
Binary files /dev/null and b/docs/stories/US-005/screenshots/after/07-timer-panel.png differ
diff --git a/docs/stories/US-005/screenshots/after/07b-timer-toggle-running.png b/docs/stories/US-005/screenshots/after/07b-timer-toggle-running.png
new file mode 100644
index 0000000..9091c15
Binary files /dev/null and b/docs/stories/US-005/screenshots/after/07b-timer-toggle-running.png differ
diff --git a/docs/stories/US-005/screenshots/after/08-mobile-alarm-panel.png b/docs/stories/US-005/screenshots/after/08-mobile-alarm-panel.png
new file mode 100644
index 0000000..c8e6379
Binary files /dev/null and b/docs/stories/US-005/screenshots/after/08-mobile-alarm-panel.png differ
diff --git a/docs/stories/US-005/screenshots/after/09-mobile-alarm-rows.png b/docs/stories/US-005/screenshots/after/09-mobile-alarm-rows.png
new file mode 100644
index 0000000..872a5e2
Binary files /dev/null and b/docs/stories/US-005/screenshots/after/09-mobile-alarm-rows.png differ
diff --git a/docs/stories/US-005/screenshots/after/10-mobile-ring-overlay.png b/docs/stories/US-005/screenshots/after/10-mobile-ring-overlay.png
new file mode 100644
index 0000000..fa13247
Binary files /dev/null and b/docs/stories/US-005/screenshots/after/10-mobile-ring-overlay.png differ
diff --git a/docs/stories/US-005/screenshots/after/11-reduced-motion-panel.png b/docs/stories/US-005/screenshots/after/11-reduced-motion-panel.png
new file mode 100644
index 0000000..82057f2
Binary files /dev/null and b/docs/stories/US-005/screenshots/after/11-reduced-motion-panel.png differ
diff --git a/docs/stories/US-005/screenshots/after/12-narrow-alarm-panel.png b/docs/stories/US-005/screenshots/after/12-narrow-alarm-panel.png
new file mode 100644
index 0000000..f3789bc
Binary files /dev/null and b/docs/stories/US-005/screenshots/after/12-narrow-alarm-panel.png differ
diff --git a/docs/stories/US-005/screenshots/before/01-clock-idle.png b/docs/stories/US-005/screenshots/before/01-clock-idle.png
new file mode 100644
index 0000000..503f1b7
Binary files /dev/null and b/docs/stories/US-005/screenshots/before/01-clock-idle.png differ
diff --git a/docs/stories/US-005/screenshots/before/02-alarm-panel-open.png b/docs/stories/US-005/screenshots/before/02-alarm-panel-open.png
new file mode 100644
index 0000000..26ea905
Binary files /dev/null and b/docs/stories/US-005/screenshots/before/02-alarm-panel-open.png differ
diff --git a/docs/stories/US-005/screenshots/before/03-alarm-panel-rows.png b/docs/stories/US-005/screenshots/before/03-alarm-panel-rows.png
new file mode 100644
index 0000000..7d2ef46
Binary files /dev/null and b/docs/stories/US-005/screenshots/before/03-alarm-panel-rows.png differ
diff --git a/docs/stories/US-005/screenshots/before/04-alarm-error.png b/docs/stories/US-005/screenshots/before/04-alarm-error.png
new file mode 100644
index 0000000..0b94119
Binary files /dev/null and b/docs/stories/US-005/screenshots/before/04-alarm-error.png differ
diff --git a/docs/stories/US-005/screenshots/before/05-ring-overlay.png b/docs/stories/US-005/screenshots/before/05-ring-overlay.png
new file mode 100644
index 0000000..08ed404
Binary files /dev/null and b/docs/stories/US-005/screenshots/before/05-ring-overlay.png differ
diff --git a/docs/stories/US-005/screenshots/before/06a-focus-toggle.png b/docs/stories/US-005/screenshots/before/06a-focus-toggle.png
new file mode 100644
index 0000000..c6f62ff
Binary files /dev/null and b/docs/stories/US-005/screenshots/before/06a-focus-toggle.png differ
diff --git a/docs/stories/US-005/screenshots/before/06b-focus-name.png b/docs/stories/US-005/screenshots/before/06b-focus-name.png
new file mode 100644
index 0000000..e4326f9
Binary files /dev/null and b/docs/stories/US-005/screenshots/before/06b-focus-name.png differ
diff --git a/docs/stories/US-005/screenshots/before/06c-focus-time.png b/docs/stories/US-005/screenshots/before/06c-focus-time.png
new file mode 100644
index 0000000..7d85796
Binary files /dev/null and b/docs/stories/US-005/screenshots/before/06c-focus-time.png differ
diff --git a/docs/stories/US-005/screenshots/before/07-timer-panel.png b/docs/stories/US-005/screenshots/before/07-timer-panel.png
new file mode 100644
index 0000000..ac77c52
Binary files /dev/null and b/docs/stories/US-005/screenshots/before/07-timer-panel.png differ
diff --git a/docs/stories/US-005/screenshots/before/08-mobile-alarm-panel.png b/docs/stories/US-005/screenshots/before/08-mobile-alarm-panel.png
new file mode 100644
index 0000000..a5da6ad
Binary files /dev/null and b/docs/stories/US-005/screenshots/before/08-mobile-alarm-panel.png differ
diff --git a/docs/stories/US-005/screenshots/before/09-mobile-alarm-rows.png b/docs/stories/US-005/screenshots/before/09-mobile-alarm-rows.png
new file mode 100644
index 0000000..ccf8abe
Binary files /dev/null and b/docs/stories/US-005/screenshots/before/09-mobile-alarm-rows.png differ
diff --git a/docs/stories/US-005/screenshots/before/10-mobile-ring-overlay.png b/docs/stories/US-005/screenshots/before/10-mobile-ring-overlay.png
new file mode 100644
index 0000000..47ed2ed
Binary files /dev/null and b/docs/stories/US-005/screenshots/before/10-mobile-ring-overlay.png differ
diff --git a/docs/stories/US-005/screenshots/before/11-reduced-motion-panel.png b/docs/stories/US-005/screenshots/before/11-reduced-motion-panel.png
new file mode 100644
index 0000000..1e4848b
Binary files /dev/null and b/docs/stories/US-005/screenshots/before/11-reduced-motion-panel.png differ
diff --git a/docs/stories/US-005/screenshots/before/12-narrow-alarm-panel.png b/docs/stories/US-005/screenshots/before/12-narrow-alarm-panel.png
new file mode 100644
index 0000000..9e5d068
Binary files /dev/null and b/docs/stories/US-005/screenshots/before/12-narrow-alarm-panel.png differ
diff --git a/memory-bank/activeContext.md b/memory-bank/activeContext.md
index 33a35e1..e98dddb 100644
--- a/memory-bank/activeContext.md
+++ b/memory-bank/activeContext.md
@@ -1,37 +1,38 @@
 # Active Context
 
-Updated: 2026-09-13
+Updated: 2026-09-13 (evening)
 
 ## Current focus
 
-**Repo housekeeping — DONE on branch `chore/repo-housekeeping`**
-(5 commits off `dev`, awaiting PR into `dev` + review):
-
-1. ✅ Memory bank initialized (HK-4).
-2. ✅ README corrections (HK-1): `robots.txt` removed from `src/public/` tree,
-   build-time generation note added, alarm storage test added to tests tree,
-   `tasks/` added to the repo-layout table.
-3. ✅ Actions bump (HK-2): checkout@v7, setup-node@v7, setup-buildx@v4,
-   login@v4, build-push@v7, hadolint-action@v3.5.0. All four Dockerfiles
-   pre-validated locally with hadolint 2.15.1 (repo config: only info-level
-   DL3059 in the webhook image).
-4. ✅ Husky guard (HK-3): hook skips lint-staged unless staged files match
-   `^web/.*\.(ts|js|json|css|md)$`; verified silent on yml- and md-only
-   commits (noise previously confirmed on both).
-5. ✅ `tasks/` close-out: US-001 marked merged+deployed (Release #5,
-   healthz 200); HK-1..4 removed; HK-5 (nginx 1.27 EOL re-pin) added as a
-   backlog candidate.
+**US-005 — UX polish & a11y hardening: implemented on `feat/us-005-ux-polish`**
+(off `dev`), awaiting owner QA/review → PR into `dev`. Commits: story +
+baseline shots → token layer → alarm redesign → timer normalization → a11y
+wiring/FLIP → AA placeholder fix → focus-restore fix → verification record.
+
+- Verify with the story's §6 record
+  (`docs/stories/US-005-ux-polish-accessibility.md`): contrast table (all
+  AA), 20/20 Playwright a11y assertions, 140 unit tests, before/after
+  screenshots.
+- Design decisions worth knowing: green/dark aesthetic kept; emoji glyphs
+  replaced by inline SVG (`currentColor`); text-tier tokens replace the
+  opacity soup (never use raw opacity for text); `panelHadFocus` pattern in
+  both UI files because mousedown blurs before outside-click close runs;
+  timer toggle renders icon + text span (never replace button content).
+- Screenshot tooling lives in `/tmp/ux-shots/` (Playwright 1.63 — NOT a repo
+  dependency): shoot.mjs (14-shot matrix), a11y.mjs (20 assertions),
+  contrast.mjs (WCAG math). Vite dev server on :5173.
 
 ## Environment state
 
-- `chore/repo-housekeeping` = dev + 5 commits; `dev` = `origin/dev` = `223d41f`.
-- Local `main` = `origin/main` = `c7ecdca` (post-rebase-merge sync).
-- US-001 deployed; homepage edge cache may lag up to 2 h.
+- Branch `feat/us-005-ux-polish` = dev + 8 commits; `dev`/`main` synced.
+- `make check` green (140 tests). Vite dev server may still be running on
+  :5173 (started for screenshots).
 
 ## Next steps
 
-- Open PR `chore/repo-housekeeping` → `dev`; merge (no production risk —
-  workflow changes ride CI on next dev push).
-- Owner: production audio check (alarm tone) → US-001 fully Done.
-- Pick next epic: US-002 (recurring alarms) vs US-004 (multi-clock).
-- Schedule HK-5 (nginx 1.27 → current stable, tag + digest together).
+- Owner: review US-005 (screenshots + behavior), then PR into `dev` →
+  `main` (rebase-merge; the ruleset requires PRs for `main`).
+- Owner: audible alarm-tone check → US-001 fully Done.
+- Pick next epic: US-002 (deprioritized) vs US-004 (blocker cleared by
+  US-005's shared FLIP helper).
+- Schedule HK-5 (nginx re-pin) / HK-6 (cache purge or asset retention).
diff --git a/memory-bank/progress.md b/memory-bank/progress.md
index c296477..d8c7f0b 100644
--- a/memory-bank/progress.md
+++ b/memory-bank/progress.md
@@ -4,12 +4,21 @@
 
 US-001 (Multiple Alarms) is **deployed to production** (PR #13 merged
 2026-09-13 21:17Z; Release run #5 succeeded; `healthz` verified 200).
+US-005 (UX polish & a11y hardening) is **implemented on
+`feat/us-005-ux-polish`** — all ACs verified, awaiting owner QA/review.
 Site is live at `clock.taylormadetech.net`.
 
 ## What works
 
 - Clock (tick, title mirror, timezone), timer (presets, persistence, beep),
-  alarms (multi, snooze, persistence, ring overlay) — 135 unit tests green.
+  alarms (multi, snooze, persistence, ring overlay) — 140 unit tests green.
+- **Design system (US-005):** semantic text-tier tokens (secondary 7.0:1,
+  muted 5.2:1, placeholder 4.7:1 — never raw opacity for text), AA-safe
+  danger `#ff6b6b`, global `:focus-visible` ring, monochrome inline-SVG
+  icons, shared FLIP helper (`shared/dom/flip.ts`, reduced-motion aware),
+  focus management + `aria-modal` ring overlay with Tab trap,
+  `prefers-reduced-motion` global kill switch, `panelHadFocus` focus-restore
+  pattern in both UI features.
 - Full CI gate: prettier, eslint, typecheck, vitest+coverage, build,
   `nginx -t` × 2, compose config × 2, hadolint × 4.
 - Automated deploys: `main` → GHCR → webhook → swap with auto-rollback.
@@ -20,8 +29,13 @@ Site is live at `clock.taylormadetech.net`.
 
 - Production audio QA: alarm tone not yet verified by a human (jsdom can't
   test audio) — last open US-001 DoD item.
+- **Stale-HTML → dead-asset window after every deploy** (HK-6): a rebuild can
+  change asset hashes; the 2 h edge-cached homepage then references assets
+  that 404 on origin, and the 404 gets edge-cached too (observed 2026-09-13).
+  Fix candidates: CF API purge post-deploy, retain old assets in `deploy.sh`,
+  or shorter HTML TTL.
 - Edge-cached homepage can lag up to 2 h behind a deploy (expected; judge
-  freshness via `/healthz` or hashed assets).
+  freshness via `/healthz` or a query-string cache-bust, which works).
 - CI actions pinned to Node-20-runtime majors (HK-2 — fix in progress).
 - `nginxinc/nginx-unprivileged:1.27-alpine` is an EOL mainline branch
   (HK-5 candidate: re-pin to current stable + digest).
diff --git a/tasks/backlog.md b/tasks/backlog.md
index ac13f97..2006d8e 100644
--- a/tasks/backlog.md
+++ b/tasks/backlog.md
@@ -10,30 +10,19 @@ sized/sequenced by the SDM.
 
 - Status: Candidate — needs a user story from the Product Owner before work.
 - Source: MVP cut recorded in US-001 ("Out of Scope": daily-repeat alarms).
-- Priority: High — most requested natural follow-up to US-001.
+- Priority: **Deprioritized behind US-005** (owner decision 2026-09-13) —
+  still the most requested natural follow-up to US-001.
 - Dependencies: none (builds directly on the US-001 alarm core).
 
-### US-003 — Alarm ergonomics follow-ups
-
-- Status: Candidate — small items culled from the US-001 code review (non-blocking).
-- Contents:
-  1. Extract the FLIP panel-open helper duplicated between timer.ui.ts and
-     alarm.ui.ts into `shared/dom/` (refactor; both features keep behavior).
-  2. Guard the document-level outside-click handler so the alarm panel does
-     not close while the ringing overlay is up.
-  3. Overlay focus management: move keyboard focus into the ring overlay
-     when ringing starts (a11y pass).
-- Priority: Medium — bundle with the next alarm-adjacent story or the
-  multi-clock epic to avoid a dedicated PR.
-
 ## Epic: Multi-clock
 
 ### US-004 — Wire up the multi-clock registry
 
 - Status: Candidate — `clock-registry.ts` scaffold exists but is not wired.
 - Source: README ("Multi-clock scaffold — not wired up yet"); recommended as
-  the next major epic after the Alarms epic.
-- Dependencies: US-003 (shared FLIP helper) would reduce duplicated wiring.
+  a major epic after the Alarms epic.
+- Dependencies: the shared FLIP helper (formerly US-003 item 1) is DONE via
+  US-005 (`shared/dom/flip.ts`) — the sequencing blocker is cleared.
 - Note: likely requires an ADR if the page layout/composition root changes
   meaningfully, plus a Product Owner story defining what a "clock" is.
 
@@ -51,3 +40,22 @@ sized/sequenced by the SDM.
   the image tag in `.github/workflows/ci.yml` (nginx-config-check), and run
   `nginx -t` locally on both configs.
 - Priority: Medium — security updates are accruing on the EOL branch.
+
+### HK-6 — Eliminate the stale-HTML / dead-asset window after deploys
+
+- Status: Candidate (observed live 2026-09-13 ~22:00Z).
+- Finding: after a deploy that changes asset hashes, the edge-cached homepage
+  (2 h Cache Rule TTL, per ADR 0006) references assets that no longer exist
+  on origin; requests 404, and **Cloudflare caches the 404 itself**
+  (`cf-cache-status: HIT` on a 404). Until the HTML entry expires, the
+  homepage is broken. ADR 0006's assumption that old hashed assets remain
+  edge-resident does not hold in practice.
+- Fix candidates (pick one, or combine):
+  1. Purge the CF cache after a successful deploy (needs a CF API token —
+     scope decision + secret management).
+  2. Retain the previous build's `assets/` on origin in `scripts/deploy.sh`
+     so old hashes keep resolving (simplest, no CF dependency).
+  3. Shorten the HTML Edge TTL (e.g. 5-10 min) to shrink the window.
+  - Also consider making builds hash-deterministic for unchanged code.
+- Priority: Medium-High — every deploy currently risks a broken homepage for
+  up to 2 h.
diff --git a/tasks/sprint.md b/tasks/sprint.md
index 01f87b2..e9c0194 100644
--- a/tasks/sprint.md
+++ b/tasks/sprint.md
@@ -17,33 +17,39 @@ Sprint window: active (no fixed calendar sprint; pipeline-driven).
 
 ## In flight
 
-### Housekeeping branch `chore/repo-housekeeping` (→ PR into `dev`)
-
-- HK-1 README corrections, HK-2 Actions bump to Node-24 majors
-  (checkout@v7, setup-node@v7, buildx@v4, login@v4, build-push@v7,
-  hadolint-action@v3.5.0), HK-3 husky lint-staged guard, HK-4 memory bank
-  init, plus US-001 sprint close-out (this file).
-- All committed on the branch; local `main` reset to `origin/main` after the
-  rebase-merge rewrote SHAs.
+### US-005 — UX Polish & Accessibility Hardening
+
+- Status: **Implementation complete on `feat/us-005-ux-polish`** — all 8 ACs
+  verified; awaiting owner QA + code review, then PR into `dev`.
+- Delivered: visible labeled fields (alarm create redesign), semantic
+  WCAG-AA design tokens (all pairs computed ≥4.7:1), monochrome SVG icons
+  (red ⏰ / blue 💤 emojis removed), shared control scale across alarm +
+  timer panels, always-visible timer steppers (were hover-only), focus
+  management (into panels on open, restored to toggles on close), ring
+  overlay `aria-modal` + focus trap + outside-click guard (US-003 items 2–3
+  absorbed), shared FLIP helper with unit tests (US-003 item 1 absorbed),
+  `prefers-reduced-motion` support. 140 tests passing; 20/20 Playwright
+  a11y assertions; 14 before/after screenshots in the story folder.
+- Note: alarm/timer/clock **pure cores untouched** — behavior tests pass
+  unchanged.
 
 ## Ready (not started)
 
-Nothing. Next sprint content comes from the backlog once the owner picks the
-next epic: US-002 (recurring alarms) vs US-004 (multi-clock).
+After US-005 closes: owner picks the next epic — US-002 (recurring alarms,
+deprioritized) vs US-004 (multi-clock, blocker cleared). HK-5/HK-6 are
+standalone housekeeping candidates.
 
 ## Dependencies & sequencing
 
 - US-002 can start any time — builds directly on the alarm core.
-- US-003 (review follow-ups) is independent; best bundled with US-002 or
-  US-004.
-- US-004 should wait for US-003 item 1 (shared FLIP helper) and needs a PO
-  story + possibly an ADR.
-- HK-5 (nginx 1.27 re-pin, see backlog) is independent of the epics.
+- US-004's sequencing blocker (shared FLIP helper) is resolved by US-005;
+  still needs a PO story + possibly an ADR.
+- HK-5/HK-6 are independent of the epics.
 
 ## Risks
 
-| Risk                                                    | Likelihood | Impact                  | Mitigation                        |
-| ------------------------------------------------------- | ---------- | ----------------------- | --------------------------------- |
-| Production alarm audio unverified                       | Medium     | Medium (US-001 DoD gap) | Owner manual check; tracked above |
-| nginx 1.27 base gets no security updates (EOL mainline) | High       | Medium                  | HK-5: re-pin to current stable    |
-| Edge cache hides new deploys for up to 2 h              | By design  | Low                     | Judge freshness via `/healthz`    |
+| Risk                                                                                      | Likelihood | Impact                                        | Mitigation                                   |
+| ----------------------------------------------------------------------------------------- | ---------- | --------------------------------------------- | -------------------------------------------- |
+| Production alarm audio unverified                                                         | Medium     | Medium (US-001 DoD gap)                       | Owner manual check; tracked above            |
+| Stale edge HTML references dead assets after each deploy; cached 404s extend the breakage | High       | Medium (broken homepage up to 2 h per deploy) | HK-6: purge, asset retention, or shorter TTL |
+| nginx 1.27 base gets no security updates (EOL mainline)                                   | High       | Medium                                        | HK-5: re-pin to current stable               |
diff --git a/web/src/features/alarm/alarm.ui.ts b/web/src/features/alarm/alarm.ui.ts
index e5fe5e6..04a9143 100644
--- a/web/src/features/alarm/alarm.ui.ts
+++ b/web/src/features/alarm/alarm.ui.ts
@@ -1,4 +1,5 @@
 import { playBeep } from '@/shared/audio/beep';
+import { flipAnimate } from '@/shared/dom/flip';
 import { queryOptional } from '@/shared/dom/query';
 import {
 	addAlarm,
@@ -44,6 +45,10 @@ export function initAlarm(
 	const list = queryOptional<HTMLElement>(rootElement, '.alarm-list');
 
 	const overlay = queryOptional<HTMLElement>(document, '.alarm-overlay');
+	const overlayCard = queryOptional<HTMLElement>(
+		document,
+		'.alarm-overlay-card',
+	);
 	const overlayName = queryOptional<HTMLElement>(
 		document,
 		'.alarm-overlay-name',
@@ -67,6 +72,7 @@ export function initAlarm(
 		!errorEl ||
 		!list ||
 		!overlay ||
+		!overlayCard ||
 		!overlayName ||
 		!overlayTime ||
 		!snoozeBtn ||
@@ -86,6 +92,7 @@ export function initAlarm(
 		errorEl,
 		list,
 		overlay,
+		overlayCard,
 		overlayName,
 		overlayTime,
 		snoozeBtn,
@@ -99,6 +106,11 @@ export function initAlarm(
 	let intervalId: number | null = null;
 	let beepIntervalId: number | null = null;
 	let isPanelOpen = false;
+	// True from the moment the panel is opened (we always move focus into
+	// it) until close restores focus to the toggle. Focus may already be on
+	// body by the time an outside-click close runs (mousedown blurs first),
+	// so containment checks on activeElement are unreliable.
+	let panelHadFocus = false;
 
 	let sharedAudioCtx: AudioContext | null = null;
 
@@ -119,6 +131,13 @@ export function initAlarm(
 
 	function renderAlarmList() {
 		dom.list.textContent = '';
+		if (core.alarms.length === 0) {
+			const empty = document.createElement('p');
+			empty.className = 'alarm-empty';
+			empty.textContent = 'No alarms yet';
+			dom.list.append(empty);
+			return;
+		}
 		for (const alarm of core.alarms) {
 			const row = document.createElement('div');
 			row.className = 'alarm-row';
@@ -155,6 +174,7 @@ export function initAlarm(
 
 	function renderToggle() {
 		dom.toggleBtn.classList.toggle('active', isPanelOpen);
+		dom.toggleBtn.setAttribute('aria-expanded', String(isPanelOpen));
 		const armed = core.alarms.some(
 			(alarm) => alarm.enabled || alarm.snoozedUntil !== null,
 		);
@@ -176,6 +196,8 @@ export function initAlarm(
 		dom.overlayName.textContent = alarmDisplayName(alarm);
 		dom.overlayTime.textContent = formatAlarmTime(alarm.hour, alarm.minute);
 		dom.overlay.hidden = false;
+		// Move focus into the modal so keyboard users land in the dialog.
+		dom.overlayCard.focus();
 		playBeep(getAudioCtx());
 		beepIntervalId = window.setInterval(() => {
 			playBeep(getAudioCtx());
@@ -185,6 +207,8 @@ export function initAlarm(
 	function stopRinging() {
 		stopBeeps();
 		dom.overlay.hidden = true;
+		// Return focus to a stable anchor after the dialog closes.
+		dom.toggleBtn.focus();
 		renderAlarmList();
 	}
 
@@ -262,64 +286,34 @@ export function initAlarm(
 
 	// ---------- Panel toggle ----------
 
-	// FLIP animation: smoothly animate #clock-container movement when the
-	// panel is added/removed (which re-centers the container in the body).
-	// Mirrors the timer feature's open/close behaviour so both panels feel
-	// the same.
-	function flipAnimateClockContainer(action: () => void) {
-		const container = rootElement.closest(
-			'#clock-container',
-		) as HTMLElement | null;
-		if (!container) {
-			action();
-			return;
-		}
-
-		// Lock body overflow so the page can't scroll while the height changes
-		const prevBodyOverflow = document.body.style.overflow;
-		document.body.style.overflow = 'hidden';
-
-		const firstRect = container.getBoundingClientRect();
-
-		action();
-
-		const lastRect = container.getBoundingClientRect();
-		const deltaY = firstRect.top - lastRect.top;
-		container.style.transition = 'none';
-		container.style.transform = `translateY(${deltaY}px)`;
-
-		requestAnimationFrame(() => {
-			container.style.transition =
-				'transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)';
-			container.style.transform = '';
-		});
-
-		const onEnd = () => {
-			container.removeEventListener('transitionend', onEnd);
-			container.style.transition = '';
-			container.style.transform = '';
-			document.body.style.overflow = prevBodyOverflow;
-		};
-		container.addEventListener('transitionend', onEnd);
-
-		// Fallback in case transitionend doesn't fire
-		setTimeout(onEnd, 400);
+	function clockContainer(): HTMLElement | null {
+		return rootElement.closest('#clock-container') as HTMLElement | null;
 	}
 
 	function openPanel() {
-		flipAnimateClockContainer(() => {
+		flipAnimate(clockContainer(), () => {
 			isPanelOpen = true;
 			dom.panel.removeAttribute('hidden');
 			renderToggle();
 		});
+		// Move focus into the panel so keyboard users continue from the
+		// first field instead of the toggle.
+		panelHadFocus = true;
+		dom.nameInput.focus();
 	}
 
 	function closePanel() {
-		flipAnimateClockContainer(() => {
+		flipAnimate(clockContainer(), () => {
 			isPanelOpen = false;
 			dom.panel.setAttribute('hidden', '');
 			renderToggle();
 		});
+		// Restore focus to the toggle — the dialog trigger — whenever the
+		// panel had focus during this open session.
+		if (panelHadFocus) {
+			panelHadFocus = false;
+			dom.toggleBtn.focus();
+		}
 	}
 
 	function togglePanel() {
@@ -330,6 +324,9 @@ export function initAlarm(
 	// ---------- Document-level events ----------
 
 	function onDocumentClick(e: MouseEvent) {
+		// Never close the panel while the ring overlay is up — the overlay
+		// owns the interaction until it is dismissed or snoozed.
+		if (core.ringingId !== null) return;
 		const target = e.target as Node;
 		if (isPanelOpen && !rootElement.contains(target)) {
 			closePanel();
@@ -337,10 +334,23 @@ export function initAlarm(
 	}
 
 	function onDocumentKeydown(e: KeyboardEvent) {
-		// While ringing, Escape and Enter dismiss — the overlay takes priority
-		// over the panel-close shortcut.
-		if (core.ringingId !== null && (e.key === 'Escape' || e.key === 'Enter')) {
-			onDismiss();
+		// While ringing, the overlay owns the keyboard: Escape/Enter dismiss,
+		// and Tab is trapped between Snooze and Dismiss.
+		if (core.ringingId !== null) {
+			if (e.key === 'Escape' || e.key === 'Enter') {
+				onDismiss();
+				return;
+			}
+			if (e.key === 'Tab') {
+				e.preventDefault();
+				const order = [dom.snoozeBtn, dom.dismissBtn];
+				const idx = order.indexOf(document.activeElement as HTMLButtonElement);
+				const nextIdx =
+					idx === -1
+						? 0
+						: (idx + (e.shiftKey ? -1 : 1) + order.length) % order.length;
+				order[nextIdx].focus();
+			}
 			return;
 		}
 		if (e.key === 'Escape' && isPanelOpen) closePanel();
diff --git a/web/src/features/timer/timer.ui.ts b/web/src/features/timer/timer.ui.ts
index 756ab03..c83c207 100644
--- a/web/src/features/timer/timer.ui.ts
+++ b/web/src/features/timer/timer.ui.ts
@@ -1,5 +1,6 @@
 import { formatDuration, formatFinishTime } from '@/shared/time/format';
 import { playBeep } from '@/shared/audio/beep';
+import { flipAnimate } from '@/shared/dom/flip';
 import { queryOptional } from '@/shared/dom/query';
 import {
 	createTimerCore,
@@ -74,6 +75,10 @@ export function initTimer(
 		rootElement,
 		'.timer-toggle',
 	);
+	const toggleText = queryOptional<HTMLElement>(
+		rootElement,
+		'.timer-toggle-text',
+	);
 	const panel = queryOptional<HTMLElement>(rootElement, '.timer-panel');
 	const presetsContainer = queryOptional<HTMLElement>(
 		rootElement,
@@ -98,6 +103,7 @@ export function initTimer(
 		!decMinBtn ||
 		!incMinBtn ||
 		!toggleBtn ||
+		!toggleText ||
 		!panel ||
 		!presetsContainer ||
 		!presetsBar ||
@@ -118,6 +124,7 @@ export function initTimer(
 		decMinBtn,
 		incMinBtn,
 		toggleBtn,
+		toggleText,
 		panel,
 		presetsContainer,
 		presetsBar,
@@ -132,6 +139,9 @@ export function initTimer(
 	let intervalId: number | null = null;
 	let beepIntervalId: number | null = null;
 	let isPanelOpen = false;
+	// See alarm.ui.ts: focus may already be on body by the time an
+	// outside-click close runs, so we track "had focus" from open instead.
+	let panelHadFocus = false;
 	let activeInput: 'min' | 'sec' = 'min';
 
 	let sharedAudioCtx: AudioContext | null = null;
@@ -194,7 +204,7 @@ export function initTimer(
 		// Buttons
 		startBtn.textContent =
 			core.state === 'running'
-				? '⏸ Pause'
+				? '❚❚ Pause'
 				: core.state === 'paused'
 					? '▶ Resume'
 					: '▶ Start';
@@ -231,19 +241,24 @@ export function initTimer(
 	}
 
 	function renderToggle() {
-		const { toggleBtn } = dom;
+		// Update only the text span — never the button's content, so the
+		// inline SVG icon survives every render.
+		const { toggleText } = dom;
+		dom.toggleBtn.setAttribute('aria-expanded', String(isPanelOpen));
 		if (isPanelOpen) {
-			toggleBtn.textContent = '⏱';
+			toggleText.hidden = true;
 		} else if (
 			core.state === 'running' &&
 			core.remaining > 0 &&
 			core.finishTimestamp !== null
 		) {
-			toggleBtn.textContent = formatFinishTime(core.remaining);
+			toggleText.hidden = false;
+			toggleText.textContent = formatFinishTime(core.remaining);
 		} else if (core.state !== 'idle') {
-			toggleBtn.textContent = formatDuration(core.remaining);
+			toggleText.hidden = false;
+			toggleText.textContent = formatDuration(core.remaining);
 		} else {
-			toggleBtn.textContent = '⏱';
+			toggleText.hidden = true;
 		}
 	}
 
@@ -393,76 +408,28 @@ export function initTimer(
 
 	// ---------- Panel toggle ----------
 
-	// FLIP animation: smoothly animate #clock-container movement when the
-	// panel is added/removed (which re-centers the container in the body).
-	// The clock sliding up/down IS the open/close animation for the
-	// surrounding layout, so open and close feel symmetric.
-	function flipAnimateClockContainer(action: () => void) {
-		const container = rootElement.closest(
-			'#clock-container',
-		) as HTMLElement | null;
-		if (!container) {
-			action();
-			return;
-		}
-
-		// Lock body overflow so the page can't scroll while the height changes
-		const prevBodyOverflow = document.body.style.overflow;
-		document.body.style.overflow = 'hidden';
-
-		// First: record the current position of #clock-container
-		const firstRect = container.getBoundingClientRect();
-
-		// Run the DOM mutation (open/close panel)
-		action();
-
-		// Last: measure the new position synchronously
-		const lastRect = container.getBoundingClientRect();
-
-		// Compute the delta and invert it with a transform
-		const dx = firstRect.left - lastRect.left;
-		const dy = firstRect.top - lastRect.top;
-		if (dx === 0 && dy === 0) {
-			document.body.style.overflow = prevBodyOverflow;
-			return;
-		}
-
-		container.style.transition = 'none';
-		container.style.transform = `translate(${dx}px, ${dy}px)`;
-
-		// Play: on the next frame, animate the transform back to identity
-		requestAnimationFrame(() => {
-			container.style.transition = 'transform 0.3s ease-out';
-			container.style.transform = '';
-		});
-
-		// Clean up inline styles after the transition completes
-		const onEnd = () => {
-			container.removeEventListener('transitionend', onEnd);
-			container.style.transition = '';
-			container.style.transform = '';
-			document.body.style.overflow = prevBodyOverflow;
-		};
-		container.addEventListener('transitionend', onEnd);
-
-		// Fallback in case transitionend doesn't fire
-		setTimeout(onEnd, 400);
+	function clockContainer(): HTMLElement | null {
+		return rootElement.closest('#clock-container') as HTMLElement | null;
 	}
 
 	function openPanel() {
-		flipAnimateClockContainer(() => {
+		flipAnimate(clockContainer(), () => {
 			isPanelOpen = true;
 			dom.panel.removeAttribute('hidden');
 			dom.toggleBtn.classList.add('active');
 			renderToggle();
 		});
+		// Move focus into the panel so keyboard users continue from the
+		// first field instead of the toggle.
+		panelHadFocus = true;
+		dom.minInput.focus();
 	}
 
 	function closePanel() {
 		// Mirror open exactly: hide the panel immediately and let the FLIP
 		// clock slide-up be the close animation. This avoids the lag of
 		// waiting for a separate CSS close animation on the panel.
-		flipAnimateClockContainer(() => {
+		flipAnimate(clockContainer(), () => {
 			isPanelOpen = false;
 			dom.toggleBtn.classList.remove('active');
 			dom.panel.classList.remove('closing');
@@ -476,6 +443,12 @@ export function initTimer(
 				renderToggle();
 			}
 		});
+		// Restore focus to the toggle — the dialog trigger — whenever the
+		// panel had focus during this open session.
+		if (panelHadFocus) {
+			panelHadFocus = false;
+			dom.toggleBtn.focus();
+		}
 	}
 
 	function togglePanel() {
diff --git a/web/src/index.html b/web/src/index.html
index 73d1c86..578545f 100644
--- a/web/src/index.html
+++ b/web/src/index.html
@@ -35,10 +35,34 @@
 			<div class="timezone"></div>
 
 			<div id="timer-wrapper">
-				<button class="timer-toggle" aria-label="Toggle timer" title="Timer">
-					⏱
+				<button
+					class="timer-toggle"
+					id="timer-toggle"
+					aria-expanded="false"
+					aria-controls="timer-panel"
+					aria-label="Timer"
+					title="Timer"
+				>
+					<svg
+						class="toggle-icon"
+						viewBox="0 0 24 24"
+						width="1em"
+						height="1em"
+						aria-hidden="true"
+						focusable="false"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<circle cx="12" cy="14" r="7" />
+						<path d="M12 10v4M10 2h4M12 2v3" />
+					</svg>
+					<span class="timer-toggle-text" hidden></span>
 				</button>
-				<div class="timer-panel" hidden>
+				<div class="timer-panel" id="timer-panel" hidden>
+					<h2 class="panel-title">Timer</h2>
 					<div class="timer-display">--:--</div>
 					<div class="timer-finish-time"></div>
 					<div class="timer-controls">
@@ -88,23 +112,54 @@
 			</div>
 
 			<div id="alarm-wrapper">
-				<button class="alarm-toggle" aria-label="Toggle alarms" title="Alarms">
-					⏰
+				<button
+					class="alarm-toggle"
+					id="alarm-toggle"
+					aria-expanded="false"
+					aria-controls="alarm-panel"
+					aria-label="Alarms"
+					title="Alarms"
+				>
+					<svg
+						class="toggle-icon"
+						viewBox="0 0 24 24"
+						width="1em"
+						height="1em"
+						aria-hidden="true"
+						focusable="false"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<circle cx="12" cy="13" r="7" />
+						<path d="M12 10v3l2 2M5.5 5.5 3.5 3.5M18.5 5.5l2-2" />
+					</svg>
 				</button>
-				<div class="alarm-panel" hidden>
+				<div class="alarm-panel" id="alarm-panel" hidden>
+					<h2 class="panel-title">Alarms</h2>
 					<div class="alarm-create">
-						<input
-							class="alarm-name"
-							type="text"
-							maxlength="30"
-							placeholder="Name (optional)"
-							aria-label="Alarm name"
-						/>
-						<input class="alarm-time" type="time" aria-label="Alarm time" />
-						<button class="alarm-add" aria-label="Add alarm">+ Add</button>
+						<div class="alarm-field">
+							<label class="field-label" for="alarm-name">Name</label>
+							<input
+								id="alarm-name"
+								class="alarm-name"
+								type="text"
+								maxlength="30"
+								placeholder="Optional"
+							/>
+						</div>
+						<div class="alarm-field">
+							<label class="field-label" for="alarm-time">Time</label>
+							<div class="alarm-time-row">
+								<input id="alarm-time" class="alarm-time" type="time" />
+								<button class="alarm-add">Add alarm</button>
+							</div>
+						</div>
 					</div>
 					<div class="alarm-error" role="alert"></div>
-					<div class="alarm-list">
+					<div class="alarm-list" aria-label="Alarm list" aria-live="polite">
 						<!-- Alarm rows rendered dynamically -->
 					</div>
 					<p class="alarm-note">Alarms ring only while this page is open.</p>
@@ -118,17 +173,32 @@
 			<div
 				class="alarm-overlay-card"
 				role="alertdialog"
+				aria-modal="true"
 				aria-label="Alarm ringing"
+				tabindex="-1"
 			>
 				<div class="alarm-overlay-name"></div>
 				<div class="alarm-overlay-time"></div>
 				<div class="alarm-overlay-actions">
-					<button class="alarm-snooze" aria-label="Snooze alarm for 9 minutes">
-						💤 Snooze 9m
-					</button>
-					<button class="alarm-dismiss" aria-label="Dismiss alarm">
-						✕ Dismiss
+					<button class="alarm-snooze">
+						<svg
+							class="button-icon"
+							viewBox="0 0 24 24"
+							width="1em"
+							height="1em"
+							aria-hidden="true"
+							focusable="false"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path d="M4 5h6l-6 7h6M14 10h6l-6 7h6" />
+						</svg>
+						Snooze 9m
 					</button>
+					<button class="alarm-dismiss">✕ Dismiss</button>
 				</div>
 			</div>
 		</div>
diff --git a/web/src/shared/dom/flip.ts b/web/src/shared/dom/flip.ts
new file mode 100644
index 0000000..fbc0186
--- /dev/null
+++ b/web/src/shared/dom/flip.ts
@@ -0,0 +1,70 @@
+/**
+ * FLIP animation for the clock container when a panel is added/removed
+ * (which re-centers the container in the body). Shared by the timer and
+ * alarm panels so both open/close feel identical.
+ *
+ * Honors prefers-reduced-motion: when set (or when matchMedia is
+ * unavailable and `reducedMotion` is passed explicitly), the DOM mutation
+ * runs with no animation.
+ */
+export function flipAnimate(
+	container: HTMLElement | null,
+	action: () => void,
+	options: { reducedMotion?: boolean } = {},
+): void {
+	if (!container) {
+		action();
+		return;
+	}
+
+	const reduceMotion =
+		options.reducedMotion ??
+		(typeof window.matchMedia === 'function' &&
+			window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+	if (reduceMotion) {
+		action();
+		return;
+	}
+
+	// Lock body overflow so the page can't scroll while the height changes.
+	const prevBodyOverflow = document.body.style.overflow;
+	document.body.style.overflow = 'hidden';
+
+	// First: record the current position of the container.
+	const firstRect = container.getBoundingClientRect();
+
+	// Run the DOM mutation (open/close panel).
+	action();
+
+	// Last: measure the new position synchronously.
+	const lastRect = container.getBoundingClientRect();
+
+	// Compute the delta and invert it with a transform.
+	const dx = firstRect.left - lastRect.left;
+	const dy = firstRect.top - lastRect.top;
+	if (dx === 0 && dy === 0) {
+		document.body.style.overflow = prevBodyOverflow;
+		return;
+	}
+
+	container.style.transition = 'none';
+	container.style.transform = `translate(${dx}px, ${dy}px)`;
+
+	// Play: on the next frame, animate the transform back to identity.
+	requestAnimationFrame(() => {
+		container.style.transition = 'transform 0.3s ease-out';
+		container.style.transform = '';
+	});
+
+	// Clean up inline styles after the transition completes.
+	const onEnd = () => {
+		container.removeEventListener('transitionend', onEnd);
+		container.style.transition = '';
+		container.style.transform = '';
+		document.body.style.overflow = prevBodyOverflow;
+	};
+	container.addEventListener('transitionend', onEnd);
+
+	// Fallback in case transitionend doesn't fire.
+	window.setTimeout(onEnd, 400);
+}
diff --git a/web/src/styles/alarm.css b/web/src/styles/alarm.css
index b3c297b..9af7fd5 100644
--- a/web/src/styles/alarm.css
+++ b/web/src/styles/alarm.css
@@ -39,6 +39,10 @@
 	box-shadow: var(--glow-md);
 }
 
+.toggle-icon {
+	display: block;
+}
+
 /* Pulse while at least one alarm is armed */
 .alarm-toggle.armed {
 	animation: timer-pulse 1.5s ease-in-out infinite;
@@ -65,48 +69,64 @@
 	display: none;
 }
 
-/* ---------- Create controls ---------- */
+/* ---------- Create controls (labeled, stacked) ---------- */
 
 .alarm-create {
 	display: flex;
-	align-items: center;
-	gap: var(--space-xs);
+	flex-direction: column;
+	gap: var(--space-lg);
 	width: 100%;
 }
 
+.alarm-field {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-2xs);
+}
+
 .alarm-create input {
 	min-width: 0;
-	flex: 1;
+	width: 100%;
 	padding: var(--space-xs) var(--space-sm);
 	font-size: var(--font-size-timer-input);
-	text-align: center;
+	text-align: left;
 	background-color: var(--color-surface-alt);
 	border: var(--border-width) solid var(--color-primary);
 	border-radius: var(--border-radius-sm);
 	color: var(--color-primary);
 	font-family: var(--font-family);
+	box-sizing: border-box;
+}
+
+.alarm-time-row {
+	display: flex;
+	align-items: stretch;
+	gap: var(--space-xs);
+}
+
+.alarm-time {
+	flex: 1;
 }
 
 .alarm-add {
 	background: none;
-	border: var(--border-width) dashed var(--color-primary);
+	border: var(--border-width) solid var(--color-primary);
 	color: var(--color-primary);
-	font-size: var(--font-size-xs);
+	font-size: var(--font-size-small);
 	cursor: pointer;
 	border-radius: var(--border-radius-sm);
-	padding: var(--space-2xs) var(--space-lg);
+	padding: var(--space-xs) var(--space-lg);
 	transition:
 		background-color var(--transition-normal),
 		box-shadow var(--transition-normal);
 	line-height: 1;
-	opacity: 0.7;
 	flex-shrink: 0;
+	white-space: nowrap;
 }
 
 .alarm-add:hover,
 .alarm-add:focus-visible {
 	background-color: var(--color-primary-soft);
-	opacity: 1;
 	box-shadow: var(--glow-sm);
 }
 
@@ -124,16 +144,15 @@
 	flex-direction: column;
 	gap: var(--space-xs);
 	width: 100%;
-	max-height: 180px;
+	max-height: 200px;
 	overflow-y: auto;
 }
 
-.alarm-list:empty::after {
-	content: 'No alarms yet';
-	display: block;
+.alarm-empty {
+	margin: 0;
 	text-align: center;
 	font-size: var(--font-size-small);
-	opacity: 0.5;
+	color: var(--color-text-muted);
 	padding: var(--space-md) 0;
 }
 
@@ -154,38 +173,46 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	user-select: none;
+	color: var(--color-primary);
 }
 
 .alarm-row-time {
 	font-size: var(--font-size-small);
 	line-height: 1;
 	font-variant-numeric: tabular-nums;
+	color: var(--color-text-secondary);
 }
 
 .alarm-row-time.snoozed::after {
 	content: ' · snoozed';
-	opacity: 0.6;
+	color: var(--color-text-muted);
 }
 
 .alarm-row.disabled .alarm-row-name,
 .alarm-row.disabled .alarm-row-time {
-	opacity: 0.4;
+	color: var(--color-text-muted);
 }
 
 .alarm-row-toggle {
 	accent-color: var(--color-primary);
 	cursor: pointer;
 	flex-shrink: 0;
+	width: 18px;
+	height: 18px;
+	margin: 3px;
 }
 
 .alarm-row-remove {
 	background: none;
 	border: none;
-	color: var(--color-primary);
-	opacity: 0.5;
-	font-size: 0.9em;
+	color: var(--color-text-muted);
+	font-size: 1em;
 	line-height: 1;
-	padding: 0 var(--space-2xs);
+	width: 24px;
+	height: 24px;
+	display: grid;
+	place-items: center;
+	padding: 0;
 	cursor: pointer;
 	transition:
 		opacity var(--transition-fast),
@@ -194,7 +221,6 @@
 }
 
 .alarm-row-remove:hover {
-	opacity: 1;
 	color: var(--color-danger);
 }
 
@@ -204,7 +230,7 @@
 	margin: 0;
 	text-align: center;
 	font-size: var(--font-size-xs);
-	opacity: 0.55;
+	color: var(--color-text-muted);
 }
 
 /* ---------- Ringing overlay ---------- */
@@ -259,6 +285,10 @@
 }
 
 .alarm-overlay-actions button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--space-2xs);
 	background: none;
 	border: var(--border-width) solid var(--color-primary);
 	color: var(--color-primary);
@@ -271,6 +301,10 @@
 		box-shadow var(--transition-normal);
 }
 
+.button-icon {
+	display: block;
+}
+
 .alarm-overlay-actions button:hover,
 .alarm-overlay-actions button:focus-visible {
 	background-color: var(--color-primary-medium);
diff --git a/web/src/styles/animations.css b/web/src/styles/animations.css
index 218122d..72f754b 100644
--- a/web/src/styles/animations.css
+++ b/web/src/styles/animations.css
@@ -63,3 +63,16 @@ body.timer-finished #clock-container {
 		box-shadow: 0 0 24px var(--color-primary);
 	}
 }
+
+/* ---------- Reduced motion ---------- */
+/* Users who ask for reduced motion get no pulses, pops, or FLIP slides.
+   The JS-driven FLIP helper (shared/dom/flip.ts) checks the same query. */
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+	}
+}
diff --git a/web/src/styles/base.css b/web/src/styles/base.css
index a82d46a..3b3d9a6 100644
--- a/web/src/styles/base.css
+++ b/web/src/styles/base.css
@@ -16,6 +16,47 @@ body {
 	overflow-x: hidden;
 }
 
+/* Form controls don't inherit the page font/color by default — without
+   this, buttons and inputs render in the UA font (visible in the panels). */
+button,
+input {
+	font-family: var(--font-family);
+	color: inherit;
+}
+
+/* One consistent keyboard-focus indicator everywhere. */
+:focus-visible {
+	outline: var(--focus-outline-width) solid var(--color-primary);
+	outline-offset: var(--focus-outline-offset);
+}
+
+/* Placeholder text is themed (the label carries the meaning, but the
+   placeholder must still be legible — browser default gray fails on dark). */
+::placeholder {
+	color: var(--color-placeholder);
+	opacity: 1;
+}
+
+/* ---------- Shared panel primitives (used by timer + alarm panels) ---------- */
+
+.panel-title {
+	margin: 0;
+	font-size: var(--font-size-small);
+	font-weight: var(--font-weight-bold);
+	text-transform: uppercase;
+	letter-spacing: 0.12em;
+	text-align: center;
+	color: var(--color-text-secondary);
+}
+
+.field-label {
+	font-size: var(--font-size-xs);
+	text-transform: uppercase;
+	letter-spacing: 0.1em;
+	color: var(--color-text-secondary);
+	user-select: none;
+}
+
 /* ---------- Environment Marker ---------- */
 
 .environment-marker {
diff --git a/web/src/styles/responsive.css b/web/src/styles/responsive.css
index d7817ae..5aa7491 100644
--- a/web/src/styles/responsive.css
+++ b/web/src/styles/responsive.css
@@ -46,10 +46,6 @@
 		max-width: calc(100vw - 24px);
 	}
 
-	.alarm-create {
-		flex-wrap: wrap;
-	}
-
 	.alarm-create input {
 		font-size: var(--font-size-body);
 	}
diff --git a/web/src/styles/timer.css b/web/src/styles/timer.css
index e6c6753..8b851c8 100644
--- a/web/src/styles/timer.css
+++ b/web/src/styles/timer.css
@@ -38,6 +38,20 @@
 	box-shadow: var(--glow-md);
 }
 
+/* Dynamic text (countdown / finish time) shown next to the icon — never
+   replace the button's content, the SVG icon must survive renders. */
+.timer-toggle {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-2xs);
+}
+
+.timer-toggle-text {
+	font-size: 0.7em;
+	line-height: 1;
+	font-variant-numeric: tabular-nums;
+}
+
 .timer-toggle.running {
 	animation: timer-pulse 1.5s ease-in-out infinite;
 }
@@ -92,7 +106,8 @@
 }
 
 .timer-finish-time.visible {
-	opacity: 0.75;
+	opacity: 1;
+	color: var(--color-text-secondary);
 }
 
 /* ---------- Controls (Inputs + Inc/Dec) ---------- */
@@ -132,28 +147,27 @@
 	font-size: var(--font-size-timer-input);
 	cursor: pointer;
 	border-radius: var(--border-radius-sm);
-	padding: var(--space-xs) var(--space-lg);
-	transition:
-		background-color var(--transition-normal),
-		opacity var(--transition-normal),
-		visibility var(--transition-normal);
+	padding: 0;
+	width: 2em;
+	height: 2em;
+	display: grid;
+	place-items: center;
+	box-sizing: border-box;
+	transition: background-color var(--transition-normal);
 	line-height: 1;
-	opacity: 0;
-	visibility: hidden;
-}
-
-.timer-controls:hover button,
-.timer-controls:focus-within button {
-	opacity: 0.5;
-	visibility: visible;
 }
 
+/* Always visible — hover-only controls are unusable on touch devices. */
 .timer-controls button:hover,
 .timer-controls button:focus-visible {
-	opacity: 1 !important;
 	background-color: var(--color-primary-medium);
 }
 
+.timer-controls button:disabled {
+	opacity: 0.35;
+	cursor: not-allowed;
+}
+
 .timer-colon {
 	font-size: var(--font-size-timer-input);
 	font-weight: var(--font-weight-bold);
@@ -202,25 +216,26 @@
 	font-size: var(--font-size-small);
 	line-height: 1;
 	user-select: none;
+	color: var(--color-text-secondary);
 }
 
 .preset-row-remove {
 	background: none;
 	border: none;
-	color: var(--color-primary);
-	opacity: 0.5;
-	font-size: 0.9em;
+	color: var(--color-text-muted);
+	font-size: 1em;
 	line-height: 1;
-	padding: 0 var(--space-2xs);
+	width: 24px;
+	height: 24px;
+	display: grid;
+	place-items: center;
+	padding: 0;
 	cursor: pointer;
-	transition:
-		opacity var(--transition-fast),
-		color var(--transition-fast);
+	transition: color var(--transition-fast);
 	flex-shrink: 0;
 }
 
 .preset-row-remove:hover {
-	opacity: 1;
 	color: var(--color-danger);
 }
 
@@ -237,28 +252,26 @@
 
 .timer-preset-add {
 	background: none;
-	border: var(--border-width) dashed var(--color-primary);
+	border: var(--border-width) solid var(--color-primary);
 	color: var(--color-primary);
-	font-size: var(--font-size-xs);
+	font-size: var(--font-size-small);
 	cursor: pointer;
 	border-radius: var(--border-radius-sm);
-	padding: var(--space-2xs) var(--space-lg);
+	padding: var(--space-xs) var(--space-lg);
 	transition:
 		background-color var(--transition-normal),
 		box-shadow var(--transition-normal);
 	line-height: 1;
-	opacity: 0.7;
 }
 
 .timer-preset-add:hover,
 .timer-preset-add:focus-visible {
 	background-color: var(--color-primary-soft);
-	opacity: 1;
 	box-shadow: var(--glow-sm);
 }
 
 .timer-preset-add.inactive {
-	opacity: 0.3;
+	color: var(--color-text-muted);
 	cursor: default;
 	box-shadow: none;
 }
@@ -266,7 +279,6 @@
 .timer-preset-add.inactive:hover,
 .timer-preset-add.inactive:focus-visible {
 	background-color: transparent;
-	opacity: 0.3;
 	box-shadow: none;
 }
 
diff --git a/web/src/styles/variables.css b/web/src/styles/variables.css
index 0bd4ab0..4eb5cb3 100644
--- a/web/src/styles/variables.css
+++ b/web/src/styles/variables.css
@@ -17,7 +17,20 @@
 	--color-primary-medium: rgba(0, 255, 0, 0.15);
 	--color-primary-strong: rgba(0, 255, 0, 0.3);
 
-	--color-danger: #f00;
+	--color-danger: #ff6b6b;
+
+	/* Text tiers — composited contrast on --color-surface (#1a1a1a):
+	   secondary ≈ 7.0:1, muted ≈ 5.2:1 (both pass WCAG AA). Never use raw
+	   opacity for text tiers — use these tokens. */
+	--color-text-secondary: rgba(0, 255, 0, 0.72);
+	--color-text-muted: rgba(0, 255, 0, 0.6);
+
+	/* Input placeholder (on --color-surface-alt) ≈ 4.7:1 */
+	--color-placeholder: rgba(0, 255, 0, 0.55);
+
+	/* Focus ring (outline) — #0f0 on --color-bg ≈ 11.6:1 */
+	--focus-outline-width: 2px;
+	--focus-outline-offset: 2px;
 
 	/* === Typography === */
 	--font-family: 'Arial', sans-serif;
diff --git a/web/tests/unit/shared/dom/flip.test.ts b/web/tests/unit/shared/dom/flip.test.ts
new file mode 100644
index 0000000..ddec7d1
--- /dev/null
+++ b/web/tests/unit/shared/dom/flip.test.ts
@@ -0,0 +1,95 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { flipAnimate } from '@/shared/dom/flip';
+
+describe('flipAnimate', () => {
+	let container: HTMLElement;
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		document.body.append(container);
+	});
+
+	afterEach(() => {
+		container.remove();
+		vi.unstubAllGlobals();
+		vi.restoreAllMocks();
+		vi.useRealTimers();
+	});
+
+	it('runs the action with no animation when reduced motion is set', () => {
+		let ran = false;
+		flipAnimate(container, () => (ran = true), { reducedMotion: true });
+		expect(ran).toBe(true);
+		expect(container.style.transform).toBe('');
+		expect(document.body.style.overflow).toBe('');
+	});
+
+	it('runs the action immediately when there is no container', () => {
+		let ran = false;
+		flipAnimate(null, () => (ran = true));
+		expect(ran).toBe(true);
+	});
+
+	it('animates: locks overflow, inverts the delta, then cleans up', () => {
+		vi.stubGlobal('matchMedia', vi.fn().mockReturnValue({ matches: false }));
+		vi.stubGlobal(
+			'requestAnimationFrame',
+			vi.fn((cb: FrameRequestCallback) => {
+				cb(0);
+				return 0;
+			}),
+		);
+		vi.spyOn(container, 'getBoundingClientRect')
+			.mockReturnValueOnce({ top: 100, left: 10 } as DOMRect)
+			.mockReturnValueOnce({ top: 60, left: 10 } as DOMRect);
+
+		vi.useFakeTimers();
+		let ran = false;
+		flipAnimate(container, () => (ran = true));
+
+		expect(ran).toBe(true);
+		// dy = 100 - 60 = 40 → inverted transform applied.
+		expect(container.style.transform).toBe('translate(0px, 40px)');
+		expect(document.body.style.overflow).toBe('hidden');
+
+		// transitionend never fires in jsdom — the fallback must clean up.
+		vi.advanceTimersByTime(400);
+		expect(container.style.transform).toBe('');
+		expect(container.style.transition).toBe('');
+		expect(document.body.style.overflow).toBe('');
+	});
+
+	it('cleans up immediately when the position did not change', () => {
+		vi.stubGlobal('matchMedia', vi.fn().mockReturnValue({ matches: false }));
+		vi.spyOn(container, 'getBoundingClientRect')
+			.mockReturnValueOnce({ top: 10, left: 10 } as DOMRect)
+			.mockReturnValueOnce({ top: 10, left: 10 } as DOMRect);
+
+		let ran = false;
+		flipAnimate(container, () => (ran = true));
+
+		expect(ran).toBe(true);
+		expect(container.style.transform).toBe('');
+		expect(document.body.style.overflow).toBe('');
+	});
+
+	it('treats an absent matchMedia as "motion allowed"', () => {
+		vi.spyOn(container, 'getBoundingClientRect')
+			.mockReturnValueOnce({ top: 10, left: 10 } as DOMRect)
+			.mockReturnValueOnce({ top: 0, left: 10 } as DOMRect);
+		vi.stubGlobal(
+			'requestAnimationFrame',
+			vi.fn((cb: FrameRequestCallback) => {
+				cb(0);
+				return 0;
+			}),
+		);
+		vi.useFakeTimers();
+
+		let ran = false;
+		flipAnimate(container, () => (ran = true));
+
+		expect(ran).toBe(true);
+		expect(container.style.transform).toBe('translate(0px, 10px)');
+	});
+});