Calorie Counter +

Colors

• #0f7d9dteal_gradient_top · background_top
• #1ebcaateal_gradient_bottom · background_bottom
• #189aa4input_table_fill · text_input_container
• #d1d5dbios_keyboard_bg · keyboard_backdrop
• #ffffffkeyboard_key_white · keycap_surface
• #a6b1bakeyboard_key_dark · keycap_utility_surface
• #89b9bckeyboard_key_action · keycap_action_surface

Type

• screen_headingSF Pro Display · 40px · 400 · #ffffff
• field_input_placeholderSF Pro Text · 44px · 400 · #a3d8df
• body_disclaimerSF Pro Text · 38px · 400 · #ffffff
• keyboard_characterSF Pro Text · 48px · 400 · #000000

Elements

• registration_form_inputs · form_control

  Upper center, 3 fields enclosed in single rounded card · Translucent cyan fill with focused vertical text cursor on the first row

• checkbox_unchecked · checkbox

  Left aligned next to promo copy, approx 56x56 px · Empty white square outline without checkmark

• system_keyboard · virtual_keyboard

  Anchored to bottom spanning 100% width, height ~760 px · iOS German QWERTZ key layout with light grey background, white character keys, and teal tinted action key

Layout

Active input state: upper portion presents brand logo, title, and grouped input fields with focus cursor; bottom half is occupied by the native iOS software keyboard.

Notes

Bottom illustration from screen 2 is displaced / covered by the software keyboard.