BetterMe Well-Being Coach

Colors

• #fcfbf7Cream Background · background
• #2c221eDark Brown Card · card_fill · button_fill
• #111111Black Text · title_text
• #666666Gray Subtitle · body_text
• #ffffffWhite Button Text · text

Type

• Screen Titlesans-serif · 28px · bold · #111111
• Subtitlesans-serif · 16px · normal · #666666
• Card Button Textsans-serif · 18px · bold · #ffffff
• Footer Textsans-serif · 13px · normal · #111111

Elements

• Male Option Card · card

  Left column, rounded card containing image and button bar · Cream background with dark brown bottom bar and arrow icon

• Female Option Card · card

  Right column, rounded card containing image and button bar · Cream background with dark brown bottom bar and arrow icon

• Help Floating Button · button

  Fixed at bottom right corner · Circular dark brown button with question mark icon

Layout

Top navigation bar with menu, title and subtitle centered, two side-by-side selection cards in the middle, and footer links with a help button at the bottom.

Notes

Gender selection onboarding screen.