Closer/UI_UPGRADE.md

Closer UI Upgrade

This document is the focused visual upgrade plan for making Closer feel more beautiful, polished, and emotionally specific without turning it into a decorative wellness app.

The direction: keep the app calm and private, but make important relationship moments feel more intentional.

Upgrade Priorities

1. Complete the Daily Question Visual Arc

The Home screen should visually move through the daily question ritual.

• UNANSWERED: use illustration_tonight_partner_prompt
• One partner answered: keep the answer-card ritual artwork
• BOTH_ANSWERED: use the new reveal-ready artwork
• REVEALED: use a calmer completed-state treatment, not the same urgency as reveal-ready

Why this matters:

The daily question is the core habit. The visuals should make the state obvious before the user reads the copy.

2. Add Subtle Motion to High-Emotion States

Use small, restrained motion only where it adds emotional clarity.

Best targets:

• A soft glow or pulse on the reveal-ready Home card
• Gentle fade/scale when a daily state changes
• A quiet success transition after both answers are revealed

Avoid:

• Constant decorative animation
• Bouncy motion
• Motion on dense settings, security, or history screens

Why this matters:

The app should feel alive, but still intimate and trustworthy.

3. Polish the Home Screen Hierarchy

The Home screen should make the next shared action unmistakable.

Improve:

• Give the primary card stronger visual priority than secondary cards
• Reduce competing surfaces around the daily question
• Make the primary CTA feel more tactile
• Keep secondary actions quieter and easier to scan

Why this matters:

Home should answer one question immediately: what should we do together next?

4. Make Light Theme Feel Equally Designed

Dark mode currently carries more of the mood. Light mode should feel intentional too.

Improve:

• Softer warm backgrounds
• Better contrast between cards and page surfaces
• Less clinical white space
• Light-mode versions of major illustrations where needed

Why this matters:

The product should feel premium in both themes, not like dark mode is the real design and light mode is the fallback.

5. Create a More Satisfying Revealed State

After both partners reveal answers, the app should not just feel "done." It should invite the next tiny moment of connection.

Improve:

• Add a softer post-reveal visual state
• Surface the follow-up prompt more beautifully
• Make saved reflections feel like a shared memory, not a log entry

Why this matters:

The reveal is not the end of the interaction. It is the beginning of the conversation.

6. Keep the Illustration System Strict

Illustrations should stay purposeful and surface-specific.

Rules:

• Do not reuse the same couple image everywhere
• Do not add characters to every screen
• Do not add large illustrations to privacy, security, account, or settings screens
• Use artwork for emotional transitions, empty states, and onboarding moments
• Keep dense task screens focused on content

Why this matters:

The app becomes more beautiful by being more intentional, not by adding more decoration.

First Implementation Batch

Start with the smallest set of upgrades that visibly improves the app.

1. Wire the daily question artwork states on Home.
2. Add the reveal-ready illustration for BOTH_ANSWERED.
3. Add a restrained visual emphasis to the reveal-ready CTA.
4. Review Home in dark and light mode.
5. Capture updated README screenshots after the states are stable.

Quality Bar

An upgrade is successful if:

• The screen feels calmer and more premium.
• The next action is clearer.
• The emotional state is obvious before reading every word.
• The app still feels private and serious.
• No screen becomes busier just because new artwork exists.