BetterMe Well-Being Coach

Colors

• #000000Pure Black Background · background
• #f5efe6Cream Selected Card Fill · card_fill_active
• #1c1917Dark Card Fill · card_fill_inactive
• #ffffffWhite Text · title_text · inactive_text
• #111111Black Active Text · active_text

Type

• Question Titlesans-serif · 24px · bold · #ffffff
• Option Label Activesans-serif · 16px · normal · #111111
• Option Label Inactivesans-serif · 16px · normal · #ffffff

Elements

• Goal Option 1 · selection card

  Top list item, active/selected state · Cream background with checkmark radio icon

• Goal Option 2 · selection card

  Second list item, inactive state · Dark card with empty radio circle

• Goal Option 3 · selection card

  Third list item, inactive state · Dark card with empty radio circle

• Goal Option 4 · selection card

  Fourth list item, inactive state · Dark card with empty radio circle

• Model Figure · image

  Right side of the screen, floating next to option list · Full body photo of a shirtless male model in shorts against dark background

Layout

Top navigation bar, question title, left column with four goal selection options (first one selected), and a model photo on the right.

Notes

Goal selection onboarding screen with split-screen illustration.