Ivy: Processed Food Scanner

Colors

• #FAF7F2background-cream · screen background
• #234A38title-green · page title text
• #206B6Fbell-teal · notification bell body
• #0D5954ring-teal-accent · circular orbit rings · badge circle fill
• #1B4F3Bselected-card-border · active option border · checkmark icon fill
• #EFF2EEselected-card-bg · active option background tint
• #FFFFFFunselected-card-bg · inactive option background
• #E0E3DEunselected-card-border · inactive option subtle border
• #155A5Dcta-teal · continue button background
• #101B17text-primary · option labels · assurance caption

Type

• page titleSF Pro Display · 54px · 700 · #234A38
• selection option labelSF Pro Display · 40px · 700 · #101B17
• reassurance captionSF Pro Text · 34px · 600 · #101B17
• cta button labelSF Pro Text · 34px · 600 · #FFFFFF

Elements

• hero_bell_graphic · illustration

  Centered in the upper-mid screen, circular diameter ~560px. · Concentric layered rings with a stylized 3D shaded bell icon in the center and a small dark teal circular notification badge with white digit '1'.

• option_card_2_days · selectable card

  Width ~940px, height ~160px, centered horizontally. · Light greenish off-white fill, 4px solid dark forest green border, containing bold text '2 Days Before' and a circular dark green checkmark icon on the right.

• option_card_1_day · selectable card

  Width ~940px, height ~160px, placed ~32px below the first card. · White fill with a very subtle border, displaying left-aligned bold text '1 Day Before'.

• assurance_label · label with icon

  Centered horizontally below option cards, ~50px above CTA button. · Checkmark icon preceding text 'No payment due now' in bold black font.

• continue_button · button

  Bottom pinned container spanning ~940px width, height ~120px, ~60px from bottom edge. · Solid deep teal fill with centered white text.

Layout

Single centered screen flow consisting of top heading, central notification illustration, two vertical pill-shaped option selectors, assurance text, and a sticky bottom CTA button.

Notes

The notification bell graphic utilizes layered circular arcs to simulate radar or sound waves.