BetterMe Well-Being Coach

Colors

• #121110Background Black · screen background
• #FFFFFFText White · title text · unselected option labels
• #EBE3D8Selected Card Cream · selected option background
• #25211DUnselected Card Dark Gray · unselected option background

Type

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

Elements

• Top Navigation · header

  Fixed at the top. · White icons and text on dark background.

• Progress Indicator · progress bar

  Centered below the top navigation. · Segmented line indicators.

• Selected Option Card · selectable card

  Second card in the vertical list on the left. · Cream fill with dark text and a checkmark circle.

• Unselected Option Cards · selectable card

  First, third, and fourth cards in the vertical list on the left. · Dark gray fill with white text.

• Squat Illustration · image

  Positioned on the right side of the screen. · Photo of a male model performing a squat.

Layout

Vertical list of options on the left with a fitness model illustration on the right.

Notes

Onboarding survey question about squats capacity.