BetterMe Well-Being Coach

Colors

• #121212Background Black · background
• #EAE0D5Selected Card Beige · selected card background
• #1E1B18Card Dark Grey · unselected card background
• #121212Selected Dark Text · selected option text
• #ffffffWhite · title text · unselected option text

Type

• TitleSF Pro Display · 30px · bold · #ffffff
• Selected Option TextSF Pro Text · 18px · medium · #121212

Elements

• Selected Option Card · card

  Third item in the vertical option list, highlighted. · Solid beige filled card with dark text and a checked checkbox on the right.

• Next Step Button · button

  Pinned at bottom. · Beige pill button.

Layout

Same as Screen 2, with the third card now in a selected (active) state.

Notes

Demonstrates interactive state change where the third card background changes to beige and checkbox becomes checked.