Calorie Counter +

Colors

• #0D96A8Teal Gradient Background · screen background
• #20B2CEBullseye Target Blue · target concentric circles
• #0B8C9CValue Pill Fill · current value display background
• #01AABFSegment Selected Fill · active unit tab background
• #FFFFFFWhite Primary · heading · current value text · active wheel text · tab label · bottom nav labels
• #76CBD5Faded Wheel Text · inactive wheel scroll values

Type

• Section HeaderAvenir Next · 38px · bold · #FFFFFF
• Value DisplayAvenir Next · 42px · bold · #FFFFFF
• Segment LabelAvenir Next · 36px · normal · #FFFFFF
• Picker Wheel Selected ItemAvenir Next · 54px · bold · #FFFFFF
• Picker Wheel Faded ItemAvenir Next · 42px · normal · #76CBD5
• Advice FooterAvenir Next · 36px · normal · #FFFFFF

Elements

• Target Bullseye Icon · illustration

  Centered horizontally near top, ~240px diameter · Concentric rings in bright cyan/teal with an arrow hit graphic

• Selected Weight Badge · data badge

  Centered horizontally below section title, ~200px width, ~80px height · Rounded rectangle in deep translucent teal with centered '68 kg' label

• Unit Segmented Control · segmented control

  Centered horizontally below badge, 3 items: 'st & lbs', 'lbs', 'kg' · Horizontal tab bar where 'kg' is highlighted in a vibrant solid cyan rounded pill

• Weight Drum Picker Wheel · drum picker

  Centered vertically in lower middle screen, height ~350px · Scrollable vertical list with centered focal line showing '68kg (10%)' in bright white bold, flanked by fading smaller weight increments

Layout

Goal target configuration screen. Features a top bullseye illustration, numeric indicator, unit segmented control, continuous vertical weight wheel picker, guidance disclaimer, and bottom navigation links.

Notes

The wheel picker dynamically displays percentage deficit next to target weights.