Calorie Counter +

Colors

• #0D96A8Teal Gradient Background · screen background
• #EDA2C4Cake Accent Pink · birthday cake frosting
• #75C4E5Cake Accent Blue · birthday cake base and candles
• #0A8393Input Container Teal · text field background
• #FFFFFFText White · heading · unit label · body copy · navigation labels
• #CFD5DAKeypad Background · system keyboard tray
• #FFFFFFKeypad Key Fill · keyboard individual key backgrounds
• #000000Keypad Text Black · keypad digits and sublabels

Type

• Section HeaderAvenir Next · 38px · bold · #FFFFFF
• Input SuffixAvenir Next · 38px · normal · #FFFFFF
• Explanatory BodyAvenir Next · 36px · normal · #FFFFFF
• Bottom Nav ActionAvenir Next · 38px · normal · #FFFFFF

Elements

• Birthday Cake Illustration · illustration

  Centered horizontally in upper quadrant, ~220px width · Two-tone vector cake with three candles in pastel pink and cyan blue

• Age Numeric Input Field · text input

  Centered horizontally below 'AGE' heading, ~270px width, ~120px height · Darker semi-translucent teal rounded rectangle showing suffix 'yrs' right-aligned

• Explanation Paragraph · text block

  Centered text below input field, horizontal padding ~100px · White medium-size sans-serif text across 3 centered lines

• Numeric Keypad · keyboard

  Docked at bottom of screen, taking bottom ~40% of viewport · Standard iOS style numeric keypad with white rounded rectangular keys, dropshadows, and backspace icon

• Bottom Navigation Bar · navigation toolbar

  Full width directly above the keypad, Back left-aligned, Next right-aligned · Transparent background with plain white text labels

Layout

Single question onboarding view with an active on-screen numeric keypad anchored to the bottom. Top contains close button, center contains thematic illustration, input field, explanation, and action links above keypad.

Notes

Custom iOS keypad layout with 1-9 grid, 0 centered, and backspace button on lower right.