BetterMe Well-Being Coach

Colors

• #121212Background Black · background
• #ffffffWhite · title text · primary body text · icons
• #EAE0D5Beige · cta button background
• #121212Button Text Dark · cta button text

Type

• TitleSF Pro Display · 36px · bold · #ffffff
• BodySF Pro Text · 20px · regular · #ffffff
• ButtonSF Pro Text · 18px · bold · #121212

Elements

• Top Bar · header

  Top of screen with back arrow, logo, and menu. · Solid dark background, white icons.

• Preview Illustration · image

  Centered container displaying multiple phone mockups with fitness imagery. · Dark rounded container framing overlapping phone screens.

• Continue Button · button

  Fixed near the bottom, centered horizontally with generous padding. · Solid beige pill-shaped button with dark bold text.

Layout

Vertical stack layout consisting of top navigation, headline, descriptive copy, centered mockups illustration, and a bottom primary action button.

Notes

Typography is estimated as San Francisco style sans-serif typical of iOS web views.