# Resume tomorrow — UX/UI Lockdown (continuing from Apr 27 EOD)
> Last updated: 2026-04-27 evening
> Track: app-design-system buildable spec for Josh
> Today's session goal: lock final UX/UI decisions across motion, popups, filters, components, buttons → consolidate into a single buildable spec

---

## 🟢 What today (Apr 27) locked

### Motion (4 locks via MOTION-SPEC-V1)
- **B1 = C** — Modal expand FROM the pill (filter expand motion)
- **B2 = B** — Crossfade in same position (popup tier-1 → tier-2)
- **B3 = C** — Height-collapse with stagger (list enter/exit on filter change)
- **B4 = B** — Type-in letter-by-letter (vault/jar title float-in)

Plus 12 Section A patterns documented as canonical (press-spring, D-Ring, element entrance, bottom-sheet rise, stacked-card lift, counter roll-up, text reveal, ambient drift, chip-tap pulse, downstream terracotta flash, per-vault dot language, Calm Memory Garden rule).

### Pop-up cards (2 locks via POPUP-SPEC-V1)
- **B1 = B** — Stacked with offset (crowded-dandelion treatment, cards-on-a-table feel)
- **B2 = COMBO of A + C** — Bloom expansion + Tier 2 docks as thumbnail in Tier 3 corner. Critical specs: **always gold for the Tier 3 expansion** regardless of vault color (because seeds live in multiple vaults; bloom is universally a commitment moment).
- A2 reference card fixes: mic icon replaces "voice note" text, dash → middot, state/status consistency ("Blooming Soon" not "Bloom Now" when countdown is active).

### Meta-decisions
- **Provisional Locks Principle** (logged in `biz-dev-decisions-log.md`) — every lock can be superseded by a stronger inspiration. Applies to ALL design decisions going forward.
- **Master spec name** confirmed as `app-design-system.html` (not `brand-system-master.html`) — explicitly app-scoped, distinct from broader brand system work.

### Inspiration library (6 new entries, library now at 35 cards)
- **Entry 028** — Push-Aside Reveal (@musabalfawal Figma) — strong B1(D) candidate for filter expand in vault contexts
- **Entry 029** — Radial Carousel with center-focus detail (Kole Jain video, 1:30–1:48)
- **Entry 030** — Bloom-from-card-to-page expansion (Kole Jain video, 3:00–3:28)
- **Entry 031** — Pull-up structured detail card (Kole Jain video, ~4:08)
- **Entry 032** — Swipe-to-reveal-actions + sliding-button confirm (Kole Jain video, 4:20)
- **Entry 033** — Ring-of-files magnetic flip (Ashley's verbal note — "rolodex" feel)
- **Entry 034** — Melting Ball Tabbar Animation (Neil Guo, Dribbble) — strong TAB2 supersede candidate

---

## 🟡 First thing tomorrow — verify yesterday's edits

Open in browser and refresh:
1. `http://localhost:8090/MOTION-SPEC-V1.html` — confirm Section A renders, Section B picks are visible
2. `http://localhost:8090/POPUP-SPEC-V1.html` — confirm A2 reference card has mic icon + middot + "Blooming Soon"
3. `http://localhost:8090/ux-inspiration-library.html` — scroll to entries 028–034 to confirm they render

If all three look right → proceed to the lockdown questions below.

---

## 🟡 Tomorrow's lockdown questions (3 supersede evaluations queued)

These are the formal "does the new inspiration supersede the existing lock?" questions per Provisional Locks Principle. Each needs a yes/no/combine answer to either re-lock or confirm the existing lock.

### Q1 — Filter F05 (Filter Widget Over Dandelion) vs Entry 028 (Push-Aside Reveal)
- **Currently locked:** F05 = B (the "filter widget hovering over the dandelion" pattern — overlay).
- **Supersede candidate:** Entry 028 (Push-Aside Reveal) slides the entire dandelion view RIGHT to reveal filters underneath instead of overlaying.
- **Decision needed:** Push-Aside replaces F05 entirely? Or only inside vault-context filtering? Or stays parked as a future B1(D) candidate?
- **Lean:** Push-Aside is meaningfully better for vault-context filtering (dandelion stays visible as you filter). Likely answer: vault contexts use Push-Aside, list views (Pressed Shelf, Garden grid) keep the F05 overlay.

### Q2 — Tab nav (TAB2 = Gradient Plant + Ring) vs Entry 034 (Melting Ball Tabbar)
- **Currently locked:** TAB2 = Gradient Plant + Ring (4 flat tabs + raised gold Plant FAB in center).
- **Supersede candidate:** Entry 034 — single liquid blob floats over tab bar, melts/stretches between positions on tap. Most "DandyLine-feeling" nav inspiration captured.
- **Decision needed:** Melting Ball replaces TAB2? Or combine (keep gold Plant FAB always-on, blob routes around it)?
- **Plant integration tension:** does the blob TURN GOLD when over the Plant tab (unified, but Plant loses its distinct FAB raise), OR does the gold Plant FAB stay always-raised and the blob simply skips over that position?
- **Lean:** combine — blob is the active indicator for the 4 non-Plant tabs, Plant FAB stays always-raised gold + slightly above the blob's path.

### Q3 — Browse-many pattern (no current lock; 5 candidates)
- **Open thread #1** carried from Apr 26: how do you browse many seeds at once?
- **5 candidates** to prototype-compare before locking:
  1. Entry 021 — Stacked-card browse (Apple Wallet)
  2. Entry 024 — Mixed-media thumbnail strip (Canopi)
  3. Entry 015 — Master-visual + queue (MD Vinyl)
  4. Entry 029 — Radial Carousel with center-focus (NEW today — Kole Jain)
  5. Entry 033 — Ring-of-files magnetic flip (NEW today — Ashley's verbal)
- **Decision needed:** which one(s) get prototyped first? OR pick a leaning lock based on use-case?
- **Recommendation:** prototype Radial Carousel (029) first — it covers the most use cases and felt strongest from the inspo capture.

---

## 🟡 Cleanup tasks (carried from Apr 26 → still pending)

These are 1-line edits that have been carried two sessions. Knock them out tomorrow:

1. **Entry 026 takeaway** — remove "Open question: should the orb hue be tied to the gardener's most-used vault, or be entirely independent? Lean independent — confirm with Ashley before locking." Per Apr 26 lock: independent. Just delete the open-question line.
2. **Entry 027 takeaway** — remove "Open question for Ashley: should the chip row auto-hide after ~4 seconds... Lean persistent... worth a try in prototype." Per Apr 26 lock: persistent. Just delete the open-question line.
3. **Visual QA pass of entries 009–034** — STILL PENDING. Library is at 35 cards; 26 of them have never been browser-verified (009 through 034). Should happen before the master spec gets built so we know the underlying canon is correct.

---

## 🟡 Sequence remaining (in order)

| Step | Item | Estimated time |
|------|------|----------------|
| 3 | Filters supersede evaluation (Q1 above) | 10 min |
| 4 | Button cleanup + tab nav supersede evaluation (Q2 above) — Group 13 mapping, Section 11+ disposition, C05 alignment to canonical 6 bloom triggers | 30 min |
| 5 | Two takeaway cleanups (Entry 026 + 027) | 5 min |
| 5b | Visual QA pass of inspiration library (009–034) | 30 min |
| 6 | **Build `app-design-system.html` master consolidated spec** — every lock from motion, components, buttons, popups, filters, vault rendering, bloom triggers, countdown lifecycle in one file Josh can use | 60–90 min |
| 7 | Archive cleanup catalog — show Ashley candidates with reasons + extracted-content destinations BEFORE any moves | 20 min |
| 8 | Execute archive moves on Ashley's per-batch approval | 15 min |

**Total remaining: ~3 hours of focused work** to ship the buildable spec and clean up. Doable in a morning session.

---

## 🟡 Future work backlog (after the spec ships)

These were raised today but explicitly deferred:

- **Build B1(D) Push-Aside prototype** (Entry 028) — formal A/B test against B1=C (Modal expand from pill). Needed to formally lock the F05 supersede question.
- **Build A10a/A10b prototypes** — pick-confirm + sibling-dim, reveal-new-options. Tracked in `BUTTON-CONSOLIDATION-FEEDBACK-2026-04-26.md`.
- **Small-medium-icon disambiguation set** — Ashley flagged today: at the small sizes used in popup B1=B (stacked-with-offset variant), media icons (mic / camera / video / note / location) might look too similar. Needs a dedicated small-icon reference, possibly `brand-icons-small.html` or addition to `brand-system.html`.
- **Tab nav Plant FAB integration prototype** — for Q2 above, prototype both options (blob-turns-gold-at-Plant vs blob-routes-around-always-gold-FAB) to feel which is better.
- **B4 playTitle bug** in MOTION-SPEC-V1 — variants A and C don't replay (variant B works). Doesn't block anything since B is the picked variant; revisit during master spec consolidation.

---

## 🟢 Files touched today (with reason)

| File | Change |
|------|--------|
| `MOTION-SPEC-V1.html` | NEW — built today, B1–B4 picks made; A3/A4/A8/A12 fixes applied |
| `POPUP-SPEC-V1.html` | NEW — built today, B1+B2 picks made, A2 reference fixes applied |
| `ux-inspiration-library.html` | Added entries 028–034 (7 new), library now 35 cards |
| `INSPIRATION-LIBRARY-HANDOFF.md` | Updated to Apr 27 merged state, all carry-forwards preserved |
| `biz-dev-decisions-log.md` | 3 new entries: Motion picks, Pop-up picks, Provisional Locks Principle |
| `BUTTON-CONSOLIDATION-FEEDBACK-2026-04-26.md` | Updated with A10 rework feedback + canonical homepage card patterns |
| `dandyline-app/.claude/launch.json` | Added `dandyline` http-server config so Claude can preview-verify changes |
| `ux-component-decisions.html` | Picker JS bug fixed + 6 vaults rendered with canonical drawIconJar (yesterday's evening edits) |

---

## 🟢 Related living docs to keep referencing

- **`INSPIRATION-LIBRARY-HANDOFF.md`** — current source of truth for inspo library state
- **`BUTTON-CONSOLIDATION-FEEDBACK-2026-04-26.md`** — comprehensive working notes on the lockdown
- **`biz-dev-decisions-log.md`** — formal decisions log (Apr 27 entries)
- **`SESSION-BRIEF.md`** (root level) — broad project context, refresh if it's been a few days
- **`CLAUDE.md`** (MASTER folder) — project rules including Translator Rule + naming conventions

---

## 🟢 What to say to Claude tomorrow

"Continuing the UX/UI lockdown from Apr 27. Read this file + INSPIRATION-LIBRARY-HANDOFF.md, then start with the verification step (refresh those 3 URLs). Once verified, walk me through the 3 supersede questions (Q1 filters, Q2 tab nav, Q3 browse-many). After those are answered, knock out the 2 takeaway cleanups + visual QA pass, then build app-design-system.html."

That's the start-of-session prompt.