Calorie Counter +

Colors

• #0D96A8Teal Gradient Background · screen background
• #84CEE7Desk Worker Blue · pictogram desk, chair and person
• #0B8C9COption Card Fill · options container background
• #1597A6Option Divider · list divider strokes
• #FFFFFFText White · headers · option titles · option subtitles · helper text · nav buttons
• #FFFFFFSelected Check Circle · active checkmark circle fill

Type

• Section HeaderAvenir Next · 38px · bold · #FFFFFF
• Option TitleAvenir Next · 40px · bold · #FFFFFF
• Option SubtitleAvenir Next · 34px · normal · #FFFFFF
• Helper ParagraphAvenir Next · 34px · normal · #FFFFFF

Elements

• Desk Activity Pictogram · illustration

  Centered horizontally in top portion, ~220px width · Silhouette of a person seated at a desk typing on a laptop in sky blue

• Activity Level Option List · grouped selection list

  Centered horizontally, margin ~50px left/right, 3 rows (Light, Moderate, Heavy) · Semi-translucent rounded container with hairline dividers; selected row has white circular check icon on the right

• Recommendation Text Box · informational text block

  Below option container with ~60px gap, horizontal margins ~70px, centered alignment · Multi-line white text paragraph detailing tracker integration and calorie additions

Layout

Vertical progression layout with icon at top, followed by section title, 3-row activity selector, descriptive advisory text, and bottom toolbar (Back / Next).

Notes

The 'Light' row is currently selected as indicated by the circular check badge on the right.