BetterMe Well-Being Coach

Colors

• #121212Background Black · screen background
• #FFFFFFText White · primary titles · body text
• #1E1E1ECard Dark Grey · option card background
• #A0A0A0Text Muted Grey · subtitle text

Type

• TitleSF Pro Display · 32px · bold · #FFFFFF
• SubtitleSF Pro Text · 18px · normal · #A0A0A0
• Button LabelSF Pro Text · 16px · semibold · #FFFFFF

Elements

• Back Button · icon button

  top-left, fixed · white arrow icon

• Menu Button · icon button

  top-right, fixed · three horizontal white lines

• Progress Indicator · segmented bar

  top center, below header · dashed horizontal progress bar

• Hero Image Container · image container

  center, below subtitle · rounded rectangular container with male fitness model photo

• Option Card 1 · selectable card

  bottom grid, row 1 column 1 · dark grey fill with white text and circular radio button

• Option Card 2 · selectable card

  bottom grid, row 1 column 2 · dark grey fill with white text and circular radio button

• Option Card 3 · selectable card

  bottom grid, row 2 column 1 · dark grey fill with white text and circular radio button

• Option Card 4 · selectable card

  bottom grid, row 2 column 2 · dark grey fill with white text and circular radio button

Layout

Vertical stack with top navigation, centered title, centered image, and a 2x2 grid of selectable options at the bottom.

Notes

Standard questionnaire screen layout.