BetterMe Well-Being Coach

Colors

• #121110Background Black · screen background
• #FFFFFFText White · title text · option labels
• #25211DOption Card Dark Gray · option card background

Type

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

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.

• Option Cards · selectable list

  Vertical stack of 4 options with circular radio buttons on the right. · Dark gray rounded cards with white text.

Layout

Vertical layout with question at top and 4 selectable options stacked below.

Notes

Onboarding question about push-ups capacity.