BetterMe Well-Being Coach

Colors

• #121212Background Black · background
• #EAE0D5Selected Card Beige · selected card background
• #1E1B18Card Dark Grey · unselected card background
• #ffffffWhite · title text · unselected labels
• #8C857EMuted Grey · subtitle text
• #121212Selected Dark Text · selected label

Type

• TitleSF Pro Display · 30px · bold · #ffffff
• SubtitleSF Pro Text · 16px · regular · #8C857E
• Selected LabelSF Pro Text · 18px · medium · #121212

Elements

• Goal Selection Grid · grid

  2x2 grid of goal cards below header and subtitle. · Top-right card is selected in beige with a checkmark; others are dark grey with radio outlines.

Layout

Vertical arrangement of title, subtitle, and a 2x2 interactive grid of goal options.

Notes

Athletic goal card is selected with a beige fill and checkmark.