BetterMe Well-Being Coach

Colors

• #121110Background Black · screen background
• #FFFFFFText White · title text · unselected option labels
• #EBE3D8Selected Card Cream · selected option background
• #000000Selected Text Black · selected option label
• #25211DUnselected Card Dark Gray · unselected option background

Type

• titlesans-serif · 28px · bold · #FFFFFF
• option labelsans-serif · 18px · medium · #000000

Elements

• Top Navigation · header

  Fixed at the top. · White icons and text on dark background.

• Progress Indicator · progress bar

  Centered below the top navigation. · Segmented line indicators.

• Selected Option Card · selectable card

  Second card in the vertical list, highlighted with cream background and checkmark. · Cream fill with dark text and a checkmark circle.

• Unselected Option Cards · selectable card

  First, third, and fourth cards in the vertical list. · Dark gray fill with white text.

Layout

Vertical list layout with one option selected and highlighted.

Notes

User has selected '1-10 push-ups'.