BetterMe Well-Being Coach

Colors

• #121110Background Black · screen background
• #FFFFFFText White · primary titles · option labels
• #EBE3D8Selected Card Cream · selected option card background · check mark fill
• #25211DUnselected Card Dark Gray · unselected option card background

Type

• titlesans-serif · 32px · bold · #FFFFFF
• option labelsans-serif · 18px · medium · #FFFFFF

Elements

• Top Navigation · header

  Fixed at the top with back arrow, app branding, and hamburger menu. · White icons and text on dark background.

• Progress Indicator · progress bar

  Centered below the top navigation. · Segmented line indicators with active first segment.

• Option Card 2 · selectable card

  Vertical list of cards on the left, this one is selected. · Cream fill with dark text and a checkmark circle indicator.

• Option Card 1, 3, 4 · selectable card

  Vertical list of cards on the left. · Dark gray fill with white text and empty circular radio button.

• Workout Illustration · image

  Positioned on the right side of the screen, partially overlapping background. · Photo of a male model working out.

Layout

Vertical hierarchy consisting of a top bar, progress bar, question title, and a vertical list of 4 selectable options alongside a full-body model graphic on the right.

Notes

The screen captures an onboarding fitness survey question.