BetterMe Well-Being Coach

Colors

• #000000Pure Black Background · background
• #1c1917Dark Gray Card Fill · card_fill
• #ffffffWhite Text · title_text · body_text
• #333333Border Gray · border

Type

• Question Titlesans-serif · 24px · bold · #ffffff
• Option Labelsans-serif · 16px · normal · #ffffff

Elements

• Back Button · icon button

  Top left corner · White arrow icon

• Menu Button · icon button

  Top right corner · White hamburger menu icon

• Progress Bar · progress indicator

  Top center, below header · Segmented line with active first segment

• Option 18-29 · selection card

  First vertical option list item · Dark rounded rectangle with empty radio circle on the right

• Option 30-39 · selection card

  Second vertical option list item · Dark rounded rectangle with empty radio circle on the right

• Option 40-49 · selection card

  Third vertical option list item · Dark rounded rectangle with empty radio circle on the right

• Option 50+ · selection card

  Fourth vertical option list item · Dark rounded rectangle with empty radio circle on the right

Layout

Top navigation with back button, progress indicator, and menu. Centered question title followed by a vertical stack of four selection cards.

Notes

Age selection question screen in onboarding flow.