[coderconnoisseur]

First step of the inner-app UI/UX revamp. Spec: docs/superpowers/specs/2026-10-20-ui-revamp-design.md (+ home mockup). Plan: docs/superpowers/plans/2026-10-20-ui-revamp-phase0.md.

What changes

• Overlays no longer move the page. Opening the profile menu (or any dropdown, dialog, select or sheet) used to shift the content sideways by half the scrollbar width, because Radix's scroll lock added a margin. Fixed once in globals.css: in-app scrollbar-gutter: stable and cancelling the lock's margin.
• Sky light theme for the signed-in app only. Tokens are keyed on :root:has([data-app-theme="sky"]), so menus and dialogs portaled into <body> match. The dark: variant is off in-app. Landing, login and onboarding stay dark. Muted text was darkened to #6b6963 (4.9:1, AA).
• Type roles. IBM Plex Mono labels (.label-mono / font-label) and Newsreader as font-serif.
• Motion. framer-motion was removed and everything uses motion/react. Shared timings are in lib/motion.ts. Reduced motion is honoured globally.
• Ask Lumen chat panel. It keeps its dark .bui look inside the light shell until its Phase 4 restyle.

Checks

npm run test:e2e (Playwright, local only, against the dev-only harness /dev/layout-shift, which returns 404 in production): 15/15 pass in Chromium.

• Overlay shift went from 7.5 px to 0 on dropdown, dialog, select and sheet. The popover was already fine.
• Portaled menu is Sky. Muted text passes AA. Login stays dark. Sky is present from the first server paint, so there is no dark auth loader. .bui panel text passes AA. No gutter on public pages. Reduced motion stops transitions.
• Also passing: tsc --noEmit, npm run lint, npm run build.

Needs a manual check (no backend in the build environment)

• In Firefox, open Ask Lumen in a demo session, open the profile menu, and confirm the chat column doesn't move. The Playwright Firefox build is blocked from running on this Windows machine, so Firefox runs are opt-in with E2E_FIREFOX=1.
• Click through the old inner pages on light. They will look rough until Phases 1–5 replace them, but nothing should be unreadable.

Deferred (minor)

• The theme-color meta is still dark inside the app (mobile browser bar).
• Muted text on the light-blue end of --band is about 4.2:1. Phase 2 should use foreground there.
• Reduced motion also stops spinners. That's the standard trade-off.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
lumen	Ready	Preview	Oct 21, 2026 5:29pm UTC