Calorie Counter +

Colors

• #0D96A8Teal Gradient Background · screen background
• #EDA2C4Icon Heart Pink · heart icon illustration
• #0B8C9COption Card Fill · grouped options card background · standalone option background
• #1597A6Option Divider Teal · separator lines between list items
• #FFFFFFOption Label White · option text labels · section title · bottom nav labels
• #FFFFFFCheckmark Circle White · active checkmark badge fill
• #0B8C9CCheckmark Glyph Teal · selected checkmark icon stroke

Type

• Section HeaderAvenir Next · 38px · bold · #FFFFFF
• Option Item LabelAvenir Next · 38px · normal · #FFFFFF
• Bottom Nav ActionAvenir Next · 38px · normal · #FFFFFF

Elements

• Heart Icon · illustration

  Centered horizontally in upper third, ~280px width · Smooth vector heart in uniform soft pink

• Medical Conditions Option Group · list container

  Centered horizontally, margin ~50px from sides, contains 4 stacked option rows · Semi-translucent darker teal rounded rectangle with subtle horizontal divider lines between items

• Exclusive Option Card · selectable card

  Directly below grouped options container with ~30px vertical separation, matching width · Independent rounded rectangular container in darker teal with 'None of the above apply' text and right-aligned white circular checkmark

Layout

Multi-choice health questionnaire layout. Heart icon and title at top, grouped condition options card in middle, negative condition selector card beneath, finished by standard bottom navigation row.

Notes

'None of the above apply' acts as an exclusive option with an active checkmark badge on the right edge.