BetterMe Well-Being Coach

Colors

• #000000Pure Black Background · background
• #f5efe6Cream Selected Card Fill · card_fill_active
• #1c1917Dark Gray Unselected Card Fill · card_fill_inactive
• #111111Black Active Text · active_text
• #ffffffWhite Inactive Text · inactive_text

Type

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

Elements

• Selected Option Card · selection card

  First vertical option list item, active state · Cream background with a checked radio icon on the right

• Unselected Option Card · selection card

  Remaining options below, inactive state · Dark background with empty radio circles

Layout

Identical layout to screen 3, but with the first option selected (cream background and checkmark).

Notes

State change showing a selected list item.