BetterMe Well-Being Coach

Colors

• #121110Background Black · screen background
• #FFFFFFText White · title text
• #CCCCCCText Muted · body text
• #EBE3D8Button Cream · CTA button background
• #000000Button Text Black · CTA button text

Type

• titlesans-serif · 32px · bold · #FFFFFF
• bodysans-serif · 16px · regular · #CCCCCC
• buttonsans-serif · 18px · bold · #000000

Elements

• Top Navigation · header

  Fixed at the top with back arrow, app branding, and hamburger menu. · White icons and text on dark background.

• Model Image Card · container

  Centered horizontally in the middle of the screen. · Rounded rectangle container holding a fitness photo.

• Continue Button · button

  Fixed near the bottom of the screen, full width with margins. · Cream colored solid rounded button with black bold text.

Layout

Vertical stack layout consisting of top navigation, title text, two body paragraphs, a centered image container, and a bottom primary action button.

Notes

Information promotional screen during onboarding.