Calorie Counter +

Colors

• #0D96A8Teal Gradient Background · screen background
• #D5ECE9Alert Dialog Background · modal dialog card background
• #000000Alert Title Black · alert title text
• #1D1D1DAlert Message Black · alert body text
• #0F8E9CAlert Action Teal · modal button text
• #FFFFFFFaded Nav Label · underlying navigation labels

Type

• Dialog TitleAvenir Next · 44px · bold · #000000
• Dialog BodyAvenir Next · 36px · normal · #1D1D1D
• Dialog Action ButtonAvenir Next · 40px · bold · #0F8E9C

Elements

• Validation Alert Card · modal dialog

  Centered horizontally and vertically over dimmed/inactive content, width ~780px, height ~420px · Soft mint/pale-teal rounded rectangle with distinct corner radius, subtle drop shadow, containing title, message, and centered OK action

• OK Confirmation Action · button

  Centered horizontally at bottom of modal dialog card · Text-only teal action button without border

Layout

Modal dialog overlay presented over the blurred/obscured Age step, demanding user attention to satisfy form validation.

Notes

Keypad is dismissed while the modal dialog is active, returning focus to the primary prompt.