BetterMe Well-Being Coach

Colors

• #0a0a0aBackground Black · background
• #1b1918Card Dark · unselected_option_background
• #ffffffText White · title · body · labels
• #d3c8beButton Beige · primary_button_background

Type

• titlesans-serif · 28px · bold · #ffffff
• subtitlesans-serif · 16px · normal · #ffffff
• option_labelsans-serif · 16px · medium · #ffffff
• button_textsans-serif · 16px · bold · #0a0a0a

Elements

• Back Arrow · icon_button

  Top left corner, aligned horizontally with top navigation · White vector line

• Progress Indicator · progress_bar

  Top center, beneath header · Segmented line with active and inactive states

• Menu Icon · icon_button

  Top right corner · Three horizontal white lines

• Belly Option · card_checkbox

  Left aligned, stacked vertically under question text · Dark rounded rectangle with border outline and square checkbox on right

• Pecs Option · card_checkbox

  Left aligned, stacked vertically below Belly · Dark rounded rectangle with square checkbox on right

• Arms Option · card_checkbox

  Left aligned, stacked vertically below Pecs · Dark rounded rectangle with square checkbox on right

• Legs Option · card_checkbox

  Left aligned, stacked vertically below Arms · Dark rounded rectangle with square checkbox on right

• Model Image · image

  Right side of screen, spanning vertically from below subtitle to near bottom · Photo of shirtless male model against dark background

• Next Step Button · button

  Bottom center, full-width pill button with padding · Solid beige fill with dark text

Layout

Top navigation header followed by centered title, instruction subtitle, two-column content area with selectable vertical list on left and illustration on right, fixed bottom CTA button.

Notes

Font family estimated as general sans-serif due to lack of distinct platform styling metadata.