Calorie Counter +

Colors

• #0D96A8Teal Gradient Background · screen background
• #EDA2C4Presenter Figure Pink · person silhouette
• #FFFFFFChart Board White · presentation easel board outline
• #0B8C9COption Container Fill · list card background
• #FFFFFFOption Text White · goal option titles · heading · nav labels
• #FFFFFFActive Indicator White · check circle background

Type

• Section HeaderAvenir Next · 38px · bold · #FFFFFF
• Option TitleAvenir Next · 38px · normal · #FFFFFF
• Nav Button LabelAvenir Next · 38px · normal · #FFFFFF

Elements

• Presenter Icon · illustration

  Centered horizontally in top portion, ~220px width · Figure presenting to a bar chart board in pink and white strokes

• Goal Selection Group · grouped selection list

  Centered horizontally, margin ~50px left and right, 3 rows · Rounded rectangle card with 3 options: 'To lose weight', 'To maintain weight', 'To gain weight'. Top option is active with white checkmark badge

Layout

Single selection goal step. Upper section features illustration and title, middle section houses a 3-item segmented container, and bottom contains Back/Next navigation.

Notes

Selection indicator is placed on the first item ('To lose weight'). Generous negative space below options.