Design overhaul: landing page, taste pass rounds 1-3, smoke test - #54
Merged
Conversation
… rules) Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_019KMyYkdjgDzeEAjCkYMP1s
Brief (.impeccable.md) calls for warm-dark studio surfaces and restrained teal accents. Dark surfaces were neutral gray (#191919) and the primary was saturated cyan (#2dd4bf) used on ~9 controls per view. Surfaces now carry a warm undertone; primary desaturated to studio teal (#3aa392); destructive softened; purple/orange chart hues muted to sit in the same family. Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_019KMyYkdjgDzeEAjCkYMP1s
…d destructives New Button variants: 'selected' (quiet teal chip for active toggles) and 'destructiveOutline'. Metronome/Tuner toggle, time signatures, and take capture modes no longer render as filled primaries; Delete/Stop no longer filled red at rest. Each zone keeps exactly one filled primary CTA. Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_019KMyYkdjgDzeEAjCkYMP1s
… warm empty state Sessions list: card stack with redundant OPEN pills replaced by a single divided-list surface with relative timestamps and a chevron affordance. Nav: 'The Shed' item renamed 'Sessions' (brand no longer duplicated), active page gets a teal underline. Empty state warmed up and points at the create panel. Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_019KMyYkdjgDzeEAjCkYMP1s
Three different accent hues (teal/gold/green) on one screen contradicted the one-restrained-accent rule; all three bullets now sit in the primary family. Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_019KMyYkdjgDzeEAjCkYMP1s
…track, cleanup Runs against the real Django+Next stack (not the e2e mock): npm run smoke. Prod-ready via BASE_URL/SMOKE_USER/SMOKE_PASS env. 3.3s locally, passing. Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_019KMyYkdjgDzeEAjCkYMP1s
… only, zero-count and absolute-date noise dropped Field labels move from all-caps letterspaced micro-labels to sentence-case text-sm; uppercase eyebrows remain only on top-level zone titles. Track rows hide '0 licks', the takes pill hides at zero, session header shows relative time, transport readouts go mono. Lick in/out inputs lose their box-in-box wrappers (F4, low-risk subset). Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc
…t error CSS rise-in keyframe with per-row --stagger delay, gated behind prefers-reduced-motion: no-preference. Transport/YouTube playback errors get the tinted destructive container instead of a bare red line. Em-dash removed from the empty-state copy. Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc
… slate onto tokens Both components carried slate-50/200/950 light-theme values that broke in dark mode. All surfaces, labels, error blocks, and the recording indicator now use the semantic tokens; buttons rely on their variants. Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc
Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc
Record-sleeve dark studio page: asymmetric hero with layered app screenshots, licks feature band, continuity split, divided tools rows, manifesto close. framer-motion reveals behind useReducedMotion; committed dark regardless of app theme. Logged-in users still redirect to /sessions; app Header hides on /. Screenshots captured from the running app into public/landing/. Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc
…age headers BPM numeral pulses with the click (harder on the downbeat), gated behind useReducedMotion. Page h1s on sessions/account/standalone tools and the empty-session heading move to landing-scale display type. .impeccable.md records Dan's 2026-07-05 amendment: display moments may push past calm, working controls stay quiet. Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc
… login Login marketing panel: display-black 'Pick up where you left off.' with the layered tracks/metronome product shots replacing icon-circle feature bullets. Register: headline to font-black, feature bullets unified to the single teal accent (was three hues). Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc
Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc
Dandiggas
added a commit
that referenced
this pull request
Jul 16, 2026
* docs: add cross-agent AGENTS.md (state protocol, smoke flow, standing rules) Claude-Session: https://claude.ai/code/session_019KMyYkdjgDzeEAjCkYMP1s * style(design): F1a — warm-dark studio tokens, restrained teal primary Brief (.impeccable.md) calls for warm-dark studio surfaces and restrained teal accents. Dark surfaces were neutral gray (#191919) and the primary was saturated cyan (#2dd4bf) used on ~9 controls per view. Surfaces now carry a warm undertone; primary desaturated to studio teal (#3aa392); destructive softened; purple/orange chart hues muted to sit in the same family. Claude-Session: https://claude.ai/code/session_019KMyYkdjgDzeEAjCkYMP1s * style(design): F1b/F2 — one filled primary per zone, quiet toggles and destructives New Button variants: 'selected' (quiet teal chip for active toggles) and 'destructiveOutline'. Metronome/Tuner toggle, time signatures, and take capture modes no longer render as filled primaries; Delete/Stop no longer filled red at rest. Each zone keeps exactly one filled primary CTA. Claude-Session: https://claude.ai/code/session_019KMyYkdjgDzeEAjCkYMP1s * style(design): F5/F6/F8 — sessions list as divided rows, nav clarity, warm empty state Sessions list: card stack with redundant OPEN pills replaced by a single divided-list surface with relative timestamps and a chevron affordance. Nav: 'The Shed' item renamed 'Sessions' (brand no longer duplicated), active page gets a teal underline. Empty state warmed up and points at the create panel. Claude-Session: https://claude.ai/code/session_019KMyYkdjgDzeEAjCkYMP1s * style(design): F9 — login feature bullets use the single accent hue Three different accent hues (teal/gold/green) on one screen contradicted the one-restrained-accent rule; all three bullets now sit in the primary family. Claude-Session: https://claude.ai/code/session_019KMyYkdjgDzeEAjCkYMP1s * test: real-stack smoke flow (issue #34) — login, create session, add track, cleanup Runs against the real Django+Next stack (not the e2e mock): npm run smoke. Prod-ready via BASE_URL/SMOKE_USER/SMOKE_PASS env. 3.3s locally, passing. Claude-Session: https://claude.ai/code/session_019KMyYkdjgDzeEAjCkYMP1s * style(design): F3+F7 — field labels sentence case, eyebrows for zones only, zero-count and absolute-date noise dropped Field labels move from all-caps letterspaced micro-labels to sentence-case text-sm; uppercase eyebrows remain only on top-level zone titles. Track rows hide '0 licks', the takes pill hides at zero, session header shows relative time, transport readouts go mono. Lick in/out inputs lose their box-in-box wrappers (F4, low-risk subset). Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc * style(design): F10 — staggered session-list entry, contained transport error CSS rise-in keyframe with per-row --stagger delay, gated behind prefers-reduced-motion: no-preference. Transport/YouTube playback errors get the tinted destructive container instead of a bare red line. Em-dash removed from the empty-state copy. Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc * style(design): theme — TakeRecorder and StatsCard off hardcoded light slate onto tokens Both components carried slate-50/200/950 light-theme values that broke in dark mode. All surfaces, labels, error blocks, and the recording indicator now use the semantic tokens; buttons rely on their variants. Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc * docs: round-2 design audit results + RUN_STATE handoff Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc * feat(landing): logged-out landing page at / with real product imagery Record-sleeve dark studio page: asymmetric hero with layered app screenshots, licks feature band, continuity split, divided tools rows, manifesto close. framer-motion reveals behind useReducedMotion; committed dark regardless of app theme. Logged-in users still redirect to /sessions; app Header hides on /. Screenshots captured from the running app into public/landing/. Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc * style(design): display moments — metronome pulse-on-beat, editorial page headers BPM numeral pulses with the click (harder on the downbeat), gated behind useReducedMotion. Page h1s on sessions/account/standalone tools and the empty-session heading move to landing-scale display type. .impeccable.md records Dan's 2026-07-05 amendment: display moments may push past calm, working controls stay quiet. Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc * style(design): auth glow-up — editorial headlines, product imagery on login Login marketing panel: display-black 'Pick up where you left off.' with the layered tracks/metronome product shots replacing icon-circle feature bullets. Register: headline to font-black, feature bullets unified to the single teal accent (was three hues). Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc * docs: RUN_STATE round-3 handoff Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc ---------
Dandiggas
added a commit
that referenced
this pull request
Jul 16, 2026
* docs: add cross-agent AGENTS.md (state protocol, smoke flow, standing rules) Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_019KMyYkdjgDzeEAjCkYMP1s * style(design): F1a — warm-dark studio tokens, restrained teal primary Brief (.impeccable.md) calls for warm-dark studio surfaces and restrained teal accents. Dark surfaces were neutral gray (#191919) and the primary was saturated cyan (#2dd4bf) used on ~9 controls per view. Surfaces now carry a warm undertone; primary desaturated to studio teal (#3aa392); destructive softened; purple/orange chart hues muted to sit in the same family. Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_019KMyYkdjgDzeEAjCkYMP1s * style(design): F1b/F2 — one filled primary per zone, quiet toggles and destructives New Button variants: 'selected' (quiet teal chip for active toggles) and 'destructiveOutline'. Metronome/Tuner toggle, time signatures, and take capture modes no longer render as filled primaries; Delete/Stop no longer filled red at rest. Each zone keeps exactly one filled primary CTA. Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_019KMyYkdjgDzeEAjCkYMP1s * style(design): F5/F6/F8 — sessions list as divided rows, nav clarity, warm empty state Sessions list: card stack with redundant OPEN pills replaced by a single divided-list surface with relative timestamps and a chevron affordance. Nav: 'The Shed' item renamed 'Sessions' (brand no longer duplicated), active page gets a teal underline. Empty state warmed up and points at the create panel. Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_019KMyYkdjgDzeEAjCkYMP1s * style(design): F9 — login feature bullets use the single accent hue Three different accent hues (teal/gold/green) on one screen contradicted the one-restrained-accent rule; all three bullets now sit in the primary family. Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_019KMyYkdjgDzeEAjCkYMP1s * test: real-stack smoke flow (issue #34) — login, create session, add track, cleanup Runs against the real Django+Next stack (not the e2e mock): npm run smoke. Prod-ready via BASE_URL/SMOKE_USER/SMOKE_PASS env. 3.3s locally, passing. Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_019KMyYkdjgDzeEAjCkYMP1s * style(design): F3+F7 — field labels sentence case, eyebrows for zones only, zero-count and absolute-date noise dropped Field labels move from all-caps letterspaced micro-labels to sentence-case text-sm; uppercase eyebrows remain only on top-level zone titles. Track rows hide '0 licks', the takes pill hides at zero, session header shows relative time, transport readouts go mono. Lick in/out inputs lose their box-in-box wrappers (F4, low-risk subset). Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc * style(design): F10 — staggered session-list entry, contained transport error CSS rise-in keyframe with per-row --stagger delay, gated behind prefers-reduced-motion: no-preference. Transport/YouTube playback errors get the tinted destructive container instead of a bare red line. Em-dash removed from the empty-state copy. Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc * style(design): theme — TakeRecorder and StatsCard off hardcoded light slate onto tokens Both components carried slate-50/200/950 light-theme values that broke in dark mode. All surfaces, labels, error blocks, and the recording indicator now use the semantic tokens; buttons rely on their variants. Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc * docs: round-2 design audit results + RUN_STATE handoff Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc * feat(landing): logged-out landing page at / with real product imagery Record-sleeve dark studio page: asymmetric hero with layered app screenshots, licks feature band, continuity split, divided tools rows, manifesto close. framer-motion reveals behind useReducedMotion; committed dark regardless of app theme. Logged-in users still redirect to /sessions; app Header hides on /. Screenshots captured from the running app into public/landing/. Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc * style(design): display moments — metronome pulse-on-beat, editorial page headers BPM numeral pulses with the click (harder on the downbeat), gated behind useReducedMotion. Page h1s on sessions/account/standalone tools and the empty-session heading move to landing-scale display type. .impeccable.md records Dan's 2026-07-05 amendment: display moments may push past calm, working controls stay quiet. Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc * style(design): auth glow-up — editorial headlines, product imagery on login Login marketing panel: display-black 'Pick up where you left off.' with the layered tracks/metronome product shots replacing icon-circle feature bullets. Register: headline to font-black, feature bullets unified to the single teal accent (was three hues). Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc * docs: RUN_STATE round-3 handoff Co-Authored-By: WOZCODE <contact@withwoz.com> Claude-Session: https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc --------- Co-authored-by: WOZCODE <contact@withwoz.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
Test plan
🧙 Built with WOZCODE
https://claude.ai/code/session_012aunqZTFgcc7YSwNdDFNgc