--- name: liquid-glass-redesign classification: epic success_metric: | Deck Hearth's UI reads as a modern, glass-forward fireplace: every surface that previously used opaque warm-cream / wood-grain panels now uses a tunable glass token system (translucency + backdrop blur + warm gradient rim-light); every modal blurs the page behind it; the brand warmth (ember / flame / gold) survives as accent and motion, not as a heavy panel fill. Eight sub-convoys ship behind the existing visual-diff + smoke + vitest gates; no regression in the launch-readiness checklist. skip: [] status: open created: 2026-06-03 --- # Liquid Glass Redesign — design-system epic Umbrella convoy capturing the full pivot from the current "warm panel + side-highlight + heavy gradient" visual language to a **Liquid Glass** aesthetic that retains Deck Hearth's fireplace warmth as accent, gradient, and motion — not as panel fill. Each lettered section below maps to a dedicated sub-convoy that an architect will refine and an implementer (or multitask fleet of implementers) will ship. This convoy is **planning-only**. No source files are touched here. Each sub-convoy below is a separate, gated, visual-diff-bounded PR (or multitask group of PRs). --- ## 1. Vision The product is **Deck Hearth** — a fireplace. Today the UI renders a fireplace by making every panel look like wood. That is *thematic but dated*: it gives every surface the same heavy mass, fights the actual content (cards, decks, lists), and forces motion / glow to do all the "modern" work alone. The new direction is the opposite read of "fireplace": - The **room** is glass — softly translucent, with the page (the actual hearth: cards, deck lists, scan frames) glowing through. - The **fire** is the accent — ember orange / flame / gold reads as *light cast onto* the glass, not *paint applied to* the glass. - The **warmth** comes from gradients and slow motion, not from beige panel fills. Concretely the visual contract is: | Layer | Before | After | | --- | --- | --- | | Panel fill | Opaque `--bg-secondary` / `--bg-tertiary` warm cream | `rgba(bg-secondary, 0.55–0.75)` + `backdrop-filter: blur(20–32px) saturate(140%)` | | Border | Solid `--border` wood line | Hairline `1px` inner ring + outer hairline; light theme uses warm-white inner highlight (`rgba(255,255,255,0.55)`) | | Shadow | Single-axis drop shadow | Stacked elevation: ambient soft outer + accent-tinted rim ("ember rim" on hover/focus) | | Modal backdrop | Dim overlay only | Blur-and-dim: `backdrop-filter: blur(18px)` + `rgba(bg-primary, 0.4)`; ember vignette toward the center to retain hearth warmth | | Buttons (primary) | Solid flame gradient pill | Glass pill with ember rim-light gradient on top edge + animated micro-glow on hover; matches Apple-style "Liquid Glass" tinted material | | Cards (TCG cards) | Heavy ember box shadow + opaque container | Container goes glass; rarity glows REMAIN but tightened (one-shadow stack, reduced bloom) so they read against glass | | Logo / brand | DH monogram in solid gradient pill | Same monogram, glass pill, inner ember gradient ring | The deliverable is a **reusable token + primitive kit**, not 50 one-off class names. --- ## 2. Why now Three things make this the right moment: 1. **Brand is settled.** `pick-a-name` (PR #21, 2026-05-24) ratified Deck Hearth as the canonical name. No more rebranding noise mid-design. 2. **Test infrastructure is in place.** `Screenshot diff` workflow (`visual-diff.yml`) fires on every PR touching `pages/**` / `components/**` / `styles/**` / `tailwind.config.js` / `postcss.config.js`, and `seed-visual-baselines-on-linux` (PR #58, 2026-06-02) shipped the first Linux baseline. Smoke (3/3, 2.9s) defends auth + page-render on every PR. Vitest (21/21) defends Layout's logged-out branch. A design-system redesign without these gates would be reckless; with them, it's tractable. 3. **The component fleet is small enough to enumerate.** 42 components in `components/`, ~15 modals, 1 Layout, 1 MobileNavigation. The full design migration is bounded — not a year-long redesign treadmill. This convoy does **NOT** ship before the eight P0 ship-blockers (already **8/8 RESOLVED**, 2026-05-24) and **does** ship in parallel with the queued P2/P3 polish convoys listed in `.convoys/ship-readiness.md` § Queued convoys. It does not block launch — but it dramatically raises the launch-day quality bar. --- ## 3. Hard scoping rules - **No new third-party CSS framework.** Tailwind + CSS variables stays. Liquid Glass is implemented as new tokens + a small primitive set. - **No TypeScript adoption.** Files stay `.js`. See `AGENTS.md` Gotcha #9. - **Theme tokens, not hex.** Every new color reads from a CSS variable. The hex sweep is a dedicated sub-convoy (#8 below). - **Both themes ship together.** Light and dark each get their own glass recipe — the light theme uses a warm-white inner highlight, dark uses a black-glass with ember-rim. Never ship one theme without the other. - **Brand warmth survives.** Ember (`#d84315` RGB `216,67,21`) and Flame (`#ff6f00`) remain the canonical accents. Gold (`#ffab40`) remains for rarity / celebration. No new accent hues without operator ratification. - **Reduced-motion is mandatory.** Every animation introduced honours `prefers-reduced-motion`. Existing `fire-glow-bg` and `ember-float` animations get audited under #7. - **Accessibility is non-negotiable.** Glass + warm-cream backgrounds often fail AA. Every token comes with a documented contrast measurement vs `--text-primary` AND `--text-secondary` in both themes. - **Browser support.** `backdrop-filter` is supported in all evergreen browsers (Safari 18+, Chrome 76+, Firefox 103+). Fallback in `@supports not (backdrop-filter: blur(20px)) { ... }` per the existing pattern in `styles/globals.css` lines 815–819 — use a solid-with-alpha fallback, never a hard-opaque revert. - **Performance budget.** Stacked `backdrop-filter` on long scroll lists is expensive. Card grids may NOT use glass on every card item — glass is for the *container*, not every card. The per-card surface stays cheap (solid + cheap shadow). The card detail VIEW gets glass. - **No flag rollout needed.** The repo has no feature-flag wrapper. Migration is incremental by sub-convoy; visual diff catches breakage per PR; a bad sub-convoy can be reverted independently. - **One sub-convoy per PR (or per multitask group).** Do not bundle primitives + layout + cards into a single PR — visual diff becomes unreadable and rollback impossible. --- ## 4. Dependency graph ``` ┌────────────────────────────────────────┐ │ 1. liquid-glass-design-tokens │ │ (CSS vars + docs; no UI change) │ └──────────────────┬─────────────────────┘ │ ┌────────────────────┼────────────────────┐ │ │ │ ▼ ▼ ▼ ┌────────────────────┐ ┌────────────────────┐ ┌──────────────────────┐ │ 2. modal-and- │ │ 3. form-primitives │ │ 7. motion-system │ │ surface- │ │