Calorie Counter +

Colors

• #0D96A8Teal Gradient Background · screen background
• #EDA2C4Female Icon Pink · female icon fill
• #75C4E5Male Icon Blue · male icon fill
• #FFFFFFSelection Active White · close button icon · selected indicator fill · labels · next link
• #1A8A99Selection Inactive Teal · unselected radio indicator background

Type

• Option LabelAvenir Next · 34px · bold · #FFFFFF
• Footer NavigationAvenir Next · 38px · normal · #FFFFFF

Elements

• Close Button · icon button

  Top-left corner, ~48px inset from left edge · Thin stroke white 'X' icon without background

• Female Option Selector · selectable tile

  Upper center-left, grouped side-by-side with Male option with ~100px gap · Standing female pictogram in pastel pink, uppercase 'FEMALE' label beneath, and filled white checkmark circle below

• Male Option Selector · selectable tile

  Upper center-right, grouped side-by-side with Female option · Standing male pictogram in sky blue, uppercase 'MALE' label beneath, and low-contrast semi-transparent teal checkmark circle below

• Next Step Action · button

  Bottom-right corner, ~50px inset from right and bottom edges · White plain text label without container or border

Layout

Minimalist onboarding questionnaire screen. Navigation close in top-left, dual gender selection columns in the upper-middle quadrant, and Next progression link in bottom-right.

Notes

The checkmark under female is solid white with teal check, indicating selected state, while the male checkmark is subdued.