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 (Less than a year ago) · list item card

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

• Option 2 (1 to 2 years ago) · selected list item card

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

• Option 3 (More than 3 years ago) · list item card

  Stacked vertically, third from top on the left side. · Dark rounded rectangle with radio circle.

• Option 4 (Never) · list item card

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

• Model Illustration · image

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

Layout

Top navigation bar, centered multi-line question at the top, vertical stack of 4 options on the left, and a full-body model photo on the right.

Notes

Asymmetric layout with interactive cards stacked on the left and illustration on the right.