BetterMe Well-Being Coach

Colors

• #0a0703Background Black · background
• #1a1512Card Dark · card background
• #e8dfd3Card Selected · selected card background
• #ffffffText White · titles

Type

• TitleSF Pro Display · 28px · bold · #ffffff
• List OptionSF Pro Text · 18px · semibold · #1a1512

Elements

• Option 1 · list item card

  Stacked vertically on the left side. · Dark rounded rectangle with unselected radio circle.

• Option 2 · selected list item card

  Stacked vertically, second from top on the left side. · Light beige filled rounded rectangle with checkmark icon.

• Option 3 · list item card

  Stacked vertically at the bottom on the left side. · Dark rounded rectangle with unselected radio circle.

• Model Illustration · image

  Positioned on the right side of the screen. · Full-body image of a male fitness model stretching.

Layout

Top navigation bar, centered title, three stacked vertical option cards on the left, and a model photo on the right.

Notes

Similar layout structure to screen 3.