BetterMe Well-Being Coach

Colors

• #0a0703Background Black · background
• #e8dfd3Button Beige · button background
• #ffffffText White · titles
• #b3b3b3Text Gray · body text
• #0a0703Text Dark · button text

Type

• TitleSF Pro Display · 28px · bold · #ffffff
• BodySF Pro Text · 16px · regular · #b3b3b3
• Button TextSF Pro Text · 18px · bold · #0a0703

Elements

• Workout Image Card · card

  Centered horizontally below text, occupying the middle section. · Rounded rectangle card containing a photo of a male model doing a push-up on a mat.

• CONTINUE Button · button

  Fixed at the bottom of the screen, spanning most of the width. · Light beige solid fill with dark bold uppercase text.

Layout

Top navigation bar, multi-line title and body text blocks, centered image card, and a primary call-to-action button anchored at the bottom.

Notes

Result screen displaying body type diagnosis and a continue button.