BetterMe Well-Being Coach

Colors

• #121212Background Black · background
• #1E1B18Card Dark Grey · option card background
• #ffffffWhite · title text · option text · icons
• #8C857EMuted Grey · subtitle text · card icons
• #EAE0D5Beige · bottom button background
• #121212Dark Text · bottom button text

Type

• TitleSF Pro Display · 30px · bold · #ffffff
• SubtitleSF Pro Text · 16px · regular · #8C857E
• List Option TextSF Pro Text · 18px · medium · #ffffff
• ButtonSF Pro Text · 18px · bold · #121212

Elements

• Option Cards List · list

  Vertical stack of 4+ selection cards below subtitle, centered. · Dark grey rounded rectangular cards containing a left-aligned icon, option text, and right-aligned empty checkbox outline.

• Next Step Button · button

  Anchored at the bottom of the screen. · Solid beige pill button with dark bold text.

Layout

Vertical layout with centered header, instruction subtitle, scrollable option cards list, and pinned bottom action button.

Notes

Checkboxes on the right indicate multi-select options.