Calorie Counter +

Colors

• #ff7e00welcome_orange · modal_card_background
• #ffffffpure_white · card_title · card_body · button_background · logo_apple_silhouette
• #13999eheader_teal · underlying_header_background
• #f5f5f5dashboard_neutral · underlying_surface_background

Type

• modal_greetingSF Pro Display · 74px · 600 · #ffffff
• modal_subheadingSF Pro Text · 44px · 400 · #ffffff
• modal_mission_bodySF Pro Text · 44px · 400 · #ffffff
• button_action_textSF Pro Text · 42px · 600 · #ff7e00

Elements

• welcome_modal_card · modal_card

  Centered floating card covering approx 82% screen width, height ~1260 px · Solid bright orange background, rounded corners, soft drop shadow over the main diary view

• brand_apple_logo · image

  Centered at the top inside the orange card, size ~140x130 px · White apple shape badge with blue and purple nutracheck mark

• get_started_button · button

  Centered horizontally near bottom of orange modal, width ~580 px height ~110 px · Solid white pill shape with orange text accompanied by arm muscle and smiling emojis

Layout

Overlay onboarding presentation: prominent orange modal dialog centered over the active diary interface featuring greeting text, brand statement, and large pill call-to-action button.

Notes

Underlying diary interface elements (table headers, tab bar, summary panel) remain visible around the card edges.