ClearMorning

Global English MVP

This page turns the concept into a handoff spec for design and engineering.

It captures the shared structure behind Calm Recovery and Warm Companion, defines reusable tokens, documents every MVP component state, and spells out how the product should behave across iOS and Android.

Review user flows Inspect component states

Reduce or QuitPrivacy-firstMorning Reward loop

Home

Tonight is protected

Tonight Plan

2 drinks max

Leave by 10:30 PM. Switch after drink 1.

Morning Reward3 calm mornings

Saved this week$38

Today's focus

Tap SOS in under 10 seconds if the social pressure ramps up.

HomePlanLogInsightsProfile

Handoff bundle

Landing and conversion narrative
Prototype routes for every MVP screen
Design tokens, states, and platform rules
Validation checklist for UX review

North-star rules

Three principles keep the product coherent

These rules hold across both brand directions so tone can vary without changing core behavior.

Reduce and quit share one product shell

The user never has to accept a heavy identity label to start. The structure supports both lower-risk reduction and full quit intentions from the first screen.

Do not force self-labeling before value is felt.

Tonight comes before history

The interface always prioritizes the next best action above the fold. Users should feel supported in the next ten seconds, not audited about last week.

Home, Plan, and SOS keep primary actions inside the lower thumb zone.

Morning Reward replaces streak shame

Retention is built around practical wins like calmer mornings, less anxiety, and money saved, not perfection-based language.

Reward copy references life return, not purity or guilt.

Information architecture

The app stays compact, private, and easy to navigate

The navigation model is intentionally tight so core tasks remain obvious in moments of stress.

Primary navigation

HomePlanLogInsightsProfile

SOS remains a global action, not a tab, so it never competes with planning and review surfaces.

Surface map

Entry

Splash, Onboarding, Goal Setup

Establish emotional safety, pick reduce or quit mode, collect risk context, and generate a first same-day plan.

Daily shell

Home, Plan, Log, Insights, Profile

Support the full weekly loop through planning, logging, reflection, and privacy controls without a public feed.

Global interrupt

SOS floating action

Available from anywhere in under two taps with timer-led grounding and a calm outcome split.

Support layers

Morning Check-in, Paywall, Settings & Privacy

Reinforce value after use, then introduce monetization and trust controls only after the product has helped.

Prototype routes

SplashThe first screen leads with steadier nights and clearer mornings, not addiction identity. It offers an emotionally safe way into the product.OnboardingThe onboarding flow uses fast questions, context tags, and trust copy so users can complete setup in minutes instead of dropping inside a long assessment.Goal setupThe screen translates broad intent into a concrete weekly shape: reduce or quit mode, alcohol-free nights, and the kind of support the user wants.HomeThe dashboard is not a guilt wall. It leads with Tonight Plan, Morning Reward, and the under-10-second SOS path.PlanThe plan builder uses short inputs, chips, and prebuilt rituals so users can prepare for a real night out in under a minute.LogLogging should be fast during a social event and equally calm after a slip. The design keeps entry light and recovery-oriented.SOSThis screen is intentionally quiet. It slows the moment down with a timer, grounding steps, and a simple outcome choice.MorningThe next-day flow cashes out emotional and practical wins, then locks them into a reusable pattern without forcing a long journal.InsightsInstead of score-only analytics, the insight layer frames risk windows, successful rituals, and the why behind improving nights.PrivacyPrivacy is not buried in a generic settings stack. The screen makes trust visible with neutral notifications, app lock, and data controls.PaywallSubscription messaging is delayed until the user has already earned Morning Reward value and can understand what the premium layer compounds.

Core user flows

Each major moment is designed around speed, trust, and recovery

The screens are meant to feel usable in real life, not only in an ideal quiet environment.

First-time setup

Complete in under 3 minutes

Brand promise leads with clearer mornings, not identity labels.
Quick questions capture risk moments and emotional context.
Goal Setup creates a reduce or quit plan for the first week.
Home opens with a same-day Tonight Plan and visible Morning Reward framing.

Before the social event

Tonight Plan saved in under 60 seconds

Home points the user to Tonight Plan before the event starts.
Plan Builder sets drink cap, leave-by time, and switch ritual.
Reminder logic prepares a high-risk nudge before the event window.
Drink Log stays available for one-handed updates during the night.

At the edge of a slip

Reach SOS in under 10 seconds

User taps the global SOS action from any high-pressure moment.
A three-minute timer interrupts momentum without panic or shame.
StepItem cards guide water, movement, and support actions.
Outcome returns to Home or Log without emotional reset language.

The next morning

Morning check-in in 4 steps or fewer

Notification opens directly into Morning Reward instead of a guilt wall.
The screen shows money, anxiety, and time recovered.
A short reflection captures what helped most without a long journal.
Insights translate that win into a reusable pattern for the next plan.

Value-led upgrade

Paywall shown after proof of value

Free path remains respectful and usable on its own.
After three clear mornings or the first useful weekly summary, premium is introduced.
The paywall frames subscription as smarter guidance, not feature hoarding.
Privacy remains visible before and after the upgrade ask.

Design tokens

Tokens provide one shared language for web, mobile, and Figma

These values keep the prototype consistent now and reduce redesign work later.

Color

Warm recovery palette: calm at night, light at morning.

Ink

Primary CTAs, headings, strong text

#102A43

Deep Dusk

Night surfaces, active tabs, charts

#1F3A5F

Dawn Gold

SOS accent, rewards, premium moments

#F6C177

Sage Calm

Success states, completion, progress

#7FB69A

Mist

Page background and soft fills

#F7F4EE

Coral Warning

Error states with icon + copy

#E97A6A

Typography

Expressive headlines with steady UI copy.

Display

Hero, section titles, reward headlines

Fraunces 600 / 56

Body XL

Leads and landing intros

Manrope 600 / 20

Body

Primary app copy and descriptive text

Manrope 500 / 16

Label

Buttons, chips, controls

Manrope 700 / 14

Metric

Savings, counts, progress

Manrope 700 / 28

CJK fallback

Reserved for later localization

Noto Sans/Serif SC

Spacing and form

Built for one-handed reach and airy cards.

Spacing scale

Single source for stacks and sheets

4 / 8 / 12 / 16 / 24 / 32

Radius

Buttons, cards, panels, device shell

16 / 22 / 28 / 42

Touch target

All primary and risk actions

44 x 44 pt min

Sheet spacing

Bottom-sheet content rhythm

16 top / 24 side / 24 bottom

Motion and iconography

Short, quiet motion that supports calm use late at night.

Duration

Buttons, chips, and cards

140–180 ms

Easing

Soft, low-surprise transitions

ease-out

Haptics

Reserved for meaningful moments

SOS + save only

Icons

Warnings always pair icon + text

20 px outline base

Component state matrix

Every MVP component has explicit behavior across states and platforms

This prevents re-deciding core interactions during engineering handoff.

PrimaryButton

Main save or continue action.

default: Ink gradient fill, white label, soft elevation.
pressed: Shadow reduces and lifts 1 px for tactile response.
disabled: 42% opacity, no elevation, pointer disabled.
error: Paired with Coral helper text when submission fails.
success: Label swaps to Saved with Sage check affordance.

iOS

Use slightly larger radius and subtle haptic on success.

Android

Use firmer elevation and native ripple on press.

SecondaryButton

Supportive navigation or fallback choice.

default: Cloud background, line border, Ink text.
pressed: Border deepens and background warms slightly.
disabled: Border and text both reduce to 40% contrast.
error: Only used with inline guidance when a back path is unsafe.
success: May convert to saved-state outline in settings.

iOS

Keep card-like feel with lower shadow and crisp border.

Android

Add more visible press fill so feedback is not too subtle.

SOSButton

Global high-priority interruption control.

default: Dawn Gold gradient, warm shadow, bold dark label.
pressed: Quick haptic and lower-position feedback within 140 ms.
disabled: Never hidden in normal use; only muted during loading.
error: Falls back to text-only help state if support services fail.
success: After the timer, it transitions to a calmer success label.

iOS

Center it in the lower thumb zone with light glass separation.

Android

Respect safe-area nav and system gesture space.

PlanCard

Holds Tonight Plan details and summary.

default: Ivory card with strong hierarchy and action slot.
pressed: Optional lift on tappable plan summaries.
disabled: Read-only review state with reduced emphasis.
error: Top border switches to Coral when required fields are missing.
success: Sage badge confirms the plan is locked for tonight.

iOS

Use softer blur-backed cards on the main dashboard.

Android

Reduce blur reliance and use stronger elevation contrast.

MetricCard

Shows Morning Reward returns and weekly metrics.

default: High-contrast number block with quiet supporting text.
pressed: Expands into deeper insight or detail drawer.
disabled: Premium-locked metrics appear muted but still readable.
error: Missing data uses a calm empty-state copy, not broken UI.
success: Improving trends get Dawn Gold or Sage emphasis.

iOS

Animate number transitions with soft count change only.

Android

Favor quick opacity and position changes over dense animation.

ProgressRing

Represents time held or recovery progress.

default: Ink track with Dawn Gold active segment.
pressed: Optional pause/ripple when user touches the ring.
disabled: Muted track when a timed flow has not started.
error: Coral segment marks a risk spike or interrupted loop.
success: Sage finish pulse marks completion without celebration blast.

iOS

Use subtle blur and anti-aliased stroke edges.

Android

Keep strokes heavier so the ring remains legible on more displays.

Chip

Fast option selection for triggers and modes.

default: Mist fill and Ink label.
pressed: Background deepens and label weight holds.
disabled: Muted fill with reduced label contrast.
error: Coral outline signals a conflicting or invalid choice.
success: Active chip can shift to Dawn Gold or Sage, depending on intent.

iOS

Rounder pills with more white space.

Android

Slightly denser horizontal padding for balance with ripple.

SegmentedControl

Switches reduce vs quit or similar paired modes.

default: Neutral shell with a single active segment.
pressed: Active thumb moves with fast eased transition.
disabled: Entire control fades while preserving selected state.
error: Helper note appears below if no choice is made where required.
success: Persisted selection receives a compact saved note.

iOS

Feels close to native segmented controls with softer inset depth.

Android

Needs clearer selected fill to match platform expectations.

Sheet

Bottom sheet for plan and premium details.

default: Large-radius panel with drag handle and dimmed backdrop.
pressed: Handle responds with a short vertical drag cue.
disabled: No manual dismiss during blocking confirmation states.
error: Error content pins at top with icon and plain-language copy.
success: Confirmation sheet uses a Sage accent strip instead of a toast burst.

iOS

Prefer sheet-native feeling with layered blur and spring restraint.

Android

Support system back close behavior and firmer surface shadow.

StepItem

Small action instructions inside SOS and onboarding.

default: White card with status dot and concise copy.
pressed: Card tint changes slightly when marked complete.
disabled: Skipped steps remain visible but visually softened.
error: Coral dot and helper line flag unresolved blockers.
success: Sage dot or check confirms the step is complete.

iOS

Prioritize light haptic feedback when a step is marked done.

Android

Use ripple and stronger tint change instead of haptic-only feedback.

InlineAlert

Short trust, warning, or guidance message.

default: Neutral or Sage-tinted info block.
pressed: Not interactive by default; hover/press stays minimal.
disabled: Hidden rather than dimmed if no message is needed.
error: Coral tint with icon and direct but non-shaming copy.
success: Sage tint for safe confirms and completed changes.

iOS

Spacing stays generous so alerts do not feel legalistic.

Android

Use clearer icon contrast and stronger outline when high priority.

InputRow

Lightweight entry field for short prompts and reflections.

default: Ivory field, subtle line border, muted placeholder.
pressed: Focus ring and Ink border appear on tap.
disabled: Lower-contrast surface with no cursor affordance.
error: Coral border, icon, and helper line below.
success: Sage border with compact saved or accepted state.

iOS

Use more bottom-sheet entry patterns and keyboard-safe spacing.

Android

Ensure keyboard push behavior never covers primary actions.

Platform and trust rules

Interaction behavior stays steady across devices and emotional contexts

The product has to work late at night, under stress, and in social settings without becoming noisy.

iOS behavior

Prefer larger radii, bottom sheets, and subtle glass layering.
Use haptics sparingly for save, SOS, and completion moments.
Keep the lower thumb zone clean so primary actions are always reachable.

Android behavior

Use clearer elevation and ripple feedback where blur is less dependable.
Respect system back behavior for sheets and deep prototype routes.
Protect primary CTA visibility when the keyboard appears.

Trust and content

Avoid shame, command language, and diagnosis-like phrasing across every screen.
State clearly that the app is not a substitute for emergency support or severe withdrawal care.
Keep Privacy visible as its own surface, not buried under generic settings.
Treat the free path with dignity so premium feels additive, not coercive.

Review kit

Use these screens and checks for design review sessions

This small set is enough to test tone, trust, and week-one retention without opening every route.

Splash

ClearMorning

Privacy-first alcohol recovery

Steadier nights. Clearer mornings.

Reduce or quit drinking with a calm plan, faster SOS support, and visible morning returns.

Why it feels safe

No public feed. Neutral notifications. A dedicated Privacy screen before any subscription ask.

Splash

Entry tone and safety promise

Open screen route

Home

Tonight is protected

Tonight Plan

2 drinks max

Leave by 10:30 PM. Switch after drink 1.

Morning Reward3 calm mornings

Saved this week$38

Today's focus

Tap SOS in under 10 seconds if the social pressure ramps up.

HomePlanLogInsightsProfile

Home

Primary recovery dashboard

Open screen route

SOS

Stay with this for 3 minutes

03:00Hold, then decide again

Drink water first

Give your body a pause before you decide again.

Leave the table for two minutes

Interrupt the momentum, not your whole night.

SOS

Three-minute interruption flow

Open screen route

Check-in

Morning Reward

You protected

1 clearer morning

Less anxiety. Less spending. More of your day still intact.

Saved$18

Anxiety2 / 5

What helped most?Leaving on time

HomePlanLogInsightsProfile

Morning

Retention loop and reward

Open screen route

Validation

The spec includes explicit gates for usability and accessibility

These are the checks to run before this moves from concept review into development sprint execution.

New users can complete onboarding and generate a first Tonight Plan in under 3 minutes.
Users can reach SOS from Home in under 10 seconds with one thumb.
Drink logging stays possible within 20 seconds during a live social event.
Morning check-in takes no more than 4 steps and never starts with shame language.
Social pressure, hangxiety, and restart-type users each see a relevant first task on Home.
Reduce-mode and quit-mode copy both feel respected and safe.
Calm Recovery and Warm Companion both pass trust and willingness-to-try review.
Touch targets remain at or above 44 x 44 pt and text contrast meets WCAG AA.
Risk states always use icon plus copy, not color alone.
Late-night surfaces avoid harsh white flash or high-saturation warnings.