UI overhaul: Notion-inspired design, animations, Phosphor icons#6
Merged
Conversation
Foundation swap approach: rose/coral accent, Geist font, Phosphor icons, Framer Motion spring physics, asymmetric bento layouts across all pages. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
14 tasks covering foundation swap (colors, font, shadows), icon migration (14 files), motion system, and per-page layout + animation overhauls. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replaced lucide-react with @phosphor-icons/react across all 16 files. Updated icon names (e.g. Music2->MusicNote, Mic->Microphone, LogOut->SignOut), added size/weight props, removed className-based sizing, and updated LucideIcon type references to React.ComponentType<IconProps>. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…er reveals Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…pring beats Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Replace min-h-screen with min-h-[100dvh] in layout.tsx and page.tsx - Migrate chart palettes from hardcoded purple/green hex values to design-system tokens (rose/stone scale: chart-1…chart-5, primary) - CalendarHeatmap CSS-in-JS colors + legend swatches now use CSS vars - InstrumentBreakdown COLORS array now references CSS custom properties - PracticeChart bar colors replaced with rose/stone RGBA equivalents Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Double-bezel (Doppelrand) card architecture: outer shell + inner core - Button-in-button CTA pattern with trailing icon circles - Pill-shaped buttons with active:scale press physics - Custom cubic-bezier transitions (0.32, 0.72, 0, 1) - Deeper dark mode (#050505 bg, #111110 cards) - Sky blue accent palette (#0ea5e9 light, #7dd3fc dark) - Subtle grain texture overlay via noise.svg - Radial glow ambient light in backgrounds - Eyebrow tags with uppercase tracking - Macro-whitespace (larger section padding) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- AnimatePresence crossfade between setup and active session modes - Breathing pulse dot on "Session Active" indicator - Timer dims to 50% opacity when paused - Paused badge animates in/out with scale - Error messages slide in/out smoothly - All transitions use premium cubic-bezier (0.32, 0.72, 0, 1) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Default theme: light (warm off-white #f8f8f6 bg) - Register page: full split-panel layout matching login quality - Login mobile: form shows first, marketing below (order swap) - Button touch targets: bumped to 44px minimum (h-11) - Added prefers-reduced-motion media query - Grain overlay z-index: 50 → 30 (won't block modals) - Register: double-bezel card, button-in-button CTA, feature cards Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…harts - New color tokens: warm (amber #f59e0b) and success (emerald #10b981) - Chart palette: blue, amber, emerald, violet, rose (was monochrome) - Login/Register feature cards: each icon gets its own color tint - Dashboard instruments: Guitar=blue, Bass=amber, Drums=red, Keys=green - Streak flame icon: amber (warmth/fire) instead of blue - Stats clock icon: blue (time) instead of gray Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Palette: warm white #ffffff bg, soft charcoal #37352f text, muted cyan #2eaadc primary (Notion's exact blue), barely-there #e9e9e7 borders - Cards: simple flat surfaces with subtle borders, no double-bezel - Buttons: rounded-lg (not pill), simpler 200ms transitions, no translate-y - Typography: softer hierarchy, less aggressive tracking - Login/Register: cleaner layout, feature cards as hover-highlighted rows - Dark mode: warm gray #191919 (not OLED black), #202020 cards - Radius: 0.625rem base (softer than before) - Overall: paper-like, calm, the UI disappears and content leads Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Killed the two-panel layout. Single column, max-w-2xl, centered. - Compact header: icon + title inline, one line of description. - Goal presets: chip/pill buttons instead of full-width bordered rows. Active preset highlights in primary/10. - Form: instrument + level side-by-side on desktop. Inputs match Notion-style (bg-background, barely-there borders, 200ms transitions). - Removed Card wrapper nesting. Flat structure, no cards-in-cards. - Result card: clean, minimal, "Your plan" header with cached badge. - Removed all marketing copy. This is a tool, not a sales pitch. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Card bg #202020 → #252525 (more separation from #191919 bg) - Foreground #e3e2e0 → #ededec (brighter text) - Muted-foreground #9b9a97 → #ababab (more readable) - Primary dark: #14B8A6 → #2dd4bf (teal-300, brighter on dark bg) - Borders: 8% → 12% opacity (more visible) - Icon backgrounds: boosted to 15% opacity in dark mode - Removed console.log from RegisterPage - Fixed unused variable warning Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Killed the giant "Welcome back" hero + marketing copy - Header: just "username." + session count + last instrument inline - Latest session: compact card, not a full panel with nested boxes - Removed redundant Logout button (already in header nav) - Heatmap/charts: simple section headers, no Card wrappers with CardTitle - Charts side by side with minimal chrome - Session archive: compact row layout (not 4-column grid cards) Each session is one line: #id · instrument · description · date · duration - Filters: chip buttons + inline date/search (not stacked labeled inputs) - Empty states: centered text with CTA, not bordered dashed boxes - Removed shadow-lg from everything (too heavy, all same weight) - Overall: reads like a tool you use daily, not a dashboard you demo Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Mock framer-motion and motion-wrapper in practice-timer tests (AnimatePresence doesn't render children in jsdom) - All 22 tests passing - Add docs/TODO.md with deferred work: email, visual identity, design review findings, performance, testing, accessibility Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Remove .claude/, .gstack/, .superpowers/, .next/ from git tracking. These are local-only AI tooling files that should never be in the repo. Updated .gitignore to prevent future commits. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Full UI overhaul driven by
/design-taste-frontend,/high-end-visual-design,/animate,/colorize, and/polishskills.docs/TODO.mdcovering email, visual identity ideas, accessibility, testing gapsTest plan
npx next build— clean, 14 static pagesnpm test— 22/22 passing🤖 Generated with Claude Code