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.